...

View Full Version : Li css / IE firefox question



quokka
10-04-2006, 01:03 PM
Hi,
Quite new to css...
hopefully someone can help me with yhis one ;-)

I have a li list in my page.
Firefox displays how I want it to be
IE has margins, I can't figure out how to remove those...
Thanks in advance!
Quokka

HERE IT IS:

The difference:
http://www.quokka.nl/bewaren/css.jpg

Code:
<ul id="sitemap">
<li><a href="front_content.php?idcat=2&amp;lang=1&amp;client=1" title="Ebene 1: Producten">Producten</a>
<ul>
<li><a href="front_content.php?idcat=5&amp;lang=1&amp;client=1" title="Ebene 2: Content Management">Content Management</a></li>
</ul>
</li>
<li><a href="front_content.php?idcat=3&amp;lang=1&amp;client=1" title="Ebene 1: Diensten">Diensten</a></li>
<li><a href="front_content.php?idcat=4&amp;lang=1&amp;client=1" title="Ebene 1: Contact">Contact</a></li>
</ul>

CSS:
ul#sitemap
/* Einstellungen für die Sitemap*/
{
color: #000000;
float: left;
list-style-type: none;
width: 220px;


}
ul#sitemap ul {
list-style-type: none;

}
ul#sitemap li {
clear: both;

}
ul#sitemap li a {
display: block;
color: #000000;
background-color: #9FB9FF;
padding: 3px 0px 3px 8px;
text-decoration: none;
font-weight: bold;
}
ul#sitemap a:hover {
color: #000000;
background-color: #9FB9FF;

}

ul#sitemap ul ul{
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;

}

ul#sitemap li li{
clear: both;

}
ul#sitemap li li a {
display: block;
color: #000000;
background-color: #ffffff;
text-decoration: none;
font-weight: bold;
}
ul#sitemap li li a:hover {
color: #000000;
background-color: #ffffff;

}








ul, ol, dl, li, dt, dd {
padding: 0;
margin-top: 0.3em;
margin-bottom: 0.3em;
border: 0;
}

kansel
10-04-2006, 04:59 PM
This is something I've been struggling with on several projects. I finally found two different solutions. Both work, you can choose.

Solution #1: put whitespace between the text of the link and the closing anchor tag (</a>)
<li><a href="..." title="...">Producten </a>
<ul>
<li><a href="..." title="...">Content Management </a></li>
</ul>
</li>
<li><a href="..." title="...">Diensten </a></li>
<li><a href="f..." title="...">Contact </a></li>This works without any CSS changes. IE is really funny about whitespace.

Solution #2: put padding-bottom on the LI - just 1px will do the trick.
ul#sitemap li {
clear: both;
padding-bottom: 1px;
}This is the simpler solution but it will alter the spacing of your menu.

fixed padding-bottom in #2 - it should be 1px



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum