IE stellt mehrere Dinge nicht korrekt dar

[Dark D.]

Hallo zusammen,

auf der Website Phönixkicker ´97 stellt der IE mehrere Dinge nicht korrekt dar:

• an der Navigationsleiste ist der untere Padding viel zu groß, obwohl '0px ' ich angegeben habe
• Die Newsleiste an rechten oberen Rand wird zu klein dargestellt
• Die Gästebuch-Einträge sehen anders aus als in den anderen Browsern

Ich glaub, dass war erst mal alles zu den Fehlern,
wenn ihr mir noch Tipps für Gestaltung und Code geben könntet, würde ich mich auch nicht beschweren :mrgreen:

Das ist die gesamte CSS-Datei:

HTML {
margin: 0%; padding: 0%;
width: 100%; height: 100%;
}
BODY {
margin: 0%; padding: 0%;
width: 100%; height: 100%;
background-color: #FFFFFF; color: #0033FF;
font-family: "Comic Sans MS", sans-serif; font-size: 62.5%;
}
/*linke Seite Anfang*/
.links {
margin: 0%; padding: 0%;
position: absolute;
top: 0%; left: 0%;
width: 21%;
}
.nav {
margin: 0%; padding: 0%;
width: 100%;
text-align: center;
font-size: 1.3em; font-weight: bold;
}
.nav UL {
margin: 10%; padding: 0%;
}
.nav UL LI {
list-style: none;
margin: 5% 0% 0% 0%; padding: 0%;
text-align: center;
}
.nav UL LI A {
display: block;
margin: 0%; padding: 1%;
width: 98%;
border-style: solid solid none solid; border-width: 1px 4px 0px 1px; border-color: #000000;
background-color: #FFFFFF; color: #0033FF;
text-decoration: none;
}
.nav UL LI A:VISITED {
display: block;
margin: 0%; padding: 1%;
width: 98%;
border-style: solid solid none solid; border-width: 1px 4px 0px 1px; border-color: #000000;
background-color: #FFFFFF; color: #0033FF;
text-decoration: none;
}
.nav UL LI A:HOVER {
background-color: #0033FF; color: #FFFFFF;
}
.nav UL LI A:FOCUS {
background-color: #0033FF; color: #FFFFFF;
}
.imgunternav {
margin: 0%; padding: 1%;
width: 98%;
border-style: solid none solid none; border-width: 1px; border-color: #0033FF;
}
* HTML BODY .links .imgunternav { /*Hack für den IE*/
width: 100%;
}
/*linke Seite Ende; rechte Seite Anfang*/
.rechts {
margin: 0%; padding: 0%;
position: absolute;
top: 0%; left: 21%; right: 0%;
border-style: none none solid solid; border-width: 1px; border-color: #0033FF;
}
.news {
margin: 0%; padding: 1%;
height: 3em; width: 98%;
background-color: #0033FF; color: #FFFFFF;
font-size: 1.6em;
}
* HTML BODY .rechts .news { /*Hack für den IE*/
width: 100%;
}
.news A:LINK {
background-color: #0033FF; color: #FFFFFF;
text-decoration: none;
}
.news A:VISITED {
background-color: #0033FF; color: #FFFFFF;
text-decoration: none;
}
.news A:HOVER {
text-decoration: underline;
}
.news A:FOCUS {
text-decoration: underline;
}
.cont {
margin: 0%; padding: 1%;
font-size: 1.6em;
overflow: visible;
width: 98%;
}
* HTML BODY .rechts .cont { /*Hack für den IE*/
width: 100%;
}
/*rechte Seite ENDE*/
/*Layout für Gästebuch-Einträge Anfang*/
DIV.eintrage {
margin: 5% 0% 0% 10%; padding: 1%;
width: 50%;
border-style: solid; border-color: #0033FF; border-width: 1px;
background-color: #FFFFFF; color: #0033FF;
font-size: 1em;
}
.eintrageoben {
margin: 0% 0% 2px 0%; padding: 1%;
position: relative;
top: 0%; left: 0%;
width: 98%;
color: #FFFFFF; background-color: #0033FF;
}
.eintrageunten {
margin: 2px 0% 0% 0%; padding: 1%;
position: relative;
bottom: 0%; left: 0%;
width: 98%;
background-color: #0033FF;color: #FFFFFF;
}
/*Layout für Gästebuch-Einträge Ende*/

 

[gruenspan]

Was soll das:

margin: 5% 0px 0px 0px; padding: 1px 0.3em 0px 1px;

Entscheide Dich für eine Grßenangabe. Also entwder Pixel, Prozent. Em bei padding und margin sollte man imho nicht verwenden.

Was willst du mit dem padding und margin erreichen. Doch nicht etwa einen schwarzen Rahmen im die Listenelemente?! Oder doch? Wenn ja, dann benutze border.

Und schmeiß das display:block bei den Listenelementen raus, das ist vollkommen sinnfrei.

 

[Dark D.]

Das hat schon mal geklappt, Danke! :-D

Aber jetzt zeigt der IE den content-DIV zu groß dar. :-?
(Ich hab die CSS-Datei oben aktualisiert)

Wenn ihr vieleicht noch mal schauen könntet...

 

[Blacky]

Wenn du deinen Code richtig formatierst, dann schaue ich mir das gerne mal richtig an, ansonsten werde ich jetzt mal sowas wie ne Prognose abgeben:

Wenn du "overflow: visible;" verwendest, dann tut der Browser nichts anderes, als den Inhalt über die Box hinaus anzuzeigen, wenn der Inhalt zu viel Platz nach unten hin einnimmt.

Im Übrigen würde ich dir empfehlen, deine Seite mal im WebSite Check bewerten zu lassen, da du noch viel verbessern könntest... überleg es dir mal!

 

[gruenspan]

* HTML BODY .rechts .news { /*Hack für den IE*/
width: 100%;
}

ändere das mal in

* HTML BODY .rechts .news { /*Hack für den IE*/
width: auto;
}

 

[Dark D.]

@gruenspan: Danke, das hat geklappt! :grin:

@Blacky: Was meinst du denn mit richtig formatieren?
In den Website-Check stell ich sie erst, wenn sie (vom Inhalt) einigermaßen fertig ist.

 

[Blacky]

sowas:

HTML {
  margin: 0%; 
  padding: 0%;
  
  width: 100%; 
  height: 100%;
}