✔ IE - Hover verzieht Layout

sonnySTAR

sonnySTAR

Erfahrenes Mitglied
Guten Tag alle miteinander,

ich arbeite derzeit an einer WebSite für eine Hundezüchterin. Die WebSite hat eine Vertikale Navigation mit Buttons (via Liste // ul-li). Insgesamt sind es 9 Buttons, wovon 2 eine "Subnavigation" beim hovern zeigen (sind mit display: none; ausgeblendet). Im FireFox passt auch alles, aber sobald ich im Internet-Explorer über einen Menüpunkte hovere, der eine "Subnavigation" hat, gibt es unter dem Button ein "Abstand" von ca. 2-3 Pixel.

Aber da das nur leserlich schwer zu verstehen ist, habe ich hier 2 Bilder davon.

Im FireFox richtig angezeigt: http://www.e-doggz.de/cssprob_ff.jpg

Im IE falsch angezeigt: http://www.e-doggz.de/cssprob_ie.jpg

Die Navigation (inkl. Subnavigation) ist in ungefähr so aufgebaut:

HTML: 
 <ul style="list-style-type: none; padding: 0px; margin: 0px;">
  	<li class="btn_aboutus"><a href="#" class="btn_aboutus_h"></a></li>
        <li class="btn_dogs"><a href="#" class="btn_dogs_h"></a></li>
        <li class="btn_discards"><a href="#" class="btn_discards_h"></a></li>

<!-- Navigation mit Subnav -->
        <li class="btn_news" onmouseover="toggle_navi('show', '1');" onmouseout="toggle_navi('hide', '1');"><a href="#" class="btn_news_h"></a>
    		<ul class="subnav" id="navi_1" style="display: none;">
      				<li><a href="#" class="link_subnav">Quartal I</a></li>
      				<li><a href="#" class="link_subnav">Quartal II</a></li>
                                <li><a href="#" class="link_subnav">Quartal III</a></li>
                                <li><a href="#" class="link_subnav">Quartal IV</a></li>
                                <li><a href="#" class="link_subnav">Alle</a></li>
    		</ul>
	</li>
<!-- Navigation mit Subnav ende -->
                  
</ul>

Der CSS Style zu einem Button sieht folgendermaßen aus:

Code: 
.btn_news {
	background-image: url(../Bilder/btn_news_h.jpg);
	width: 218px;
	height: 47px;
	display: block;
}

.btn_news_h {
	background-image: url(../Bilder/btn_news_uh.jpg);
	width: 218px;
	height: 47px;
	display: block;
}

.btn_news_h:hover {
	background: none;
}

Ich weiß mir einfach nicht mehr zu helfen :(. Ich habs inzwischen schon mit einem "html condition" versucht und einfach in der style_ie.css ein margin-bottom: -2px; eingetragen. Leider auch ohne Erfolg. Weiß mir einer von euch zu helfen?

Wäre sehr nett.

Falls noch irgendwas benötigt wird, einfach sagen! Werde es schnellstmöglichst nachreichen.

Vielen Dank an Alle

MFG
Tim
 
Hi,

tritt denn der Fehler in allen IE-Versionen auf?

Da ich mit dem Codeschnipsel den Fehler im IE nicht reproduzieren kann, wäre hier der Link zur Seite hilfreicher.

mfg Maik
 
Im IE6 tritt der Fehler auch auf ;)

Lösung: Nimm diese Regel im IE-spezifischen Stylesheet (style_ie.css) auf:

CSS: 
.btn_news, .btn_gb { float:left; }

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück