homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<ul>whitespace problem in ie</ul>
slimrob




msg:3201849
 4:23 pm on Dec 28, 2006 (gmt 0)

Hi all,
just joined the forum. Anyway, i've been taking care of mostly all website updates on the intranet site that belongs to the company I work for. All the styles and everything have been set up for me, so all I've been doing for the past 5-6 months is copying and pasting chunks of code. I've learned alot that way, but now I'm ready to learn more. I'm trying to build my first website. It's about my cats, hence the references to poop in the code. The navigation bar is a list. I have an image in one list class, and the links in another class that floats left against the image. There is too much space in IE between the list items. I tried messing around with the "holly hack," but I couldn't get that to work. Did some searches for ie whitespace bug, but no luck there either. Any help would be very appreciated. Here is the code:

CSS:

body
{
margin:0;
padding:0;
}
#header
{
margin:0;
padding:0px;
padding-top:5px;
width:700px;
}

#homecontent
{
margin:0;
padding:0;
width:780px;
font:Arial, Helvetica, sans-serif;
}
#firstcolumn
{
padding:0;
margin:0;
float:left;
width:400px;
}

#secondcolumn
{
margin:0;
padding:0;
padding-top:10px;
float:left;
width:360px;
}

ul.poopbar
{
margin:0;
padding:10px;
width:265px;
display:block;
list-style:none;
list-style-type:none;

}

ul.poopbar li.first
{
margin:0;
padding:0;
padding-top:10px;
float:left;
clear:both;
display:block;
list-style:none;
list-style-type:none;
width:60px;
}

ul.poopbar li.second
{
margin:0;
padding-left:0px;
padding-top:15px;
border:0;
display:block;
float:right;
list-style:none;
list-style-type:none;
width:200px;
}

a.navbar, a.navbar:visited
{
color:#96580a;
text-decoration:none;
}

a.navbar:hover
{
color:#96580a;
text-decoration:underline;
}

Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Willis and Wiley</title>
<link rel="stylesheet" type="text/css" href="css/williswileystyles.css" />
</head>

<body>
<div id="header">
<img src="images/williswileylogo2.gif" width="501" height="110" alt="Willis and Wiley Logo"><hr /></div>
<div id="homecontent">
<div id="firstcolumn">

<ul class="poopbar">

<li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">About Willis and Wiley</a></li></ul>

<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">Willis's Journal</a></li></ul>

<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">Wiley's Journal</a></li></ul>

<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">The Humans</a></li></ul>

</div>
<div id="secondcolumn">main content will go here

</div>
</div>
</body>
</html>

 

slimrob




msg:3201990
 6:03 pm on Dec 28, 2006 (gmt 0)

to clarify:

this is how it looks in FF:

*Link1
*Link2
*Link3


This is how it looks in IE:

*Link1

*Link2

*Link3

DrDoc




msg:3202044
 6:51 pm on Dec 28, 2006 (gmt 0)

Welcome to WebmasterWorld!

Remove the physical whitespace between your list items. In other words, instead of:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

Do this:

<ul><li>foo</li><li>bar</li></ul>

cmarshall




msg:3202070
 7:19 pm on Dec 28, 2006 (gmt 0)

Also, if you will be using lists, you should override ALL the parameters, such as padding, list-style-type, margin, text-indent, line-height, etc.

The whole deal with lists is that we are supposed to let the browser use their own discretion when rendering them.

And, yes, IE takes whitespace and line breaks way too seriously It's driven me absolutely batty in the past.

pageoneresults




msg:3202081
 7:30 pm on Dec 28, 2006 (gmt 0)

Actually, try removing the
display:block from your CSS. Lists are block elements by default. I believe adding that display:block messes with IE and white space which forces you to put all the <li>'s on one line.
Span




msg:3202100
 7:49 pm on Dec 28, 2006 (gmt 0)

>> adding that display:block messes with IE and white space which forces you to put all the <li>'s on one line.

Actually IE6 doesn't see the list-item closing tags at all. It sees a lot of whitespace and renders that - until, on the next line a new list item starts.

slimrob




msg:3202108
 7:57 pm on Dec 28, 2006 (gmt 0)

Thanks for all the replies guys. I should of listed all the things I've tried in my previous post. I have already tried putting the list code on one line. It did take some of the white space out, but only very little. I tried removing display:block, but that didn't help. I haven't tried overriding all parameters though. I will try that and experiment with combinations of the other suggestions. If there are any other suggestions, please let me know. I will let you guys know how it goes. Thanks again!

slimrob




msg:3202161
 8:52 pm on Dec 28, 2006 (gmt 0)

ok, I've made a little progress. I put the list code on one line again. I overrode all parameters (or as many as I could think of...still very new to this). Removed display:block again....nothing really worked. I added height:40px to ul.poopbar. This seemed to do the trick. The only thing is that it made Firefox display as it does in IE, with more space. But atleast they both have space now and look the same. Anytime I try to give the height a value of less than 40px, firefox responds, but IE maintains the space. Can anyone tell me where I would put the "holly hack" in this code to get it to work? Maybe that would work....Thanks.

londrum




msg:3202176
 9:15 pm on Dec 28, 2006 (gmt 0)

i think this will get you closer. close up all of the list items, like you have already done, and then change the padding statement in the ul.poopbar bit,

ul.poopbar
{
margin:0;
padding:10px; [change this to padding:10px 10px 0; instead]
width:265px;
display:block;
list-style:none;
list-style-type:none;
}

as you probably already know, padding:10px means that you have 10px of top padding, 10px of side padding and 10px of bottom padding.
when two paddings butt onto one another, firefox displays it correctly by merging the two paddings together (to make just one lot of 10px padding) but IE 6.0 honours both amounts, making 10px + 10px = 20px.
at least, that's what i think is happening. but i'm probably talking rubbish!

slimrob




msg:3202187
 9:30 pm on Dec 28, 2006 (gmt 0)

Thanks londrum! That helped alot actually. That's exactly what I needed. I'm still not sure why it won't let me go lower than 40px on the height though. The image in the first list is only 29px, so I figured I could lower it to 30 or 31px, but it didn't work. No big deal though, the spacing is just right now, no need to omit anymore space. Thanks guys, for all your suggestions.

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