CSS Hover w/ Displace Not Working

HTML & CSS
1

I’m using a CSS hover method that displaces part of an image to create a hover effect (once the mouse is placed over the image, the other half of the image is “uncovered” or “slides over”, making it appear as a mouse over effect).

The navigation bar on this page uses that CSS hover effect. But the menu buttons are falling under one another instead of appearing inline, one after the other. How do I fix that?

2

Hi,

To get the nav horizontal you will need to float those anchors.


a.navbarhome {
background:url("http://www.americanchic.net/website_graphics/nav_home.png") repeat scroll 0 0 transparent;
[B]float:left;[/B]
height:16px;
text-decoration:none;
width:114px;


}

Floating the anchors will mean that the navbar height collapses so you will then need to clear the floats.


#navbar {
background:none repeat scroll 0 0 #000000;
border-bottom:1px solid #BBBBBB;
border-top:1px solid #BBBBBB;
margin:5px 0;
[B]overflow:hidden;[/B]
padding:8px 0 9px 7px;


}

[B]* html #navbar{height:1%;overflow:visible}[/B]
3

Great. Thanks!

One question - what will this line of CSS do?

* html #navbar{height:1%;overflow:visible}
4

That line of code sets haslayout on the element for IE6 because elements in haslayout mode will clear their floated children automatically. IE6 doesn’t understand that overflow:hidden contains child floats. The overflow:visible is a safety net because of the overflow:hidden in the main rule which could end up hiding anything above 1%.

5

Gotcha. Thanks!