PDA

View Full Version : How to get lineheight of links the same in FireFox as in IE?



kippie
Nov 14th, 2006, 01:41 PM
In the html http://www.inspiration-company.nl/test40.html I have placed 4 links. In IE there is a normal small vertical distance between the lines of these links. In Firefox however there is more distance between the lines. Is there a way to get the distance in FireFox the same as in IE?

rmedek
Nov 14th, 2006, 03:23 PM
Since you're using line-breaks, you'd need to specify a consistent line-height, most likely in pixels if you're going after "pixel-perfect" design:


line-height: 15px;

…but a better way would be to mark it up as a list, which will give all the links their own block-level container:


<div id="navleft">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</div>

#navleft li {
list-style: none;
height: 15px;
}

kippie
Nov 14th, 2006, 09:20 PM
Hi Rmedek,

Thanks for your reaction. I added line-height as you can see in http://www.inspiration-company.nl/test41.html, but there is still a rather big difference in FireFox compared to IE. In Firefox the distance is much wider. I need to make a long list of links so I will get in trouble. Isn't there a way to solve this problem?

You suggested to use ul and li, but I would not like to use bullets.

Hope you can help me out.

rmedek
Nov 14th, 2006, 09:22 PM
That's what the "list-style: none" is for.

kippie
Nov 14th, 2006, 09:44 PM
Hi Rmedek,

Could you please explain a bit more, because I don't understand what you mean. I did what you said (see http://www.inspiration-company.nl/test42.html), but I still get bullets. What do I do wrong?

rmedek
Nov 14th, 2006, 09:50 PM
I mean, the code I provided above, when added to the stylesheet, removes the bullets from your list items:


#navleft li {
list-style: none;
}

It's not working on your page because you used "#navLeft" rather than "#navleft" (or vice-versa). CSS is case-sensitive.

kippie
Nov 15th, 2006, 06:00 AM
Oh Yes. The bullets are gone! (see http://www.inspiration-company.nl/test42a.html ). But now the "height" of all the links in Firefox is 20 - 30% shorter than in IE? Could it be made more equal?