Darstellungsprobleme IE / Firefox

[Marco]

Hallo Ihr,

ich habe unter

http://www.dikta.de/test_2/test.html

mal ein grobes Gerüst einer HP gebastelt. Allerdings habe ich ein Problem mit der Darstellung im IE:

Ihr seht sicherlich die obere Navigationsleiste. Mit Firefox sieht der Rahmen gut aus, er hat um die Buttons denselben Abstand. Beim IE hingegen ist der Rahmen 'kleiner' wie die Buttons. Wieso ist das denn so?

Meine zweite Frage bezieht sich auf den Hover-Effekt: beim IE funktioniert der Hover nur, wenn man mit der Maus über einen Text fährt, nicht aber beim kompletten Button. Wie kann ich das Problem elegant kösen? Mit Leerzeichen?

Vielen Dank für eure Hilfe.

Gruß, Marco

CSS:

/*
 Datei: formate.css
 CSS-Formate fuer www.dikta-gourmet.de
*/

body {color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; padding: 0em; margin: 0px;}

ul#Navigation {font-size: 0.70em; float: left; width: 150px; margin: 0; padding: 0;}
ul#Navigation li{list-style: none; margin: 0; padding: 2px;}
ul#Navigation a{display: block; padding: 0.2em; font-weight: bold; text-decoration: none;}
ul#Navigation a:link{color: black; background-color: #E0E0E0;}
ul#Navigation a:visited{color: #767676; background-color: #E0E0E0;}
ul#Navigation a:hover{color: white; background-color: #0000FF;}
ul#Navigation a:active{color: blue; background-color: #E0E0E0;}

div#Navigation{padding: 5px; border-width: 1px; border-color: #E0E0E0; border-style: solid; text-align: left; position:absolute;
 width:150px; top:100px; left:10px; background-color:#FFFFFF; z-index:2; min-width: 150px;}
div#Navigation h1{font-family: Helvetica,Arial,sans-serif; font-size: 1.5em; margin: 0 0 1em; color:green;}
div#Navigation h2{font-size: 1.2em; margin: 0 0 1em;}
div#Navigation p{font-size: 1em; margin: 1em 0;}

div#Logo{padding: 5px; border-width: 0px; position:absolute; width:150px; top:10px; left:10px; z-index:2}

div#Inhalt{padding: 5px; border-width: 1px; border-style: dashed; text-align: center; position:absolute; top:100px; left:200px; width:80%;   height:80% /*min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */}
div#Inhalt h1{font-family: Courier; font-size:20px}

div#Navigation_oben{padding: 5px; border-width: 1px; border-color: #E0E0E0; border-style: solid; text-align: center;
 position:relative; /*height:98%; */ width:700px; height:21px; top:38px; left:200px;}
div#Navigation_oben {font-size: 0.70em; float: left;}
div#Navigation_oben a{display: block; padding: 0.2em; font-weight: bold; text-decoration: none;}
div#Navigation_oben a:link{color: black; background-color: #E0E0E0;}
div#Navigation_oben a:visited{color: #767676; background-color: #E0E0E0;}
div#Navigation_oben a:hover{color: white; background-color: #0000FF;}
div#Navigation_oben a:active{color: blue; background-color: #E0E0E0;}

div#Navi_inhalt_oben_1{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:5px;}
div#Navi_inhalt_oben_2{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:240px;}
div#Navi_inhalt_oben_3{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:475px;}

[Gernot Back]

Hallo Marco,

da könnte man aber noch viel zusammenfassen an deinem CSS, z.B.:

  
div#Navi_inhalt_oben_1, div#Navi_inhalt_oben_2, div#Navi_inhalt_oben_3{  
   background-color:#E0E0E0;  
   padding: 0;  
   border-width: 0;  
   text-align: center;  
   height:20px;  
   width:230px;  
}  

bis auf:

position:absolute; left:5px;}
position:absolute; left:240px;}
position:absolute; left:475px;}

Von absoluter Positionierung halte ich in deinem Anwendungsfall auch sowieso nichts, das ist doch gar nicht nötig und statt mit Padding des Elternelements ist es in aller Regel auch günstiger, mit dem Margin des Kindelements zu arbeiten.

Gruß Gernot

[Ingo Turski]

Hi,

http://www.dikta.de/test_2/test.html

die Seite ist für mein (ziemlich standardgroßes) Fenster geringfügig zu breit und auch höher als erforderlich. Warum forcierst Du unnötige Scrollbalken?

Meine zweite Frage bezieht sich auf den Hover-Effekt: beim IE funktioniert der Hover nur, wenn man mit der Maus über einen Text fährt, nicht aber beim kompletten Button. Wie kann ich das Problem elegant kösen? Mit Leerzeichen?

Nein, über die Angabe einer passenden Breite für den IE; dem reicht display:block nicht aus.

ul#Navigation a:active{color: blue; background-color: #E0E0E0;}

div#Navigation{padding: 5px; border-width: 1px; border-color: #E0E0E0; border-style: solid; text-align: left; position:absolute;

Dir ist klar, daß dies im HTML-Quelltext falsch ist? Du verwendest mehrfach die gleiche ID.

div#Inhalt{padding: 5px; border-width: 1px; border-style: dashed; text-align: center; position:absolute; top:100px; left:200px; width:80%;   height:80%

Warum absolute Positionierung? Dies erfordert - wenn der Inhalt sich nicht die gewünchte Breite nimmt - die Angabe einer Breite; und die ist auch schlecht zu bestimmen - 80% ist ein ungünstiger Wert.

freundliche Grüße
Ingo