Antworten zum Thema „CSS Divs IE / Mozilla“

mave · 04.05.2009

Hallo ihr! Bin kräftig am verzweifeln... weil hab eigentlich eine ganz nette Seite gemacht blos der IE versauts irgendwie mal wieder... im Mozilla und Safari wird die Seite perfekt angezeigt... ich komm nicht dahinter warum... muss ich hier Hacks zum Einsatz bringen oder woran liegt das? Microsoft kotzt mich grade wieder mal tierisch an...

Hier mal wie es im Mozilla aussieht:

und hier mal wie es im IE aussieht:

Der CSS Code wurde validiert und für gut befunden... der sieht folgendermaßen aus:

Code:

#topmenu {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    top: 15px;
    right: 17px;
}
#navigation {
    border-right:thin;
    border-left:none;
    border-bottom:thin;
    border-bottom-style:solid;
    border-bottom-color:#dadada;
    border-top: thin;
    border-top-style:solid;
    border-top-color: #dadada;
}

.navigaton_main {
    text-align:left;
    font-family: Arial;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    padding-left: 10px;
    color: #FFFFFF;
}

.navigaton_point {
    text-align:left;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    padding-left: 10px;
}

.navigaton_highlight {
    text-align:left;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    padding-left: 10px;
    text-decoration: blink;
}

a:link {
    color: #000000;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: #000000;
}

a:hover {
    text-decoration: none;
    color: #000000;
}

a:active {
    text-decoration: none;
    color: #000000;
}

#content {
    background-color: #FFFFFF;
    margin: 2px;
    min-height: 792px;
}

.news_titel {
    text-align:left;
    font-family: Arial;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    padding-left: 10px;
    color: #000000;
}

.news_text {
    text-align:justify;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    padding-left: 10px;
    padding-right:10px;
    padding-top: 5px;
}

.news_autor {
    text-align:right;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    padding-left: 10px;
}

#footer {
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFFFFF;
}

#footer a:link {
    color: #FFFFFF;
    text-decoration: none;
}

#footer a:visited {
    text-decoration: none;
    color: #FFFFFF;
}

#footer a:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#footer a:active {
    text-decoration: none;
    color: #FFFFFF;
}
.login {
    text-align:center;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFFFFF;
}
.subnavi_highligth {
    text-align:left;
    font-family: Arial;
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFFFFF;
    text-decoration: blink;
}
#topadv {
    position: absolute;
    top: 55px;
    right: 17px;
    background-color: #E4E4E4;
    height: 90px;
    width: 728px;
}
#sidebar {
    background-color: #FFFFFF;
    min-height: 792px;
    margin-top: 2px;
    margin-bottom: 2px;
}
#sideadv {
    background-color: #E4E4E4;
    height: 600px;
    width: 160px;
    position: relative;
    left: 17px;
    top: 10px;
}

Wäre über Ratschläge sehr erfreut!

sokie · 04.05.2009

AW: CSS Divs IE / Mozilla

ohne html u (doctype) kann man nur raten wo die Formatierungen hingehören.
ich vermute aber, dass es sich um ein Boxmodell Problem handelt.

FlashSoft · 05.05.2009

AW: CSS Divs IE / Mozilla

Wie schon @sokie schreibt, nächstes mal kompletten Code. Wie ist dein body Formatiert, meistens ist das, das Problem.

FlashSoft

mave · 05.05.2009

AW: CSS Divs IE / Mozilla

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../include/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#dadada" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
 <div id="topmenu"></div>
 <table width="980" height="92%" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <th height="165" colspan="3" bgcolor="#000000" scope="col"><div align="center">
   <div id="topadv">&nbsp;</div>
    </div></th>
  </tr>
  <tr>
   <th width="159" valign="top" scope="row"></th>
   <td width="590" valign="top"><div id="content"></div></td>
   <td width="184" valign="top"><div id="sidebar"><div id="sideadv">&nbsp;</div>
   </div></td>
  </tr>
  <tr>
   <th height="100" bgcolor="#000000" colspan="3" scope="row"><div align="center"></div></th>
  </tr>
 </table>
</div>
</body>
</html>

FlashSoft · 05.05.2009

AW: CSS Divs IE / Mozilla

Das ist komisch, du willst ja alles links haben, habe deinen Code jetzt verwendet. Da ist alles mittig, wie du es Ebend nicht wolltest.
Oder, wenn du es rechts haben willst, dann in Body? Alles läuft nich dahin wie wir es wollen?????????????????????????????????????????????? Ich bin jetzt PLATT? Bei mir ist das alles Mittig, aber laut deinem Bild soll ja alles Links sein.

FlashSoft

Bigmemo · 05.05.2009

AW: CSS Divs IE / Mozilla

...
ich würde erstmal das Tabellen-Layout ändern und mit DIV's arbeiten...dann kannst auch mit CSS dein Layout nach deinen wünschen stylen...

mave · 05.05.2009

AW: CSS Divs IE / Mozilla

Das ist komisch, du willst ja alles links haben, habe deinen Code jetzt verwendet. Da ist alles mittig, wie du es Ebend nicht wolltest.
Oder, wenn du es rechts haben willst, dann in Body? Alles läuft nich dahin wie wir es wollen???????????????????????????????????????????? ?? Ich bin jetzt PLATT? Bei mir ist das alles Mittig, aber laut deinem Bild soll ja alles Links sein.

Wie ich will alles links haben? Gedacht ist es so, dass wenn eine höhere Auflösung vorhanden ist, die Seite sich zentriert... was in Mozilla auch wunderbar funktioniert.

Da ist alles mittig wie ich es eben wollte... versteh nicht wie du drauf kommst das ich alles links haben will...

Kann sein das es im Bild falsch dargstellt wird... wollte da eigentlich nur zeigen was mit den Divs passiert und nicht die Ausrichtung der Seite darstellen...

ABER MITTIG PASST AUF JEDENFALL!

mave · 05.05.2009

AW: CSS Divs IE / Mozilla

...
ich würde erstmal das Tabellen-Layout ändern und mit DIV's arbeiten...dann kannst auch mit CSS dein Layout nach deinen wünschen stylen...

Du meinst also es liegt an der Tabelle??? Kann doch nicht sein das es in Mozilla perfekt angezeigt wird und blos IE ein Problem... und dass das dann noch an einer Tabelle liegt...

ich denke eher das IE manche CSS Werte anders interpretiert als Mozilla... zumindest hab ich darüber bischen was gelesen... dafür gibts ja so genannte Hacks extras... lieg ich da falsch oder ist das in etwas eine richtige Richtung?

leohh · 05.05.2009

AW: CSS Divs IE / Mozilla

mave schrieb:
ich denke eher das IE manche CSS Werte anders interpretiert als Mozilla... zumindest hab ich darüber bischen was gelesen... dafür gibts ja so genannte Hacks extras... lieg ich da falsch oder ist das in etwas eine richtige Richtung?

Das ganze liegt nur an deinem invaliden Code. Auch der Opera zerschiesst dir dein Tabellengemurkse hier. Du arbeitest mit teils veralteten Eigenschaften wie z.B. align="center" auch sonst ist die Konsistenz deines Codes nicht gewaehrleistet. Ein min -bzw. max-height, versteht der IE in all seinen Ausfuehrungen nicht und wird es mit hoher Sicherheit auch nie verstehen, daran sind aber die Entwickler schuld. Dann arbeitest du mit absoluter Positionierung ohne vorher einen Reset gemacht zu haben. Dann duerfte hier und da auch mal der double-margin Bug zum tragen kommen und solche Kleinigkeiten. Du vergisst z.B. auch das einleitende HTML in deinem Code. Das alles sind so Kleinigkeiten, auf die man schon ein wenig aufpassen muss und sollte.

Was du hier brauchst, ist ein Pagewrap, der deinen ganzen Content zentriert. Herr D hat in seiner Signatur etwas darueber, sogass es auch im IE6 funktioniert - ob man so weit runter will in der Unterstuetzung sei dir ueberlassen. Dann brauchst du einen header in dem du dein ganzes Headergetier unterbringst. Eine Sidebar, die ein float:left bekommt und eine content-area, die deinen Inhalt traegt. Wobei du hier dann abwaegen musst ob dein spaeteres Design, die Faux-Colums Methode erforderlich macht. Letztendlich noch einen Footer und schon waere dein ganzes Layout halbwegs verstaendlich und ohne Tabellen hingezaubert.

Enfern die Tabelle, verzichte auf deprecated Sachen und benutz ggf. Hacks z.B. fuer dein

mave · 05.05.2009

AW: CSS Divs IE / Mozilla

werde es heute abend gleich mal testen... danke schonmal für die hinweise...