Jump to content
xisto Community
szupie

Ie Whitespace Bug Oh, no... I cant defeat it

Recommended Posts

Anyone know of the IE whitespace bug that occurs when you apply display: block; to an <a> element inside a <ul> element? I'm trying to create a side navigation menu that involves links inside lists, and I can't fix the bug... I have searched for many solutions, but none have worked for me. Anyone know why the workarounds work sometimes but not at other times?

Share this post


Link to post
Share on other sites

When you want to turn a link into a button, you can use css to make it display: block, which makes an anchor clickable anywhere in the box around it. But when the anchor is inside an unordered list like this:

<ul><li>  <a href="hello.htm">sdsdf</a></li></ul>
Internet Explorer would parse the carriage return after the <li> as a whitespace, and would add an extra gap around the <a>. The only certain way I know of is to remove every return in the code, like this:
<ul><li><a href="hello.htm">sdsdf</a></li></ul>
But that would make the code too hard to read. That's why I'm looking for an alternate solution that would work at least most of the time.

Share this post


Link to post
Share on other sites

Hmm, I've never heard of a whitespace tag, nor can I find it on Google. Are you sure that exists in HTML/XHTML?BTW, I'm trying to follow web standards in my site, so I don't want to use solutions that are non-standard. However, if you think the solution is the best one, I may try to work it into my site.

Share this post


Link to post
Share on other sites

There is no whitespace tag sorry, I was thinkingg there was because there are a couple tags I lump into the whitespace category. The tag I was thinking of is the <pre> tag which is in the XHTML standard, but it needs the closing </pre> tag after the text.~Viz

Share this post


Link to post
Share on other sites

I've never encountered the particular bug you reference, but I've often exerienced IE whitespace bugs. Have you tried redefining the UL class to specify how much whitespace should exist around it? Have you considered using a server-side language, such as PHP to detect the visitor's browser and serve an IE or other version of the page accordingly? Just some thoughts.

Share this post


Link to post
Share on other sites

saint-michael: Thank you, but I don't think the first link is what I was looking for. It was about IE's margin problems, while what I'm experiencing is a problem in IE's rendering of spaces. I have read the second link before, but the given solutions didn't work for me.vizskywalker: Hmm, the pre tag gave me a whole blank row after each list item, even in Firefox.clagnol: Again, it's a problem in IE's rendering of whitespaces, so changing the margin or padding (I assume that's what you're talking about) wouldn't help. I don't like browser detection, since it can be buggy sometimes. Opera identifies itself as IE, even though it may not have the same bugs as IE.

Share this post


Link to post
Share on other sites

Hey szupie,This bug exists in Firefox under some different elements too, which I filed a bug report for it about a month ago as well as a solution. I know under W3C whitespacing is suppose to be excluded unless you specified the style white-space: pre; and that whitespaces be converted to spacing that HTML understands.For readability I use to do the same as you would do, but now I write some elements inline just so I do not have that problem. It's not a major loss to readibility though, it's still quite clean.I don't know if IE7 has made any improvements on this (but they are far behind, web technology wise), but Firefox are fixing the elements I pointed out which will be definitely in an upcoming release.If I was you, I would just go with losing that minor readibility for consistency sake, as if most browsers are falling under this then it's best to have it working on the majority of them, than trying to get all these browsers fixing those problems.Cheers,MC

Share this post


Link to post
Share on other sites

OK, mastercomputers, I'll do that until I can find a better solution (if I will ever find one)... Do you know any small program or any extension for Dreamweaver that can do that automatically?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.