Hi guys,
I'm setting up a nav list with rollovers. By using the hover pseudo class, I'm changing the background image (which is made to look like a bulleted item). My problem lies in having the image as the background in the href. Whenever the text of the list item is long it obviously has to wrap. When it wraps I'd like the text to indent. Is there a way to have the text indent over so it's not below the image?
This problem could easily be solved if I use the hover class on the list item <li>. BUT THAT OBVIOUSLY DOESN'T WORK IN IE BECAUSE THE PSEUDO CLASSES ONLY WORK FOR THE ANCHOR TAG
Go here to get a better idea of what I'm trying to do. (<!-- m --><a class="postlink" href="http://www.itgco.com/testsites/css/list_rollover.html">http://www.itgco.com/testsites/css/list_rollover.html</a><!-- m -->)
I'd appreciate anyone's input on this. Thanks!give your anhors display:block;Originally posted by Sam
give your anhors display:block;
There is a bug in IE/Win that places a ~1em margin between the LI tags when you've got a block-level <A> tag in it. Set the <LI> tags to display: inline to get around this bug.Thank you, guys!
It works perfectly now!
I'm setting up a nav list with rollovers. By using the hover pseudo class, I'm changing the background image (which is made to look like a bulleted item). My problem lies in having the image as the background in the href. Whenever the text of the list item is long it obviously has to wrap. When it wraps I'd like the text to indent. Is there a way to have the text indent over so it's not below the image?
This problem could easily be solved if I use the hover class on the list item <li>. BUT THAT OBVIOUSLY DOESN'T WORK IN IE BECAUSE THE PSEUDO CLASSES ONLY WORK FOR THE ANCHOR TAG
Go here to get a better idea of what I'm trying to do. (<!-- m --><a class="postlink" href="http://www.itgco.com/testsites/css/list_rollover.html">http://www.itgco.com/testsites/css/list_rollover.html</a><!-- m -->)
I'd appreciate anyone's input on this. Thanks!give your anhors display:block;Originally posted by Sam
give your anhors display:block;
There is a bug in IE/Win that places a ~1em margin between the LI tags when you've got a block-level <A> tag in it. Set the <LI> tags to display: inline to get around this bug.Thank you, guys!
It works perfectly now!