Web Analytics Made Easy -
StatCounter Problem with LI height and vertical-align (Firefox) - CodingForum


No announcement yet.

Problem with LI height and vertical-align (Firefox)

  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with LI height and vertical-align (Firefox)


    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?


  • #2
    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"
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<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;
    	<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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad