IE vs. Firefox

[Conti93]

so sehen ein und die selbe Seite in 2 verschiedenen Browsern aus und ich weis nicht warum vllt kann mir hier wer helfen. also die css:

body {
margin:0px;
padding:0px;
background-image: url(../img/bg/navi.png);
background-repeat: repeat-y;
background-color: #B9AA7C;
}
* {
font-family: Arial, Verdana, Tahoma;
font-size: 1em;
}
div#links {
float: left;
margin: 0px;
padding: 0px;
height: 180px;
width: 200px;
background-image: url(../img/bg/links.png)
}
div#rechts {
text-align: center;
margin: 0px;
padding: 0px;
height: 180px;
background-image: url(../img/bg/rechts.png)
}
div#navi {
float: left;
margin: 0px;
padding: 0px;
width: 200px;
background-image: url(../img/bg/navi.png);
background-repeat: repeat-y;
}
div#main {
width: 600px;
margin: auto;
padding: 0px;
padding-left: 200px;
padding-bottom: 50px;
background-color: #B9AA7C;
position: static;
}

Es kommt mir so vor als ob der IE (hier 7) das padding-left einfach doppelt einsetzt. nehme ich es ganz raus, wird es im IE richtig angeziegt (mittig unter der überschrift) aber im Firefox fehlen dann diese 200px. was ist da los und ist es möglich einzelne zeilen der css nur bestimmten browsern zuzuweisen?

 

[Efchen]

CSS ohne HTML sagt nichts aus.

Gib uns bitte mal einen Link zur Seite. Und bitte kein "Die Seite ist nicht online". Danke.

 

[Conti93]

Gottfried Wilhelm Leibniz - Dualzahlen

 

[Efchen]

Also was ich jetzt auf Anhieb sehe ist "margin:auto" in Kombination mit "padding-left:200px" für div#main. Damit wird der Block erstmal horizontal zentriert und dann der Inhalt noch 200px nach rechts geschoben. Ich vermute, dass das nicht Deine Absicht war, oder?
Ich hätte eher vermutet, dass Du das margin:auto weglassen willst, und statt eines padding-left:200px ein margin-left:200px willst.
Wenn Du Deinen Inhalt dann in diesem Bereich zentriert haben willst, musst Du ihn nochmal einpacken und erst den Block dann zentrieren mit margin:auto.

Was genau der IE da wieder fabriziert...

Aber in jedem Fall solltest Du Dein HTML überarbeiten. Infizierte Divitis und von Semantik, dem Sinn von HTML, keine Spur. Dir scheint noch das Grundverständnis von HTML zu fehlen.

Grüße,
-Efchen

 

[Conti93]

was meinst du mit semantik keine spur? navi als liste, texte in <p> überschriften <h1> und tags wie <font> <table> etc. sind auch nicht vorhanden.

 

[thuemmy]

Übermäßiger Gebrauch von <div>-Tags z.B.

<div id="links"><br>
<img src="img/leibniz_klein.png" style="margin-left: 20px;" alt="Leibniz klein">
</div>

Das was Du dem div mit der id links mitgeben willst, kannst du auch direkt dem <img>-Tag mitgeben. Ein <br> an dieser Stelle hat da eigentlich nichts zu suchen, da es lediglich zum Design dient. Nicht aller Text ist in <p>-Tags eingeschlossen, deswegen vermehrter Einsatz von <br>. Deine Links unten, sind eine Liste, aber nicht als solche ausgezeichnet. Die kleinen lustigen lila Vierecke müssten nicht als Bilder angezeigt werden, mit dem doofen alt="icon" sondern könnten als list-style der Liste mitgegeben werden.

Ich habe das jetzt nur mal kurz überflogen, und Dir einige Punkte genannt, an denen Du noch arbeiten solltest.

Gruß thuemmy

 

[Efchen]

was meinst du mit semantik keine spur? navi als liste, texte in <p> überschriften <h1> und tags wie <font> <table> etc. sind auch nicht vorhanden.

Ich meine damit, dass Du Deinen Inhalt nicht richtig ausgezeichnet hast. Konkretes kann ich Dir nicht mehr sagen, da Du die Seite ja wohl schon wieder entfernt hast.

Ach, weil ich es gerade sehe, muss man das verstehen, wenn da irgendwo steht "Leibniz klein"? Schau Dir bei der Gelegenheit nochmal die Bedeutung des alt-Attributs an. So kannst Du das jedenfalls nicht lassen. Und der Unterschied, wann baut man eine Grafik als <img> ein und wann als background-image per CSS. Trennung von Inhalt und Layout. Die ganzen Basics halt.