|
|||
Liste überlappt wegen float:left in div!
Hallo,
hier die Live-Demo von dem Problem: http://rockmusikforum.com/non/suff.html Relevanter Quelltext: Code:
<br /> <div id="header"> <ul> <li><a href="index.php" title="" id="gelb"></a></li> <li><a href="technik.php" title="" id="blau"></a></li> <li><a href="referenzen.php" title="" id="rot"></a></li> <li><a href="auftrag.php" title="" id="gruen"></a></li> </ul> </div> Code:
div#header { margin:0; padding:0; border:0; width:50%; } div#header ul { margin:0; padding:1em; border:1px solid black; list-style-type:none; } div#header ul li { float:left; margin:0 2em 0 0; padding:0; border:0; } Ihr seht ja, dass das ul-Element einen 1px schwarzen Rand hat...im CSS-code fett markiert. Das ist es auch, welches Probleme bereitet. Die listenelemente, die in dieser Liste immer links gefloatet werden, haben sich durch das floaten aus dem ul-Element rausgedrückt, wie auf dem Screen zu sehen! Möchte das verhindern, dass die sich rausdrücken, brauche eure Hilfe! Gruß RS |
Sponsored Links |
|
|||
Also so:
Code:
<br /> <div id="header"> <ul> <li><a href="index.php" title="" id="gelb"></a></li> <li><a href="technik.php" title="" id="blau"></a></li> <li><a href="referenzen.php" title="" id="rot"></a></li> <li><a href="auftrag.php" title="" id="gruen"></a></li> <div id="clear">sss</div> </ul> </div> Code:
div#clear { clear:left; margin:0; padding:0; border:1px solid black; } http://rockmusikforum.com/non/suff.html Vergleich FF <--->IE (7) ?!?! |
|
|||
Vielen Dank schonmal!
Doch wenn ich es so mache wie du gesagt hast...also das ul-element floaten und dann width:100% verzerrt das ul-element nach rechts und nach unten...liegt wahrscheinlich daran, dass das umfassende div KEINE feste breite hat, wie oben in meinem code geschrieben stand, denn ich hatte die width:50% nur hingeschrieben, dass man das problem besser sieht. in meinem echten code hat das div keine feste breite, daher wahrscheinlich auch der fehler, warum es nicht geht. habe es jetzt so gelöst, dass ich ein leeres div vor das </ul> gesetzt habe mit folgenden attributen: div#clear { clear:left; margin:0; padding:0; border:0; } dann habe ich dem ul-element folgendes im css-code hinzugefügt: display:inline-block; das ist anscheinend explizit für den IE7...ich teste nachher mal den IE 6 und Opera..da geht wahrscheinlich wieder alles den Bach runter... |
|
|||
OK; hier der aktuelle, ausführliche Stand:
HTML: Code:
<div id="header"> <ul> <li><a href="index.php" title="" id="gelb"></a></li> <li><a href="technik.php" title="" id="blau"></a></li> <li><a href="referenzen.php" title="" id="rot"></a></li> <li><a href="auftrag.php" title="" id="gruen"></a></li> </ul> </div> Code:
div#header { margin:0; padding:0; border:0; } div#header ul { display:inline-block;/* Funktioniert prima im IE 7! */ margin:0; padding:1em; border:1px solid black; list-style-type:none; } div#header ul li { float:left; margin:0 2em 0 0; padding:0; border:0; } Doch sowohl im Firefox, als auch im Opera ist das Problem damit nicht gelöst! |
|
|||
ALTERNATIVE:
HTML: Code:
<div id="header"> <ul> <li><a href="index.php" title="" id="gelb"></a></li> <li><a href="technik.php" title="" id="blau"></a></li> <li><a href="referenzen.php" title="" id="rot"></a></li> <li><a href="auftrag.php" title="" id="gruen"></a></li> <div id="clear"><!-- --></div> </ul> </div> Code:
div#header { margin:0; padding:0; border:0; } div#header ul { margin:0; padding:1em; border:1px solid black; list-style-type:none; } div#header ul li { float:left; margin:0 2em 0 0; padding:0; border:0; } div#clear { clear:left; margin:0; padding:0; border:1px solid black; } Ergebnis: FF und Opera machen es zu 100% richtig, beim IE 7 tritt das bekannte Problem auf, dass es überlappt! |
|
||||
Zitat:
So wie Du es momentan hast, kannst Du ul nicht wirklich eine Breite geben, daher würde ich "Easy Clearing" auf ul anwenden (siehe FAQ Punkt 2). |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div Float Clear usw... Ich dreh durch ;) | buggix | CSS | 14 | 11.02.2010 09:42 |
Kriegs nicht hin: Liste in einem DIV bei IE unten ausrichten | velli | CSS | 12 | 02.09.2008 03:03 |
Dringende Float / Ausrichtungsprobleme | Houdini | CSS | 1 | 04.02.2008 10:28 |
div / float / clear / FF / IE - blicke nicht mehr durch | Rahjana | CSS | 7 | 20.07.2006 23:15 |
Abstand von Liste in div ändern | N!KO | CSS | 2 | 04.01.2005 00:50 |