Antworten auf deine Fragen:
Neues Thema erstellen

IE zerschiesst mal wieder....

E

exo

Aktives Mitglied

Hi leute,

bin grad dabei unsere Seite mal wieder zu erneuern und der IE macht mal wieder (wie immer) stress mit dem CSS.

Im FF läuft alles wunderbar, aber der IE stellt die Navi und den Content-Bereich komplett zerwürgt dar. Leider bin ich noch nicht sooo fit in CSS das ich jetzt genau weis wonach ich schauen muss, deshalb brauch ich eure Hilfe...

Hier erstmal die Seite -->

und hier die CSS -->

Ich danke euch schonmal für eure Hilfe

grüße

Micha
 

L

leohh

CSS verliebt

AW: IE zerschiesst mal wieder....

Kommt schon mal vor, wenn man versucht ein Tabellenlayout mittels Divcontainern zu rekonstruieren.

Aber ich kann gerade auf ieTester nichts sehen, was deinem Problem nahe kommt
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

okay ich hab mal nen screen mit rangehängt der das problem verdeutlicht.

Hmm und wie sollte man es deiner meinung her besser/anders machen?




So wirds jedenfalls im IE8 dargestellt, wie das mit den anderen IE`s aussieht weis ich nicht, weil ich davon keinen drauf hab.... :(
 
sokie

sokie

Mod | Web

AW: IE zerschiesst mal wieder....

wenn deine sowieso mit 1000px zentriert festgelegt ist, brauchst du für die abrundungen nur zwei grafiken. die Seitenbreite legst du im äusseren Container fest (zb id=wrapper).
dem Hauptcontentberiech kein Padding zuweisen, lieber die Inhalte per margin/padding anordnen.


eindeutige bereiche mit id statt klassen.
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

Hi Sokie,

habs jetzt mal so gemacht wie du mir empfohlen hast, funktioniert auch ganz gut...im FF ;) der IE macht unter der Oberen Grafik einen doch recht großen Spalt ;)
 
B

Bigmemo

Nicht mehr ganz neu hier

AW: IE zerschiesst mal wieder....

Hallo,

mach mal in deinem CSS als erstes ein Reset aller Abstände und so...

Code: 
* {    
    margin: 0;
    padding: 0;
}

danach ist es besser nach Fehlern zu suchen...

cu
Bigmemo
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

Ok hab ich mit reingemacht, is trotzdem noch derselbe fehler im IE....

ok hier der html teil
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Team-WB v.6 </TITLE>
  <META NAME="Description" CONTENT="">
  <link type="text/css" rel="stylesheet" href="v6.css">
 </HEAD>

 <BODY>
  
	<div class="top_bar small_font"><a href="#">User Login</a> | <a href="#">Impressum</a> | <a href="#">Kontakt</a></div>

<!-- BEGIN HEADER -->
	<div class="head">
		<div class="head_left"></div> 
		<div class="head_right">
			<div class="head_advert"></div>
			<div class="head_nav">
				<div class="menu">
				
				<ul>
					<li><img src="images/nav_left.jpg" height="28px" width="6px" /><a href="#">Home</a><img src="images/nav_middle.jpg" height="28px" width="7px" /></li>
					<li><a href="#">Team-WB</a><img src="images/nav_middle.jpg" height="28" width="7" /></li>
					<li><a href="#">Community</a><img src="images/nav_middle.jpg" height="28" width="7" /></li>
					<li><a href="#">Server</a><img src="images/nav_middle.jpg" height="28" width="7" /></li>
					<li><a href="#">Scripte</a><img src="images/nav_right.jpg" height="28" width="5" /></li>
				</ul>
				</div>
			</div>
		</div>
	</div>
<!-- END HEADER -->


<!-- BEGIN CONTENT -->

	<div class="main_wrapper">
		<div class="main_header"></div>
		<div class="content"></div>
		<div class="main_footer"></div>
	</div>

<!-- END CONTENT -->

<!-- BEGIN COPY -->
	<div class="copy">
		<h1>TEAM-WB</h1>
		<b>&copy; 2009 team-wb.de</b>. All rights reserved. <a href="#">Contact</a> | <a href="">Impressum</a>
	</div>
<!-- END COPY -->

 </BODY>
</HTML>

und hier die css
Code: 
	* {    
    margin: 0;
    padding: 0;
	}
	html, body{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		background-color:#222222;
		color:#ffffff;
		text-align:center;
	}
	.small_font{
		font-size:10px;
		font-family: verdana, tahoma, sans-serif;
	}
	.small_font a{
		color:#5c5c5c;
		text-decoration:none;
	}
	.small_font a:hover{
		color:#eeeeee;
	}
	.top_bar{
		width:100%;
		height:18px;
		border-bottom:1px solid #444444;
		padding-top:3px;
		text-align:right;
		margin-right:10px;
	}

	.head{
		width:1000px;
		height:123px;
		margin-left:auto;
		margin-right:auto;
	}

	.head_left{
		width:272px;
		height:100%;
		background-image:url(images/head_logo.jpg);
		position:relative;
		float:left;
	}
	.head_right{
		width:728px;
		height:100%;
		position:relative;
		float:left;
	}
	.head_advert{
		position:relative;
		height:60px;
		width:468px;
		border:1px solid #4b4949;
		background: #000000;
		margin:auto;
		margin-top:22px;
		vertical-align:middle;
	}
	.head_nav{
		position:relative;
		height:28px;
		width:100%;
		text-align:right;
		font-size:12px;
		font-family:verdana, sans-serif;
		color:#989898;		
		overflow:visible;
		margin-top:10px;
	}
	.menu{
		position:relative;
		margin:0 auto;
		height:28px;
		float:right;
	}
	.menu img{
		float:left;
		position:relative;
	}
	.menu ul{
	
		list-style-type:none;
		height:28px;
		margin:0; padding:0;
		float:right;
	}
	.menu ul li{
		position:relative;
		text-align:center;
		float:left;
	}
	.menu ul li a, .menu ul li a:visited{		
		padding:0 10px;
		height:100%;
		display:block;
		text-decoration:none;
		color:#989898;		
		text-align:center;
		line-height:28px;
	}
	.menu a{
		background-image:url(images/nav_bg.jpg);
		float:left;
	}
	.menu ul li a:hover{
		color:#ffffff;
	}

	.main_wrapper{
		width:1000px;
		margin:0 auto;
	}
	.main_header{
		margin:0;
		width:100%;
		height:10px;
		background:url(images/main_header.gif) no-repeat;
	}
	.main_footer{
		margin:0;
		width:100%;
		height:10px;
		background:url(images/main_footer.gif) no-repeat;
	}

	.content{
		width:100%;
		background:#303030;
		height:500px;		
	}


	.main{
		width:1000px;
		height:auto;
		margin:0 auto;
	}
	.content_head{
		position:relative;
		width:100%;
		height:10px;
		margin-left:auto;
		margin-right:auto;
		background: #303030;
		text-align:left;
	}
	.content_main{
		position:relative;
		height:500px;
		width:99%;
		background-color: #303030;
		padding-left:1%;
		
	}
	.content_foot{
		position:relative;
		width:100%;
		height:10px;
		margin-left:auto;
		margin-right:auto;
		background: #303030;
	}	
	.footer_right{
		float:right;
	}
	.footer_left{
		float:left;
	}
	
	.copy{
		width:1000px;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		color:#4e4e4e;
		font-family:verdana, tahoma, sans-serif;
		font-size:10px;
		text-align:left;
	}
	.copy h1{
		font-family:Arial Black;
		font-weight:900;
		font-size:20px;
		color:#4e4e4e;
		letter-spacing:-0.1px;
	}
	.copy a, .copy a:visited{
		text-decoration:underline;
		color:#4e4e4e;
	}
	.copy a:hover{
		color:#eeeeee;
	}
 
D

Desert_Eagle25

Perfektionist

AW: IE zerschiesst mal wieder....

hm du kannst falls du keine lösung für beide (FF und IE) findest, eine 2te Style datei einbinden die nur für den IE gilt und dann für den eben gesondert den Style machst der dann im IE klappt und FF nimmt ja dann eh den anderen

<link rel="stylesheet" href="style/style.css" type="text/css">

<!--[if IE]>
<style type="text/css">@import url(style/ie.css);</style>
<![endif]-->
Zum Vergrößern anklicken....
genau so würd ichs im head der HTML/PHP datei schreiben
 
B

Bigmemo

Nicht mehr ganz neu hier

AW: IE zerschiesst mal wieder....

...
was ich mir noch vorstellen kann, ist vielleicht noch die DTD deklaration...ersetz mal die durch ==>

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

usw.
muss Dich halt mal über die DTD informieren...

cu
O-Coder
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

thx euch allen, der tipp mit dem DTD war genau das Richtige und hat wunderbar funktioniert :)
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

Leute ich brauch nochmal eure Hilfe, weil ich mal wieder nicht weiter komme :(

Also geht um die beiden News-Container am Ende der Seite, hier passt sich der Main_Content-Container irgendwie nicht mehr der Höhe an, hört also an der Stelle auf und der Content läuft drüber weg, aber ich hab ehrlich gesagt kein blassen mehr woran es liegen kann. hab schon mehreres ausporbiert, aber komme einfach nicht weiter...

könnte sich das jemand nochmal kurz anschauen?



thx
 
B

Bigmemo

Nicht mehr ganz neu hier

AW: IE zerschiesst mal wieder....

...
nimm mal die Höhenangabe bei

Code: 
.other_news {
    /*height:250px;*/
    width:48%;
}

raus...

cu
Bigmemo
 
Zuletzt bearbeitet:
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

ach mensch is doch schon alles verflixt :D danke dir, aber vielleicht könnt ihr mir die frage auch gleich noch mit beantworten ;)

Bei den kleinen Newsfenstern unten sind ja die höhen immer unterschiedlich, wie mach ich das jetzt am besten, dass diese news-footer (da wo kommentare usw. steht) immer auf der selben höhe sind....mit bottom:0 funkts net...
 
L

leohh

CSS verliebt

AW: IE zerschiesst mal wieder....

indem du dem bereich ein position: absolute; bottom: 0; gibst.
Vllt. setzt du den Bezugspunkt innerhalb des umschliessenden Containers noch mal auf position: relative, damit sich das ganze nicht an der Browserkante orientiert
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

geht auch nich, der umlaufende container (other_news) hat ja bei dem kürzeren Container der beiden nicht die 100%ige höhe des anderen
 
L

leohh

CSS verliebt

AW: IE zerschiesst mal wieder....

Funktionierendes Testcase mit deinem aktuellen Problem wuerde helfen.
Es waere im Uebrigen wesentlich einfacher, wenn du eine Entwicklerversion mit deinem Problemen online laesst und nicht staendig runter nimmst.
 
B

Bigmemo

Nicht mehr ganz neu hier

AW: IE zerschiesst mal wieder....

...
noch ein kleiner Tip am Rande...um das Springen bei FF zu verhindern, wenn der Scrollbalken fehlt(z.B. bei wenig Inhalt)...
Code: 
html {
   height: 101%;
}

eingeben...

cu
Bigmemo
 
E

exo

Aktives Mitglied

AW: IE zerschiesst mal wieder....

@bigmemo: was meinst du mit springen genau?

hat event. noch jemand eine Idee mit meinem aktuellen Problem mit den 2 unterschiedlich langen Div-Boxen, die immer auf dieselbe Höhe zu bringen?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 121 (Mitglieder: 6, Gäste: 115)
Robots: 913

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben