Welcome to WebmasterWorld Guest from 3.80.6.254

Forum Moderators: not2easy

Message Too Old, No Replies

ul and li vertical spacing cross-browser

     
8:38 pm on Oct 1, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 21, 2006
posts:20
votes: 0


I've been teaching myself CSS for about three weeks, virtually full-time. When I started I didn't know CSS or HTML.
I am a professional graphic designer, but web design 'til now has been just a hobby with FrontPage, which I have now dumped
permanently in favor of learning to do it right.

So, I have this tiny list of two links that needs to be precisely placed on a page that is designed to look like a company letterhead.
I am struggling with differences between IE and Mozilla, etc., (again). Maybe someone here here can see what I'm doing
wrong or, if my work is okay, maybe someone knows a trick so the browsers will render this the same.

The problems are these: Mozilla and IE render different vertical spacing between the li items unless I set a line-height; if I set
a line height, I fix my original problem but I get different spacing of the ul inside the div. The combination makes it impossible
(for me) to get it precise. I've tried using margin and padding and combinations to fix it, with varying degrees of success.

The rest of the site is finished--looks nice and validates--but I'm pulling my hair out over this nitpicking detail that I can't fix. The code below gives the best result I can get. I guess it's acceptable, but I don't like it. Right now, the line-spacing is attractive, but Mozilla is rendering the bottom link about 5px lower than IE. Now that I've explained all that, I'm not sure it's clear at all, but I'd appreciate your replies.

#subnav {
float: right;
position: relative;
top: 45px;
left: -80px;
}

#subnav ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
position: relative; /*For some reason, this prevents the background images from disappearing in IE.*/
font-weight: bold;
line-height: 140%;
}

#subnav li {
}

#subnav a {
background: transparent url(images/arrow_right.gif);
background-position-y: 3px;
background-repeat: no-repeat;
padding-left: 8px;
color: #779e83;
}

#subnav a:hover {
background: transparent url(images/arrow_right_70.gif);
background-position-y: 3px;
background-repeat: no-repeat;
padding-left: 8px;
color: #007000
}

#subnav a:visited {
color: #779e83;
}

===========================

<div id ="subnav">
<ul>
<li id="sub1"><a href="about.htm">About Us</a></li>
<li id="sub2"><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

8:42 pm on Oct 1, 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


Two thing to assist in the process:

1) Always zero out both margin and padding on your ul's and li's
2) Remove the padding between the elements. Thus, instead of:

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

do this:

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

9:35 pm on Oct 1, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 21, 2006
posts:20
votes: 0


Well, that was easy. Thanks! Spacing and positioning are perfect now.

One thing, I don't understand how your HTML is different from my original.

Also, I uploaded to the web and, in IE only, the hover effect switches my background image, but doesn't change the text color. Plus, there is an annoying flicker in IE.

The revised code:

#subnav {
float: right;
position: relative;
top: 55px;
left: -80px;
}

#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative; /*For some reason, this prevents the disappearing background images in IE*/
font-weight: bold;
line-height: 140%;
}

#subnav li {
margin: 0;
padding: 0;
}

#subnav a {
background: #fff url(images/arrow_right.gif) 0 3px no-repeat;
padding-left: 8px;
color: #779e83;
}

#subnav a:hover {
background: #fff url(images/arrow_right_70.gif) 0 3px no-repeat;
padding-left: 8px;
color: #007000;
}

#subnav a:visited {
color: #779e83;
}

==================================

<div id ="subnav">
<ul><li id="sub1"><a href="about.htm">About Us</a></li><li id="sub2"><a href="contact.htm">Contact Us</a></li></ul>
</div>