CSS IE vs Firefox&Netscape

Status
Nicht offen für weitere Antworten.
Daaguru

Daaguru

Erfahrenes Mitglied
Unlösbares Problem

Hi Tutorials.de Team,
wie ich schon des öfteren gelesen habe und recherchiert habe,
interpretieren IE, firefox, ns & co. CSS "grundsätzlich" anders!

Ich habe meine Seite nun zum 3.mal unter dem IE erfolgreich ;) angepasst.
Allerdings bekomm ich das in NS&CO ums verrecken nicht hin! :(

Könnt ihr mir eventuell ein paar tips oder Hilfestellung geben!?


Hier mal der CSS-CODE:

PHP: 
body
{
background-color:#82654D;
margin: 2px 0 0 0;
text-align:center;
}

div#container
{
width:800px;
padding:0;
vertical-align:center;
border:2px solid #755945;
margin:0;
}

div#head
{
width:100%;
height:213px;
padding:0;
background-color:#82654D;
background-image: url(../pics/head.gif);
}

div.mainleft
{
float:left;
margin:0;
}

div#mainleft1
{
position:relative;
left:0;
margin:0;
width:120px !important;
width/**/:132px;
height:200;
padding:0;
background-color:#82654D;
border-right:6px solid  #755945;
}

div#mainleft_bottom
{
width:132px;
height:64px;
background-color:#82654D;
margin-left:0;
border:none;
background-image:url(../pics/menu_bottom.gif);
}

div#maincenter
{
position:relative;
float:left;
left:4px;
width/**/:525px;
height:100%;
background-color:#82654D;
border-right:6px solid  #755945;
border-left:6px solid  #755945;
border-bottom:6px solid  #755945;
text-align:left;
}

div#mainright
{
position:relative;
float:right;
width:131px;
height:100%;
background-color:#82654D;
border-left:6px solid  #755945;
border-bottom:6px solid  #755945;
}

Und hier HTML:

PHP: 
<html>
<head>
<title>Ein Title</title>
<link rel="STYLESHEET" type="text/css" href="./css/main.css">
</head>
<body>
<div id="container">
	<div id="head"></div>
	<div class="mainleft">
		<div id="mainleft1"></div>
		<div id="mainleft_bottom"></div>
	</div>
	<div id="maincenter">	</div>
	<div id="mainright"></div>
</div>
</body>

</html>

VIELEN DANK!
~daA|guRu~
 
Zuletzt bearbeitet:
Die komplette Homepage wird total falsch dargestellt.

Der Navigationsberreich ist in der Mitte -> sollte linksbündig sein.
Der Mainberreich ist unten links -> sollte Zentriert sein.
Der RelatedLinks Teil ist irgendwo verteilt -> sollte Rechtsbündig sein.
 
Hallo Daaguru,

da du keine DOCTYP-Angaben in der HTML-Datei gemacht hast, befinden sich alle Browser im Quirksmode. Dabei wird das Boxmodell von den Browsern ganz unterschiedlich interpretiert. Um das zu umgehen, solltest du am besten in alle DIV-Container, die absolute Größenmaße und gleichzeitig noch Ränder haben, noch einen DIV-Block einsetzen. Den äußeren Containern werden dann die Größenwerte zugewiesen, den inneren Containern die PADDING- und BORDER-Werte.

Die Eigenschaft "vertical-align" wirkt in CSS nur auf Text und Inline-Elemente und dient hier zur Positionierung innerhalb der Zeilenstruktur.

Eine relative Höhenangabe von 100% bezieht sich immer auf die Höhe des Elternelements, leider gibt es da auch unterschiedliche Interpretation der Browser (Firefox bezieht das z.B. in deinem Layout auf den BODY). Ich würde an dieser Stelle die Höhenangabe weglassen oder "auto" zuweisen. Dann verhalten sich alle Browser diesbezüglich gleich.
Da dein mainleft-Container eine absolute Höhe von insgesamt 264px (mainleft1: 200px und mainbottom: 64px) hat, kannst du dem maincenter- und dem mainright-Container diese Größe als min-height-Eigenschaft zuweisen. Allerdings wird diese Eigenschaft vom IE nicht ausgewertet.

Die float-Eigenschaften müssen an geeigneter Stelle auch wieder gelöscht werden, am besten noch innerhalb des container-Blockes.

Ich vermute mal, dass du es so realisieren wolltest:

CSS:
Code: 
body 
{ 
background-color: #000; /*#82654D;*/
margin: 2px 0 0 0; 
text-align: center; 
} 
#container 
{ 
width: 800px;
min-height: 495px;
margin: 0 auto;
border: none; 
padding: 0; 
vertical-align: center; /* das ist wirkungslos! */
}
#container .inhaltDiv {
border: 2px solid #755945;
}
#head 
{ 
width: 100%; 
height: 213px;
margin: 0;
border: none;
padding: 0; 
background-color: #82654D;
background-image: url(../pics/head.gif); 
} 
div.mainleft 
{ 
float: left; 
width: 132px; 
margin: 0; 
border: 0; 
padding: 0; 
background-color: #82654D; 
} 
#mainleft1 
{ 
height: 200px; 
margin: 0; 
border-right: 6px solid #755945;
padding: 0; 
} 
#mainleft_bottom 
{ 
height: 64px; 
margin: 0; 
border: 0; 
padding: 0; 
background-image: url(../pics/menu_bottom.gif); 
} 
#maincenter 
{ 
float: left; 
position: relative; 
left: 4px; 
width: 525px; 
/* height: 100%; */
min-height: 264px;
background-color: #82654D; 
margin: 0;
border: 0;
padding: 0;
} 
#maincenter .inhaltDiv {
border-top: 0;
border-right: 6px solid #755945; 
border-bottom: 6px solid #755945; 
border-left: 6px solid #755945; 
text-align: left; 
}
#mainright 
{ 
position: relative; 
float: right; 
width: 131px; 
/* height: 100%; */
min-height: 264px;
background-color: #82654D;
margin: 0;
border: 0;
padding: 0;
} 
#mainright .inhaltDiv {
border-top: 0;
border-right: 0;
border-bottom: 6px solid #755945;
border-left: 6px solid #755945; 
}
HTML:
Code: 
<html>
<head> 
<title>Ein Title</title> 
<link rel="STYLESHEET" type="text/css" href="./css/main.css">
</head> 
<body> 
<div id="container"><div class="inhaltDiv"> 
	<div id="head">#head</div> 
	<div class="mainleft"> 
		<div id="mainleft1">#mainleft1</div> 
		<div id="mainleft_bottom">#mainleft_bottom</div> 
	</div> 
	<div id="maincenter"><div class="inhaltDiv">#maincenter</div></div>
	<div id="mainright"><div class="inhaltDiv">#mainright</div></div>
	<div style="clear:both;"></div>
</div></div>
</body> 
</html>
Vielleicht hilft dir das weiter.
 
Vielen vielen Dank für die ausführliche Erklärung!
Ich hab zwar deinen Code nicht benutzt, aber ich hab das verstanden,
was man braucht, um CSS in allen Browsern gleichermaßen darzustellen.
Die DOCTYPE Angabe zB. wusste ehrlich gesagt nie so genau was das ist
und hat mich auch nicht wirklich interessiert. Aber es ist schon etwas einfacher wenn
man sie verwendet. Danke!

~daA|guRu~
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück