|
||||
Firefox, :before und float: left;
Hallo Forum,
Ich habe ein kleines Problem mit dem before in Verbindung mit float beim FireFox. Das Floaten wird einfach Ignoriert. --> HIER BEISPIEL <-- CSS: Code:
<style type="text/css"> <!-- /** * VORBEREITUNG */ body, html { height: 100%; } p { font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #000000; font-size: 12px; line-height: 22px; margin-top: 20px; margin-bottom: 10px; } /** * (ENDE) VORBEREITUNG */ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-attachment: fixed; background-image: url("Images/schmuckbilder/Welle-web-2-blau.jpg"); background-repeat: no-repeat; background-position: left top; background-color: #E2E7EB; } ul { list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px solid #FF0000; } ul li { display: block; border: 1px solid #0000FF; float: left; height: auto; } ul li:before { display: block; float: left; width: auto; margin: 0px 0px 0px 0px; padding: 3px 1px 3px 1px; border: 1px solid #FF0000; content: "-"; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; text-transform: uppercase; color: #999; } ul li:first-child:before { padding: 0px 0px 0px 0px; content: ""; } ul li a { display: block; float: left; margin: 0px 0px 0px 0px; padding: 3px 4px 3px 4px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; text-transform: uppercase; color: #999; border: 1px solid #00FF00; } ul li a:hover { color: #000000; background-color: #E2E7EB; } ul li.activelink_level_1 a { font-weight: bold; color: #145490; } ul li.activelink_level_1 a:hover { color: #145490; background-color: #FFF; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block;} /* Holly Hack Targets IE Win only \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End Holly Hack */ --> </style> Code:
<body> <ul> <li class="activelink_level_1"><a href="#">Club4</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Disclamer</a></li> <li><a href="#">News</a></li> <li><a href="#">Sitemap</a></li> </ul> </body> CSS: Code:
<style type="text/css"> <!-- /** * VORBEREITUNG */ body, html { height: 100%; } p { font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #000000; font-size: 12px; line-height: 22px; margin-top: 20px; margin-bottom: 10px; } /** * (ENDE) VORBEREITUNG */ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-attachment: fixed; background-image: url("Images/schmuckbilder/Welle-web-2-blau.jpg"); background-repeat: no-repeat; background-position: left top; background-color: #E2E7EB; } ul { list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px solid #FF0000; } ul li { display: block; border: 1px solid #0000FF; float: left; height: auto; } ul li:after { display: block; float: right; width: auto; margin: 0px 0px 0px 0px; padding: 3px 1px 3px 1px; /* padding:'padding-top' 'padding-right' 'padding-bottom' 'padding-left' */ border: 1px solid #FF0000; content: "-"; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; text-transform: uppercase; color: #999; } ul li:last-child:after { padding: 0px 0px 0px 0px; content: ""; } ul li a { display: block; float: left; margin: 0px 0px 0px 0px; padding: 3px 4px 3px 4px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; text-transform: uppercase; color: #999; border: 1px solid #00FF00; } ul li a:hover { color: #000000; background-color: #E2E7EB; } ul li.activelink_level_1 a { font-weight: bold; color: #145490; } ul li.activelink_level_1 a:hover { color: #145490; background-color: #FFF; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block;} /* Holly Hack Targets IE Win only \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End Holly Hack */ --> </style> Habe ich irgendwo ein Denkfehler? muss man in diesen Fall eine Ausnahme (Sprich Weiche für den FF) machen? Wenn JA, wie macht man eine Weiche für FF? Ich finde überall nur Weichen für den IE.. Schon mal Danke, für Eure Mühe, Mr Light Geändert von MrLight (08.12.2006 um 17:13 Uhr) |
Sponsored Links |
|
|||
Der FF hält sich an diese Regel aus CSS2:
Zitat:
Browserweichen solltest du dir aus dem Kopf schlagen; das geht nicht gut. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 16:09 |
Darstellungsprobleme im IE | lea11011989 | CSS | 17 | 05.11.2010 09:44 |
Problem mit overflow, Navigation verschoben... | buemplizer | CSS | 9 | 09.09.2009 09:43 |
Warum stellt IE Seite falsch dar? | sunny55 | CSS | 6 | 08.09.2008 12:59 |
Probleme beim ausrichten | Mojo83 | CSS | 4 | 25.06.2008 19:54 |