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

Announcement

Collapse
No announcement yet.

Problem with LI height and vertical-align (Firefox)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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

  • #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 -
    Code:
    <!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>
    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

    Comment

    Working...
    X