Welcome to WebmasterWorld Guest from 54.156.36.82

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS

Forum Moderators: not2easy

Message Too Old, No Replies

<ul>whitespace problem in ie</ul>

     

slimrob

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

New User

10+ Year Member

joined:Dec 28, 2006
posts:11
votes: 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

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

New User

10+ Year Member

joined:Dec 28, 2006
posts:11
votes: 0


to clarify:

this is how it looks in FF:

*Link1
*Link2
*Link3


This is how it looks in IE:

*Link1

*Link2

*Link3

DrDoc

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 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

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

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12172
votes: 61


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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 30, 2004
posts:712
votes: 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

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

New User

10+ Year Member

joined:Dec 28, 2006
posts:11
votes: 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

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

New User

10+ Year Member

joined:Dec 28, 2006
posts:11
votes: 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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
posts:2619
votes: 76


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

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

New User

10+ Year Member

joined:Dec 28, 2006
posts:11
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS