Unterschied bei IE und Firefox

[elo63]

Hallo,

hier mal meine CSS Datei, die Überschrift h1 im Mainmenue beginnt im Firrefox mit einen anderen abstand von oben als im IE. Von wo an werden die px die ich bei margin und padding im main angebe gerechnet.

Kann man die Links im Navi zentrieren

Sonst noch Tipps

danke

elo63

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

 body  {
   /* Gesamtschriftbündel */
    font-family: Arial, Helvetica, sans-serif;
   /* Hintergrundfarbe */
    background-color: #CCCCCC;
    margin-top: 25px; /* oberer Rand */
    text-align: center;  /* mittig */
    
 }
 

 /* DIV umspannt alles */
 #wrapper {  
    width: 780px;   
    background-color: white;
    margin: 0 auto;
    text-align: left; /* linksbündig */
 }
 

 /* DIV für Logo */
 #header {
   height: 140px; /* Höhe */
   background-color: gray;
   background-image: url(../img/podo_header.jpg);
 }  
 

 /* Überschrift 1 in diesem Header */
 #header h2 {
   font-variant: small-caps; /* Kapitälchen */
   color: white; /* in weiß */
 }
 

 /* DIV für Hauptbereich */
 #main {  
   font-size:18px;
   background-color: white;
   width: auto;
   padding-top: 70px;
   padding-left: 40px;
   padding-right: 40px;
   margin: 0px;
 }
 

 /* Überschrift 1 im Hauptbereich */
 #main h1 {
   color: #1285DA;  
 }
 

 /* DIV für Menübereich */
 #navigation {
   background-color: #73AADE;
   width: 780px;
   height: 40px;
   float: left;
 }
 

 #navigation li {
   display: inline;
 }
 

 #navigation ul {
   list-style-type: none;
 }
 

 /* DIV für Links im Navi */
 #navigation a {
   display: block;
   float: left;
   height: 24px;
   margin-left: 20px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 9px;
   text-decoration: none;
   color: black;
 }
   
  #navigation a:hover {
   height: 22px;
   color: #FFFFFF;
   background-color: #999999;
   padding-top: 9px;
   }

 

[Tyramel]

AW: Unterschied bei IE und Firefox

So richtig weiß ich nicht wo das Problem ist, da ich das Markup nicht kenne, aber ich vage mal einen Schuss ins Blaue.

Suche mal nach dem sogenannten "Double Margin Bug" der beim IE Auftritt.

Viele Grüße,
Tyr

 

[Tannhaeuser]

AW: Unterschied bei IE und Firefox

Kleiner Tipp: mal ansehen, was nach diesem Text kommt:

Oft sind es nur kleine Korrekturen, die für die einheitliche Umsetzung eines CSS-basierten Layouts erforderlich werden und meist reicht es, über eine Browserweiche (auch "Hack" genannt) den Internet Explorer von anderen Browsern zu unterscheiden, da erstgenannter viele CSS-Definitionen nicht standardkonform interpretiert. Browserweichen nutzen spezielle Selektoren oder Schreibweisen, die von Browsern unterschiedlich interpretiert bzw. teilweise übergangen werden.

Gelesen hier:
SELFHTML: Navigationshilfen / Suche
Gruß aus Lüneburg

 

[Tyramel]

AW: Unterschied bei IE und Firefox

Naja aber Hacks sind eigentlich unsauber und man kann das auch so lösen, mit ein wenig CSS Magie schafft das jeder nein aber mal Spaß beiseite. Solche Sachen muss man von Anfang an Ordentlich machen, sonst hat man am Ende Probleme und muss zwei oder mehr CSS Dateien Debuggen, das ist sehr sehr sehr mühsam.

 

[Tannhaeuser]

AW: Unterschied bei IE und Firefox

Solche Sachen muss man von Anfang an Ordentlich machen, sonst hat man am Ende Probleme und muss zwei oder mehr CSS Dateien Debuggen, das ist sehr sehr sehr mühsam.

Ich glaube, dass elo63 genau dies wollte und deswalb hier die Frage gestellt hat. Ich habe noch einmal bei Selfhtml geforscht und diese Unterseite gefunden:
Ich denke, dass dort die Aufgabenstellung behandelt wird.

 

[Tyramel]

AW: Unterschied bei IE und Firefox

Ja aber aus dem CSS kann man nicht unbedingt den Aufbau der Seite ableiten. So sind alle Hilfen die wir hier geben können im Grunde nur geraten, da ich glaube das da der Double Margin Bug des IE auftritt.

Hilfreich wäre auch zu wissen welcher IE verwendet wird, denn bei IE 6/7 würde ich dringend zum Update raten(Es sei denn es geht nicht Stichwort WinXP).

 

[jackprince]

AW: Unterschied bei IE und Firefox

Wozu gibts wohl Stickys?



Und Finger weg von Hacks!

Damit schafft man mehr Probleme als Nutzen, da teils Versionen des IE bestimmte Hacks nun doch verstehen aber die Anweisung weiterhin falsch verarbeiten.

Im obig verlinkten Thread findest man eigentlich alles was man brauchst.
Dafür ist der Thread eigentlich auch da.

Und gleich die ersten drei Punkte nach der Einführung sollten deine Probleme lösen.

Aber da ich nun einmal am tippen bin ...

Problem ist sehr wahrscheinlich die unterschiedliche Interpretation von padding (also der box modell bug in verschiedenen IE versionen).

Gelöst werden sollten der artige Probleme immer mit Conditional Comments und nicht mit Hacks!

 

[Tyramel]

AW: Unterschied bei IE und Firefox

dem ist nichts weiter hinzuzufügen

 

[elo63]

AW: Unterschied bei IE und Firefox

Habe es mit den 8 gemacht, was ist mit der Frage kann man die Links in der Navi zentrieren.

vielen Dank

elo63

 

[Chickenshooter]

AW: Unterschied bei IE und Firefox

Moin

Links mittig....

gib dem li ne width und dann text-align:center;

z.B.

#navigation li 
{   
  display: inline; 
  width:230px;
  text-align:center;
}

p.s.
dein HTML dazu wäre auch schön !!

MfG

 

[Tyramel]

AW: Unterschied bei IE und Firefox

und falls du die navigation generell mittig haben willst, dann gibst du dem ul ne breite und machst

margin-left:auto; 
margin-right:auto

oder in Kurzform

margin: 0 auto 0 auto;

wobei die 0 durch einen Pixelwert ersetzt werden kann den du haben willst. die erste 0 ist der abstand nach oben, die dritte ist der nach unten.

 

[Chickenshooter]

AW: Unterschied bei IE und Firefox

oder noch kürzer

margin: 0px auto;

 

[Tyramel]

AW: Unterschied bei IE und Firefox

Ich hätte auch die stark verkürzte Form schreiben können, aber ich wollte elo nicht verwirren, weil das Thema doch sehr kompliziert ist.