pnmorrison Posted November 8, 2010 Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2010 Report Share Posted November 8, 2010 It seems to work for me (see attached) Quote Link to comment Share on other sites More sharing options...
newseed Posted November 8, 2010 Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2010 Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
pnmorrison Posted November 8, 2010 Author Report Share Posted November 8, 2010 i disabled the curved corner script but this did not fix the problem. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2010 Report Share Posted November 8, 2010 i disabled the curved corner script but this did not fix the problem. Can you actually upload that change so I can see it? The current link still has the corner script in place. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2010 Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
pnmorrison Posted November 8, 2010 Author Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
pnmorrison Posted November 8, 2010 Author Report Share Posted November 8, 2010 but see all those boxes on the page - they use the same script for roundies and yet the disaply block seems to work on these... oh, the joys of web design... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2010 Report Share Posted November 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
pnmorrison Posted November 9, 2010 Author Report Share Posted November 9, 2010 o i understand now - ok that makes sense - many thanks for the explanation. really appreciate it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.