Basically Im using an unordered list navigation and am having trouble with how IE displays it. In the pics below you can see the green nav boxes and a brass microscope img adjacent to it. IE places an extra space beween the the last nav box and the img. (I removed the margins between the links to make the gap easier to see. The final version will have margins of 10px or so.)
FF 1.0.3 render (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/FF_ver103.jpg">http://webpages.charter.net/iconoclast/ ... ver103.jpg</a><!-- m -->)
IE 6 render (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/IE_ver6.jpg">http://webpages.charter.net/iconoclast/ ... E_ver6.jpg</a><!-- m -->)
Eventually that img will be relatively positioned under the "active" link ("O") and with IE throwing that extra gap in there it screws up teh relative positioning.
Heres the page (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/css_prob_ex1.htm">http://webpages.charter.net/iconoclast/ ... ob_ex1.htm</a><!-- m -->) and you can see that in FF it doesnt line up right under the active link (becasue my html editor uses IE). I was under the assumption that if I did teh page with a strict doctype that IE would render everything right.
Of course, all this can be avoided if you can think of a better way of positioning the microscopr img under the active line without relative positioning. Im sure there is one.
Thx
PS: Also, does anyone know why both FF and IE both display a 2 px gap in between the links even when you set the list links margins,padding, and borders to 0px ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body { text-align: center; }
#navcontainer {
margin-top: 31px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
height: 150px;
text-align: left;
border: 0px solid #666;
background-image: url(sitefiles/navpic04.jpg);
background-repeat: no-repeat;
background-position: 166px 27px;
}
#navcontainer ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
#navcontainer ul li {
float: left;
}
#navcontainer ul li a {
text-decoration: none;
background: url(sitefiles/nav_over.jpg) no-repeat top left;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #000000;
float: left;
height: 45px;
width: 47px;
margin-left: 10px;
text-align: center;
padding-top: 9px;
border: 0px solid #666;
}
#navlist a:hover {
background: url(sitefiles/nav_down.jpg) no-repeat left top;
color: #000000;
}
#active a:link, #active a:visited, #active a:hover {
background-image: url(sitefiles/blank.gif);
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight:700;
text-align: center;
padding-bottom: 10px;
}
#overviewpos {
display: block;
position: relative;
top: 67px;
left: -300px;
}
</style>
</head>
<body topMargin=0 marginheight=0 marginwidth=0 background="sitefiles/navbarbg01.jpg">
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">H</a></li>
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">O</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">R</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">P</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">G</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">L</a></li>
</ul>
<img id="overviewpos" alt="nav_overview01 (1K)" src=http://www.webdeveloper.com/forum/archive/index.php/"sitefiles/nav_overview01.gif" height="89" width="89" />
</div>
</body>
</html>You appear to have changed the layout. Are there still problems?
FF 1.0.3 render (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/FF_ver103.jpg">http://webpages.charter.net/iconoclast/ ... ver103.jpg</a><!-- m -->)
IE 6 render (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/IE_ver6.jpg">http://webpages.charter.net/iconoclast/ ... E_ver6.jpg</a><!-- m -->)
Eventually that img will be relatively positioned under the "active" link ("O") and with IE throwing that extra gap in there it screws up teh relative positioning.
Heres the page (<!-- m --><a class="postlink" href="http://webpages.charter.net/iconoclast/strict/css_prob_ex1.htm">http://webpages.charter.net/iconoclast/ ... ob_ex1.htm</a><!-- m -->) and you can see that in FF it doesnt line up right under the active link (becasue my html editor uses IE). I was under the assumption that if I did teh page with a strict doctype that IE would render everything right.
Of course, all this can be avoided if you can think of a better way of positioning the microscopr img under the active line without relative positioning. Im sure there is one.
Thx
PS: Also, does anyone know why both FF and IE both display a 2 px gap in between the links even when you set the list links margins,padding, and borders to 0px ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body { text-align: center; }
#navcontainer {
margin-top: 31px;
margin-left: auto;
margin-right: auto;
padding: 0;
width: 720px;
height: 150px;
text-align: left;
border: 0px solid #666;
background-image: url(sitefiles/navpic04.jpg);
background-repeat: no-repeat;
background-position: 166px 27px;
}
#navcontainer ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}
#navcontainer ul li {
float: left;
}
#navcontainer ul li a {
text-decoration: none;
background: url(sitefiles/nav_over.jpg) no-repeat top left;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #000000;
float: left;
height: 45px;
width: 47px;
margin-left: 10px;
text-align: center;
padding-top: 9px;
border: 0px solid #666;
}
#navlist a:hover {
background: url(sitefiles/nav_down.jpg) no-repeat left top;
color: #000000;
}
#active a:link, #active a:visited, #active a:hover {
background-image: url(sitefiles/blank.gif);
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight:700;
text-align: center;
padding-bottom: 10px;
}
#overviewpos {
display: block;
position: relative;
top: 67px;
left: -300px;
}
</style>
</head>
<body topMargin=0 marginheight=0 marginwidth=0 background="sitefiles/navbarbg01.jpg">
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">H</a></li>
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">O</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">R</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">P</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">G</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">L</a></li>
</ul>
<img id="overviewpos" alt="nav_overview01 (1K)" src=http://www.webdeveloper.com/forum/archive/index.php/"sitefiles/nav_overview01.gif" height="89" width="89" />
</div>
</body>
</html>You appear to have changed the layout. Are there still problems?