homepage Welcome to WebmasterWorld Guest from 54.226.10.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
extra space in list (IE 6 and IE 7)
trick

5+ Year Member



 
Msg#: 3676153 posted 6:20 pm on Jun 16, 2008 (gmt 0)

I know this must have a solution, but I can't quite isolate it. I have an unordered list that I'm styling for a navigation element, but IE keeps adding space to it. Even more frustrating is that IE6 and IE7 bug out in slightly different ways. If I could just get it close enough to pass I'd be happy! Between each item in the list I also have a "between" li, which is just there to split up the links.

Here's my CSS code (the background colors are for debugging):

* html ul li {height:1em; vertical-align:bottom;}
#sidenav {width:148px; margin-top:5px; margin-bottom:0px; padding-bottom:0px; padding-top:7px; padding-left:13px}
#sidenav ul li {font: 10px/18px Verdana, Arial, Helvetica, sans-serif; color:#fff; width:133px; text-indent:8px; background-color:#F16921; margin:0}
#sidenav ul li a {display: block; color:#3c3c3c; background-color:#dbdbdb;}
#sidenav ul li a:hover {background-color:#8c8c8c; text-decoration:none}
#sidenav ul .between {background-color:green; height:3px; line-height:0px}

and here is the HTML;

<div id="sidenav">
<ul>
<li>Introduction</li>
<li class="between"></li>
<li><a href="#">Management</a></li>
<li class="between"></li>
<li><a href="#">Recent News</a></li>
<li class="between"></li>
<li><a href="#">Press</a></li>
<li class="between"></li>
<li><a href="#">Support</a></li>
<li class="between"></li>
<li><a href="#">Newsletter Signup</a></li>
<li class="between"></li>
<li><a href="#">Careers</a></li>
<li class="between"></li>
<li><a href="#">Partners</a></li>
<li class="between"></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

I've tried every solution I can find, but nothing seems to shrink the gaps. Help?!?

Thanks!

 

ASiebersma

5+ Year Member



 
Msg#: 3676153 posted 8:30 pm on Jun 16, 2008 (gmt 0)

This is a fairly well documented bug in IE. The long and short of it is that IE erroneously displays any extra whitespace between the tags of your list elements.

Placing your list entirely on a single line will fix. I believe that placing your linebreaks directly in front of the closing tag of each li tag will do it as well.


<ul><li>Introduction</li
><li class="between"></li
><li><a href="#">Management</a></li
><li class="between"></li
><li><a href="#">Recent News</a></li
><li class="between"></li
></ul>

trick

5+ Year Member



 
Msg#: 3676153 posted 9:54 pm on Jun 16, 2008 (gmt 0)

I did try putting it all on one line, with no effect. : (

Must be something else...

dave_f

10+ Year Member



 
Msg#: 3676153 posted 1:00 pm on Jun 17, 2008 (gmt 0)

In your .between class, make the font-size 1px like this.

#sidenav ul .between {background-color:green; height:3px; line-height:0px;font-size:1px}

This will solve the problem in IE6. Have not been able to test it on IE7.

As the font size was previously defined as 10px/18px, the .between li element was (wrongly) expanding to accomodate this font-size for the white space.

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3676153 posted 1:14 pm on Jun 17, 2008 (gmt 0)

Is it possible that you have a padding issue somewhere? Maybe add
padding:0; to the ul li? There may be something else cascading down that we cannot see from another rule. And then again, this could be one of those oddball IE bugs?
trick

5+ Year Member



 
Msg#: 3676153 posted 1:55 pm on Jun 17, 2008 (gmt 0)

YES! Thank you dave. Worked like a charm for both IE6 & IE7.

Thank you!

: D

npwsol

5+ Year Member



 
Msg#: 3676153 posted 5:02 pm on Jun 17, 2008 (gmt 0)

Don't use a "between" li to seperate your list! That's what margins and padding are for. It's just needless markup :\

trick

5+ Year Member



 
Msg#: 3676153 posted 8:24 pm on Jun 17, 2008 (gmt 0)

I did it that way so that I don't have to add an "active" class for every new page. See the li has an orange background, and the linked li has grey. so if I padded the li there would be weird orange lines under the grey, linked lis. And if I padded the link lis the spacing would be inconsistent between pages. This way I can remove a link and it will automatically have the active orange background. Just makes it a bit easier to roll out the pages.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3676153 posted 9:04 pm on Jun 17, 2008 (gmt 0)

I did it that way so that I don't have to add an "active" class for every new page

well apart from the fact that doesn't really make sense, CSS can do this beautifully without scripting an "active" class

I'm thinking (feel free to shout!) you are not really using CSS for separation of design, you're imposing your design ideas on your HTML markup?

extra <li> items will be read by screen readers, focused by tab keys, and just might be picked up weirdly by RSS feeds!

sorry, but while I know it's fine in general just to get things working, make sure that the "fix" is the right one for you and your site, there are other ways to workaround this IE weakness, but it will depend on your requirements

trick

5+ Year Member



 
Msg#: 3676153 posted 11:48 pm on Jun 17, 2008 (gmt 0)

Suzy, you are correct that I'm not separating design / HTML. I'm doing what will make implementing the site easiest. This way the active navigation element won't require me adding any markup to it. If there were a simpler way I would use it in a heartbeat.

You say I don't need to do it this way, but I only see 2 choices: my way or having an "active" class that would have the same style (padding especially) as the "li a" but with orange bg. Let me explain what is happening now a bit better:

the ul (and the page itself) has a white background
the "li"s have an orange background
the "li a"s have a grey background
there is a 3 px space between each li which is also white

-- if you delete the "between" lis and add padding to the li, you will have orange peek through
-- if you intead add padding to the "li a" you will get no peek though, but the li with an active state (no link, no a) will not be padded to match, so the list will be spaced inconsistently as you go to different pages (solution: add an active class with padding and orange bg)

does that make sense? if there's something I'm missing let me know!

: )

dave_f

10+ Year Member



 
Msg#: 3676153 posted 7:28 am on Jun 18, 2008 (gmt 0)

Trick, The effect you are looking for can easily be achieved much more economically by:

1. Removing the the .between li elements.
2. Adding a background-color to the ul element instead of the .between li's (in this case green)
3. Adding a 3px margin top and bottom to the remaining li elements.

You may have to add special classes for the first and list li elements to remove the top or bottom margin.

trick

5+ Year Member



 
Msg#: 3676153 posted 1:28 pm on Jun 18, 2008 (gmt 0)

Ah, you are correct again Dave. I think I tried margin-bottom alone and that didn't work, but didn't think it all the way through.

Thanks!

and here's the new CSS:

#sidenav {width:148px; margin-top:5px; margin-bottom:0px; padding-bottom:0px; padding-top:7px; padding-left:13px}
#sidenav ul li {display: block; font: 10px/18px Verdana, Arial, Helvetica, sans-serif; color:#fff; width:133px; text-indent:8px; background-color:#F16921; margin-top:3px; margin-bottom:3px}
#sidenav ul li a {display: block; color:#3c3c3c; background-color:#dbdbdb;}
#sidenav ul li a:hover {background-color:#8c8c8c; text-decoration:none}

I was even able to delete this:
* html ul li {height:1em; vertical-align:bottom;}

Thanks again!

^_^b

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved