PDA

Click to See Complete Forum and Search --> : spacing is different in ie than firefox

keef
12-04-2005, 10:08 AM
I have made some styles that change a bulleted list of links in to what looks like buttons
<div class="nav">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="links.htm">links</a></li>
<li><a href="pictures.htm">pictures</a></li>
<li><a href="films.htm">films</a></li>
<li><a href="bands.htm">bands</a></li>
<li><a href="nights.htm">nights out</a></li>
<li><a href="blog.htm">blog </a></li>
</ul>
</div>

.nav a:link {
color: #FFFFFF;
text-decoration: none;
background-color: #000066;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.nav a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #000066;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.nav a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #000033;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.nav {
width: 150px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.nav li {
margin: 0px;
padding: 0px;
text-align: center;
}

.nav a {
color: #FFFFFF;
background-color: #000066;
display: block;
text-decoration: none;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
text-align: center;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}

The page looks exactly as i would expect in firefox, but in IE the spacing between the links is much larger than it should be

any help would be appreciated

Thank you
opus01
12-04-2005, 12:37 PM
add height: 1em; to .nav a?
ray326
12-04-2005, 04:02 PM
Of course we have to assume you have a valid doctype that takes IE out of quirks mode.
ShrineDesigns
12-04-2005, 04:24 PM
the default line-height in IE (?, 1.4em) is different than that of mozilla (?, 1.2em)
CSS* {
line-height: 1.2em;
}
/* or */
.nav ul {
line-height: 1.2em;
}
keef
12-08-2005, 01:01 PM
I've tried changing the line height but it doesn't seem to have made any difference

The DOCTYPE i've got is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But i've also tried:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Thanks
LJK
12-08-2005, 03:35 PM
Hi -
This seems to work okay:

<html>
<title>list</title>
<head>
<style type="text/css">
div.nav{
width:150px; margin:0 auto;}
.nav ul{
margin:0; padding:0;}
.nav li {
list-style-type: none; text-align: center;}
.nav ul a{
text-decoration:none; margin:2px auto; padding:0 0 3px 0;
display:block; color:white; width:100%; height:20px;}
.nav a:link, .nav a:visited{
background:#000066 none;}
.nav a:hover{
background:#000033 none;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="links.htm">links</a></li>
<li><a href="pictures.htm">pictures</a></li>
<li><a href="films.htm">films</a></li>
<li><a href="bands.htm">bands</a></li>
<li><a href="nights.htm">nights out</a></li>
<li><a href="blog.htm">blog </a></li>
</ul>
</div>
</body>
</html>


Basically just gave a height to the links...
be sure to add a title="" attribute to them, as well.

El
ray326
12-08-2005, 05:07 PM
I'd recommend you go with HTML 4.01 Strict unless otherwise needed.
keef
12-09-2005, 07:40 AM
The line height on the links seems to have fixed it

Thanks for all your help
toicontien
12-09-2005, 01:24 PM
Your problem had more to do with how IE-Win treats ordered and unordered lists than it does with your CSS: Getting rid of Internet Explorer gaps inside lists (http://www.webdeveloper.com/forum/showthread.php?p=466092#post466092)