Trying to make a simple horizontal navlist with a background image that shows up when you hover. I am not using the Css menus action, it is the handcode way.
As normal no problem with macbrowsers, but in IE7 the hover doesn’t work, in IE6 (how is it possible) there isn’t a problem. Does anyone know what I did wrong?
IE IS displaying the background image, but it is NOT displaying the padding around the text that the image is drawn on. To get IE7 to respect the darned text padding, move the display:inline attribute to the plain list item style, then add display:inline-block to the list item anchor style. This fixes IE7, but then Firefox/Mozilla shifts the menu down about 10px
On Wed, May 21, 2008 at 3:55 PM, b8 wrote:
Trying to make a simple horizontal navlist with a background image that shows up when you hover. I am not using the Css menus action, it is the handcode way.
As normal no problem with macbrowsers, but in IE7 the hover doesn’t work, in IE6 (how is it possible) there isn’t a problem. Does anyone know what I did wrong?
Thanks Ernie for pointing the right direction.
Got it working now in IE7, IE6, Firefox and Opera.
Haha, indeed it is maddening sometimes, damned IE problems
IE IS displaying the background image, but it is NOT displaying the padding around the text that the image is drawn on. To get IE7 to respect the darned text padding, move the display:inline attribute to the plain list item style, then add display:inline-block to the list item anchor style. This fixes IE7, but then Firefox/Mozilla shifts the menu down about 10px
Nice navlist! Specially the way you are using the text-indent, never
thought about this, it’s an another dimension to use fonts wich you
want to use. Great!
@ Richard
Thanks for the tip about the value padding-bottom. I’ll give it a go.
By the way, you mention this padding two times; in ‘#nav ul li a’
and in ‘#nav ul li a:hover’. I can image you have to remove one of
them?
This did the trick! After I followed the advice from Ernie the
hovered link displayed well, but then the other two links collapsed to
the bottom of the navlist in IE7 en IE6. By adding the same padding to #nav ul li I tackled the behavoir of the IE’s. Now I’am tweaking it
with em’s instead of pix, and I have to choose between a perfect look
in IE6 en IE7 or Firefox and Opera in Windows. Guess wat I’am going to
do
The value display:inline-block … is ‘inline-block’ valid?
Yes they are valid.
Op 22 mei 2008, om 19:14 heeft Richard van Heukelum het volgende
geschreven:
Remco, dit you allready try to add padding to the bottom simply by
changing the value to padding-bottom:20px in stead of padding: 0 0
20px 0 ?
By the way, you mention this padding two times; in ‘#nav ul li a’
and in ‘#nav ul li a:hover’. I can image you have to remove one of
them?
The value display:inline-block … is ‘inline-block’ valid? Seperate
they are (display:inline and display:block).