• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Problem bei IE Version5

Status
Für weitere Antworten geschlossen.
N

nemelio

Neues Mitglied
Hallo, ich bin gerade dabei ein Grundgerüst für meine Seite zusammen zu basteln, bin bis gestern auch sehr zufrieden mit dem bisherigen Ergebnis gewesen.

Bei mir zuhause habe ich den gängigen Mozilla Firefox und den Internet Explorer 7 am laufen und habe bei beiden keinen Fehler.

In der Firma habe ich den gängigen Mozilla Firefox am laufen und leider den Internet Explorer 5.

Beim IE 5 in der Firma wird der #content Div unter die Navigation geschoben anstatt daneben, habe nochmal wegen der Breite geschaut aber ich kann den Fehler nicht finden.

Wäre furchtbar nett wenn mir jemand sagen könnte was ich falsch gemacht habe.

Hier einmal den CSS Teil:
Code: 
* {
 margin: 0;
 padding: 0;
 }
html {
 width: 100%;
 height: 100%;
 }
body {
 font-family: arial,sans-serif;
 font-size: 0.8em;
 background-image: url(gfx/bg.gif);
 background-repeat: no-repeat;
 background-position: 0% 0%;
 background-color: #eaeaea;
 }
p {
 margin: 10px 0;
 }
h1 {
 font-size: 1.0em;
 font-weight: bold;
 margin: 5px 0 0 0;
 }
.clear {
 clear: both;
 }
#site {
 width: 749px;
 border: none;
 margin: 0px auto;
 }
#header {
 width: 747px;
 height: 100px;
 margin: 5px 0 0 0;
 border: 1px solid #000000;
 background-color: #ffffff;
 }
#navbox {
 width: 150px;
 height: 100px;
 padding: 10px;
 margin: 5px 5px 0 0;
 float: left;
 border: 1px solid #000000;
 background-color: #ffffff;
 background-image: url(gfx/head_bg.gif);
 background-position: top;
 background-repeat: repeat-x;
 }
#content {
 width: 550px;
 height: 100px;
 padding: 10px;
 margin: 5px 0 0 0;
 float: left;
 border: 1px solid #000000;
 background-color: #ffffff;
 background-image: url(gfx/head_bg.gif);
 background-position: top;
 background-repeat: repeat-x;
 }
#footer {
 width: 747px;
 height: 40px;
 margin: 5px 0 5px 0;
 border: 1px solid #000000;
 background-color: #ffffff;
 }

und den dazugehörigen HTML Teil:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
 <head>
  <title>DS Playground</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <meta http-equiv="content-style-type" content="text/css">
  <meta http-equiv="content-script-type" content="text/javascript">
  <meta http-equiv="imagetoolbar" content="no">
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
<body>
   
<div id="site">
<div id="header"></div><!--ENDE #header-->
<div id="navbox"></div><!--ENDE #navbox-->
<div id="content"></div><!--ENDE #content-->
<div class="clear"></div><!--ENDE #clear-->
<div id="footer"></div><!--ENDE #footer-->
</div><!--ENDE #site-->
</body>
</html>

und die Liveansicht auch noch:
DS Playground

Vielen Dank im voraus.
 
Ich konnte kein runterrutschen von #content feststellen.

Um den Boxmodel-Fehler aus dem Wege zu gehen, könntest du für die seitlichen margin, padding und border ein weiteres Element einschieben (ohne width und float).


z.B:
Code: 
<div id="navbox">
<div id="navbox_innen">Hier die seitlichen padding, margin und border</div>
</div><!--ENDE #navbox-->
Alles was die Elementenbreite in modernen Browsern vergrößert weißt du #navbox_innen zu (kein width).
#navbox_innen nimmt auch so die volle Breite des Elternelementes (#navbox) an.

Anstelle #navbox_innen könntest du auch jedes andere Blockelement verwenden (sind ja meistens schon vorhanden)

#navbox_innen hat nun kein Layout mehr. Sollte das zu weiteren Problemen führen, könntest du #navbox_innen height: 1px; geben. Width würde auch gehen, aber dann hast du wieder den Boxmodelbug am Hals.
height wird von IE5-6 wie min-height behandelt und bewirkt Layout (suche haslayout IE).

Meide alle width-Angaben für Blockelemente die ohnehin durch das Elternelement bestimmt sind.
Wenn du width und padding einem Element zuweist, mußt du alle betroffenen width-Werte für den IE5 anpassen. Das würde ich mir nicht geben wollen.

Vom IE5 (Mac) habe ich überhaupt keine Ahnung. Layout gibt es im IE5 (Mac) soweit ich weiß aber nicht.
Ab IE8 übrigens auch nicht mehr.
 
Zuletzt bearbeitet:
Vielen Dank euch beiden, wenn Chef morgen nicht da sein sollte werde ich die Vorschläge von prm einmal testen.

Wenn das nicht funktioniert versuch ich mal ob ich es hinbekomme was neuroleptika vorgeschlagen hat (klingt nach mehr Arbeit) :grin:. Für den Tipp mit den width Angaben danke ich dir.

Ist immer wieder schön wie am nächsten Morgen in der Firma alles anders aussieht, sei es durch den Monitor aus den 90er Jahren mit der tollen Auflösung oder dem IE 5 :-D.
 
nemelio schrieb:
...klingt nach mehr Arbeit...
Zum Vergrößern anklicken....
Was prm vorgeschlagen hat sind sogenannte Selectoren-Hacks.
Probiere einfach womit du besser zurecht kommst.
Ich denke eine Mischung aus beidem ist auf längere Sicht das einfachste.
Wenn genügend Elemente vorhanden sind würde ich versuchen width und margin/padding zu trennen (das mache ich auch sonst gerne)
Wenn kein geeignetes Element vorhanden ist den Tantek-Hack verwenden.
 
Versuche aber auch deinem Chef klarzumachen, dass der IE 5 wirklich antiquiert ist. Er dürfte noch eine Verbreitung von ca. 3 % haben.
Ich nehme jedenfalls auf ihn keine Rücksicht mehr.
 
So, bin eben nochmal online gegangen mit dem IE 5 nachdem ich gestern Abend noch die Navigation fertig gemacht habe und in den Contentbereich einen "Lorem ipsum" Testtext eingefügt habe und merkwürdigerweise habe ich nun keine fehlerhafte Darstellung mehr zu beklagen.

Habe unserem Produktionsleiter mal gesteckt das der IE 5 nicht mehr wirklich aktuell ist, wenn unsere externe IT Firma mal wieder im Haus ist wird das wohl mal an allen Rechnern geupdatet, wir selbst dürfen das nicht vornehmen (den Firefox hab ich trotzdem installiert :D ).
 
Wer valides, semantisch sinnvolles HTML verwendet, schafft damit auf jeden Fall eine 100%ige Nutzbarkeit, die nicht nur den IE5 betrifft, sondern alle, z.B. auch einen Netscape 0.8.
Man sollte eigentlich problemlos Stylesheets vor Browsern, die CSS kennen aber nicht können, verstecken können. Dann sieht die Site in dem alten Browser zwar doof aus, aber sie ist 100% nutzbar. Man kann nicht erwarten, dass man einen Uralt-Browser benutzt und die Darstellung die selbe ist, wie in modernen Browsern. Man kann aber sehr wohl erwarten, dass das WWW mit jedem Browser nutzbar ist. So ist es nämlich vorgesehen.

Ich wollte nur darauf hinweisen, dass "keine Rücksicht nehmen" sich im Idealfall nur auf die Darstellung beschränken sollte, nicht aber auf die Nutzbarkeit.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben