...

View Full Version : Problem with LI height and vertical-align (Firefox)



kuvik
04-10-2009, 09:20 PM
Hello,

I have a problem with aligning image and text in <LI> element.

Testcase: http://gamca.informacie.sk/betatest/test/index.html

I set 20px line-height, but in Firefox 3 odd <LI> elements have 22px height and even <LI> elements have 21px height.

What am I doing wrong?

Thanks

Excavator
04-10-2009, 09:40 PM
Hello kuvik,
I've always had better luck replacing bullets by putting the image as a background of the li.
Like this - http://nopeople.com/CSS/li_image/index.html

Could try this too -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>tests</title>
<style type="text/css">
html, body {
font-size: 12px;
font-family: Verdana, Helvetica, sans-serif;
color: #222;
line-height: 20px;
}

* {
padding: 0px;
margin: 0px;
}

.sidebar-box {
}

ul.sidebar-box {
list-style-type: none;
width: 200px;
}

.sidebar-box li {
background-color: #DDDDDD;
margin-bottom: 1px;
}

.sidebar-box li * {
vertical-align: middle;
margin-right: 6px;
}

</style>
</head>

<body>
<ul class="sidebar-box">

<li><img src="folder.png" alt="" /><a href="">Link 1</a></li>
<li><img src="folder.png" alt="" /><a href="">Link 2</a></li>
<li><img src="folder.png" alt="" /><a href="">Link 3</a></li>
<li><img src="folder.png" alt="" /><a href="">Link 4</a></li>
<li><img src="folder.png" alt="" /><a href="">Link 5</a></li>
<li><img src="folder.png" alt="" /><a href="">Link 6</a></li>

</ul>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum