« Welcome to my world :)
Baking cakes in PHP »
12 09 2008

Unnecessary margins in list’s elements in Internet Explorer

Posted by: raph in Webmastering, tags:

Let’s assume we want to create a menu using code like that:

<div id="menu">
<ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
<li><a>link3</a></li>
</ul>
</div>

and we will use CSS like that:


#menu li a{

border-color: #AEAEAE #AEAEAE #AEAEAE #8CCE20;

border-width: 0 1px 1px 0;

border-style: solid;

color: #1F2024;

display: block;

font-family: Verdana;

font-size: .775em;

height: 14px;

padding: 10px 0 8px 13px;

text-decoration: none;

}

Internet Explorer will add unnecessary space beetween each list’s element, so i.e. frame borders could be discontinued.  The solution is to add this line:

vertical-align: bottom;

to “#menu li a”.

Source: http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php

This entry was posted on Friday, September 12th, 2008 at %I:%M %p and is filed under Webmastering.You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “Unnecessary margins in list’s elements in Internet Explorer”
  1. Grzesiu says: March 5 th, 2009 at %I:%M %p

    There is a easier way to achieve the same result.
    Put
    .........
    everything in one line. Now Firefox, IE, Opera and other browsers render page in the same way :)