- View the HTML/CSS test for yourself (all in one file)
- Red backgrounds are the a tag
- Yellow backgrounds are the li tag
- In Firefox the li only spans the same space as the a tag
- In IE the li spans beyond the a tag (visible where the yellow is)
- I tried putting padding:0 & margin:0 properties on every part of the list to get rid of the space between the a tags in Firefox and to get rid of the yellow li space in IE. No luck.
- The only way that I seemed to be able to get rid of the space between the list entries was to code it with no white-space. I even tried the property white-space:nowrap... no luck.
- I have never seen this before and am wondering if the strange behavior is because of some preference in my application set-ups. Does white space really matter in XHTML?
PC IE Screenshot
HTML/CSS Code (click to enlarge and notice the two ways the UL list was written)
Does anyone see an error in my css?
Posts
1 comment:
It's clear from your code that only the LI tags should have a yellow background, and there is no whitespace within your LI tags.
So congratulations - you've found a new IE bug!
One way around this problem will be to make all LI tags display: block; float: left; That way, you can stack them up as we do with all our other floating elements.
As a side-note, I have noticed some sites making the A elements in a horizontal UL list have a display: block; so that they can adjust the size of the A elements so that they exactly match the size of the LI elements which contain them. That way, when you click anywhere on the LI, you are sure to be clicking on the A also, and thereby linking to the next page.
Post a Comment