Jump to content

display block for list items in IE


pnmorrison

Recommended Posts

Hi

 

I have a navigation menu made out of a ul here http://www.equanet.co.uk/corporate/landing/link2ict/communication.jtp

i have put a display:block on the <a> tags in each list item however the when you hover over the list item it does not become selectable - only the actual text which forms the link.

 

Now it works as designed in FF, but not in IE8 (not sure about other IE versions - unable to test at present as firewall prevents me from downloading IE Tester and the like).

 

I have tried to force it to work by giving it a width, even to the <li> itself, and even giving the <li> a display:block.

 

Does anyone know why i am not achieving the desired result given that this is my css

#menu li a { text-align:center; font-size: 14px; font-weight: bold; margin: 0; text-decoration: none; padding: 10px 0; display: block; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; }

 

Any guidance would be greatly appreciated - many thanks.

Link to comment
Share on other sites

Ben, I see the issue. When he hovers over the buttons it doesn't hover except only over the text portion whereas in FX the hover works when hovering over any part of the button.

 

Not sure why display: block is not working but when I apply the height it seems to make things a bit worse.

Link to comment
Share on other sites

Ben, I see the issue. When he hovers over the buttons it doesn't hover except only over the text portion whereas in FX the hover works when hovering over any part of the button.

You're right -- missed that.

 

Could it have anything to do with the rounded corner script you are using? Have you tried disabling that to see if it makes a difference? I think the script is using absolute positioning to place the corners, which means that the hover effect doesn't activate unless you are over the text itself.

Link to comment
Share on other sites

I tried disabling Javascript (which disables the rounded corner script), and that fixes the display:block issue for me. Yes, your rounded corners don't work in IE, but the display:block does. Seems like you either need to change the script you are using to something that doesn't use position:absolute to partially hide the link, or use background images rather than CSS/Javascript to create the rounded corners.

Link to comment
Share on other sites

i have removed the script (i am unable to disbale javascript due to being on a network pc) however the display block doesnt seem to work still (IE 8).

 

i will probably need to use bg images for the nav list items - i was hoping this method would mean i didnt need to.

 

thanks for taking the time to help anyway - much appreciated.

Link to comment
Share on other sites

Sorry, maybe I should have phrased things different. The issue is not with display:block. It is actually working fine -- it just appears not to work when you use :hover on links. The rounded corners script you are using uses several absolutely positioned elements that are positioned over your link. This means that rather than activating the :hover when your mouse is over most of the link, the mouse is actually over the absolutely positioned element and the :hover doesn't work.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...