CSS navlist - IE7- background image

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?

Link:http://www.xs4all.nl/~horemans/ie7/

Direct link to the stylesheet:
http://www.xs4all.nl/~horemans/ie7/css/stylesheet.css


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is very simple – but also maddening.

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?

Link:http://www.xs4all.nl/~horemans/ie7/

Direct link to the stylesheet:
http://www.xs4all.nl/~horemans/ie7/css/stylesheet.css


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

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 :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Remco,

I was having a somewhat similar issue here <http://anoptic.com/demo/inline_block/index.html> and it required shuffling some attributes between styles as Ernie said.

Todd

On May 22, 2008, at 1:21 AM, Ernie Simpson wrote:

This is very simple – but also maddening.

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

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).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi, it is solved.

@ Todd

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 :slight_smile:

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).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s a bit covering inline-block and IE6/7…
http://www.quirksmode.org/css/display.html

On Thu, May 22, 2008 at 10:14 AM, Richard van Heukelum wrote:

The value display:inline-block … is ‘inline-block’ valid? Seperate they are (display:inline and display:block).


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Thank you Ernie … I allways use the CeeSS widget for references, and I couldn’t find this value there.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options