nicht angemeldet
Darstellungsprobleme in IE6
Hallo zusammen,
ich bin gerade dabei eine neue Seite zu erstellen. Ich wollte es mal mit CSS und ohne Tabellen probieren.
Einige Fehler konnte ich auch schon meistern, allerdings tüftle ich seit ein paar Tagen am folgendem Problem:
Die Seite ist eigentlich recht einfach aufgebaut...
- Header
- Mainbereich (Navi Block mit 3x5 Bilder und Textbereich)
- Footer
Problemstellung:
Die Abstandhalter horizontal bei den Navi-Elementen machen nicht was sie sollen. Definition sollte "height:1px" sein wird aber vom IE6 trotzdem Falsch dargestellt (ca. 10px). In Firefox und IE7 funktioniert es problemlos.
Frage:
Was habe ich nicht richtig verstanden, bzw. wo habe ich einen Fehler gemacht? Zu viele oder falsche angaben im STYLE?
Hoffe ihr könnt mir weiterhelfen!
Vielen Dank im voraus!!
MfG,
Bretschi.
Script:
<style type="text/css" media="screen">
<!--
body { background-color:#FF6001; }
#page_box {
height: 764px;
width:1168px;
margin:auto;
}
#header_box {
height:150px;
}
#main_box
#content_box {
height:514px;
background-color:#000000;
width:856px;
float:left;
}
#navi_spalte_1, #navi_spalte_2, #navi_spalte_3 {
width:102px;
height:514px;
float:left;
}
#navi_bild {
width:102px;
height:102px;
background-color:#000000;
}
#navi_bild_spacer_horizontal {
height:1px;
width:102px;
}
#navi_spalte_spacer {
width:1px;
height:514px;
float:left;
}
#footer_box {
height:100px;
clear:both;
}
-->
</style>
<body>
<div id="page_box">
<div id="header_box"></div><!-- /header_box -->
<div id="main_box">
<div id="navi_spalte_1">
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
</div><!-- /navi_spalte_1 -->
<div id="navi_spalte_spacer"></div>
<div id="navi_spalte_2">
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
</div><!-- /navi_spalte_2 -->
<div id="navi_spalte_spacer"></div>
<div id="navi_spalte_3">
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
<div id="navi_bild_spacer_horizontal"></div>
<div id="navi_bild"></div>
</div><!-- /navi_spalte_3 -->
<div id="navi_spalte_spacer"></div>
<div id="content_box"></div>
</div><!-- /main_box -->
<div id="footer_box"></div><!-- /footer_box -->
</div><!-- /page_box -->
</body>
-
Hi,
Problemstellung:
Die Abstandhalter horizontal bei den Navi-Elementen machen nicht was sie sollen.Die "Abstandhalter" selbst sind schon das Problem.
Was willst du mit diesen? Sie sind absolut nicht besser als die "Blind-GIFs" aus dem vorletzten Jahrtausend.Abstaende erzeugst du ueber margin und padding.
Definition sollte "height:1px" sein wird aber vom IE6 trotzdem Falsch dargestellt (ca. 10px). In Firefox und IE7 funktioniert es problemlos.
Der IE < 7 haelt genuegend Platz fuer nicht vorhandenen, hypothetischen Textinhalt frei. overflow:hidden hilft.
Was habe ich nicht richtig verstanden, bzw. wo habe ich einen Fehler gemacht?
Was deinen HTML-Code angeht: Eine Menge.
Es ist absolut sinnfrei, sich zu sagen, "so, ab jetzt missbrauche ich keine Tabellen mehr fuer's Layout" - und dann eine solch fiese Div-Suppe zusammenzubrauen.
Nutze die HTML-Elemente, die die jeweiligen Inhaltsbestandteile am sinnvollsten auszeichnen - und klatsche nicht einfach alles gedankenlos in Divs.
Hx fuer Ueberschriften, P fuer Textabsaetze, Listen fuer Navigationen (denn das sind nun mal Listen von Links), etc.MfG ChrisB
-
Hallo,
danke für die schnelle Antwort und den link....
hat mir auch schon weitergeholfen. leider geht die seite nicht weiter und ich habe es noch nicht geschafft die "navi" bausteine richtig aneinander zu reihen.die vertikale ausrichtung habe ich mit ul, li hinbekommen. margin sorgt dafür, dass ich 1px abstand zum folgenden element habe.
aber die aneinanderreihung der ul´s mit float:left haut leider nicht hin. muss ich diese dann wieder in ein div element einpacken??Danke!
Gruß,
Bretschi. -
Hallo nochmal,
habe wieder einige einstellungen probiert ich schaffe es einfach nicht.
kann mir bitte wer sagen, wie ich sauber 6 grafiken (3 Zeilen; 2 Spalten) aneinander bekomme? zwischen den einzelnen bildern soll immer 1px abstand sein...
es wäre super, wenn das ganze dann in IE6, IE7 und firefox gleich dargestellt würde...
Danke nochmals für eure Hilfe!
gruß,
Bretschi.das haut so nicht hin...:
<style type="text/css" media="screen">
<!--
.navi{
display:block;
overflow:hidden;}ul{
margin-right:1px;
padding:0;
float:left;
}
li{
padding:0;
margin-bottom:1px;
list-style:none;
}
-->
</style>
<body>
<ul class="navi">
<ul>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
</ul>
<ul>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
<li><img src="befit_hp_big/navibausteine_orange/1_3_a.gif"></li>
</ul>
</ul>
</body>
-