Forum Moderators: not2easy
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>
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>
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>
