[CSS/HTML] Firefox ändert Boxbreite beim Hovern von Links

[Mr. Snoot]

Hio,

habe gerade festgestellt, das sich im aktuellen FF die Breite einer Box ändert, wenn man mit der Maus Links im Menü berührt.

Zu sehen bspw. hier im Navigationsmenü am linken Rand. Bewegt man den Cursor jetzt auf einen anderen Hauptmenüpunkt (Waferherstellung, Oxidation usw.) rutscht die rechte Begrenzung der Box ein Stück nach innen. Liegt das irgendwie an den CSS-Hacks? Seh nicht so wirklich, was da kaputt ist.



Das war bisher jedenfalls nicht - aber jetzt leider mit der aktuellsten Version. Im IE und Opera sieht alles normal aus.

HTML-Code für das Menü:

<div id="navcontainer">
	<ul id="navlist">
		<li><a id="active" href="index.php">» Grundlagen</a>
		  <ul id="subnavlist">
<?php 
	foreach ($topics as $key => $value)
	{
	$id = "";
	if ($key == $thema)
	{
	$id = "id=\"subactive\"";
	}
echo "\t\t\t<li><a $id href=\"$myself?thema=$key\">$value</a></li>\n";
	}
?>
		 </ul></li>
		<li><a href="../waferherstellung">» Waferherstellung</a></li>
		<li><a href="../oxidation">» Oxidation</a></li>
		<li><a href="../abscheidung">» Abscheidung</a></li>
		<li><a href="../metallisierung">» Metallisierung</a></li>
		<li><a href="../lithografie">» Lithografie</a></li>
		<li><a href="../nasschemie">» Nasschemie</a></li>
		<li><a href="../trockenaetzen">» Trocken&auml;tzen</a></li>
	</ul>
</div>

CSS-Code für das Menü:

/* Hauptnavigation */

#navcontainer
{
	float:left;
	font-size:10px;
	
	margin:0px;
	padding:0;
	border:1px solid black;
	background:#FAFAFA;
}

#navcontainer ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

#navlist a
{
	display:block;
	color:#000;
	padding:0;

}

#navlist a	/* Box Model Hack */
{
	width:180px;
}

#navlist a
{
	\width:180px;
	w\idth:164px;
}

#subnavlist a
{
	display:block;
	color:#000;
	padding:0;
}

#subnavlist a	/* Box Model Hack */
{
	width:180px;
}

#subnavlist a
{
	\width:180px;
	w\idth:164px;
}

#navlist a
{
	background:url(../bilder/navi_bg_h.png) repeat-y;
	color:#222;
	text-decoration:none;
	padding:2px;
	margin:1px;
}

#subnavlist a
{
	background:url(../bilder/snavi_bg_h.png) repeat-y;
	color:#222;
	text-decoration:none;
	padding:2px;
	margin:1px;
}

#navlist a:hover, #navlist a#active
{
	background:url(../bilder/navi_bg.png) repeat-y;
	color:#FFF;
	font-weight:bold;
}

#subnavlist a:hover, #subnavlist a#subactive
{
	background:url(../bilder/snavi_bg.png) repeat-y;
	color:#FFF;
	font-weight:normal;
}

 

[Flyde]

mh, navcontainer ist ja float: left; hast du die rechte seite mit einem clear:both; "abgeschlossen"?

und

#navlist a
{
	\width:180px;
	w\idth:164px;
}

kannst du mir das erklären? versteh ich irgendwie nicht, auch die \ nicht

 

[Mr. Snoot]

Ja, clear:both ist drin - wie gesagt, es ging bisher ganz normal. Gab es irgendwann mal Änderungen in der CSS-Interprätation vom FF?

Die ganze CSS-Datei liegt hier.

Die '\' sind Hacks für ältere Browser, damit die Breiten überall identisch sind: http://de.selfhtml.org/css/layouts/browserweichen.htm

 

[Crizzo]

Wieso haben die unterschiedlichen Listen unterschiedliche Breiten?

#subnavlist a {
width:164px;
}
#navlist a {
width:158px;
}

Nach dem a:hover wird div#navcontainer nur noch von dem Linktext ausgedehnt, nicht vom eigentlich a-Button.

 

[Mr. Snoot]

Wo hast du denn die 158 her?

Die Listen ansich haben doch die gleichen Breiten, nur bei den Box Model Hacks gibts dann eben für die jew. Browser Unterschiede.

"Nach dem a:hover wird div#navcontainer nur noch von dem Linktext ausgedehnt, nicht vom eigentlich a-Button."

was meinste genau?

 

[Crizzo]

Ich meine, dass der a-Text dann nur noch den Link ausdehnt und nicht wie vor dem "a:hover" der Link als Balken existiert.

Die 158px zeigt mir mein Firebug an.

 

[Mr. Snoot]

Aja .., wenn ich folgendes ergänze scheint es zu klappen (zumindest in den aktuellen FF, Opera und IE):

#navcontainer
{
float:left;
font-size:10px;
width:170px;
margin:0px;
padding:0;
border:1px solid black;
background:#FAFAFA;
}

Auch wenn ich nicht verstehe, wieso es davor schon immer geklappt hat.

Und die 158 kommen eigentlich nirgends vor

edit: scheint für alles außer IE < 6.0 zu passen - das ist mir atm aber egal

danke schön

 

[Zweipunktnull]

Ich würde dir generell empfehlen, ausschließlich mit Conditional Comments zu arbeiten. Die haben viele Vorteile gegenüber der Verstreuung von Hacks im "sauberen" Stylesheet. Erstelle einfach ein W3C-konformes Stylesheet für den Firefox/Opera/Safari und binde noch jeweils ein Korrekturstylesheet für den (MSIE5.5/)MSIE6/MSIE7 ein. Man kann nie wissen, welche Änderungen in der CSS-Implementation neuere Browser mitbringen werden.

 

[Mr. Snoot]

Will das Design sowieso bald komplett neu machen, von daher steck ich da jetzt nicht mehr so viel Energie rein.