Forum Moderators: not2easy
Pasted below is the code (css and html) I'm using for some navigation links at the top of a page. In most browsers it works fine, but for some reason in IE the last list item (sitemap) is disjointed from the inline style.
Instead of being tagged on at the end of the line (far right) it shows up on a separate line below the other list items. Is anyone familiar with this problem? (I have tested this in firefox (mac,win,linux), chrome (win), safari (mac),
opera (win, mac), and these all render fine. The problem seems to be in IE only. Any help would be appreciated.
<div class="nav1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Mailing List</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
/* nav1 */
.nav1 {width:350px; position:absolute; margin:5px 0 0 595px;}
.nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}
.nav1 li {display:inline; list-style:none;}
.nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color: #ffcc00; text-decoration:none; font-size:100%;}
.nav1 a:hover {text-decoration:none; color: #ffcc00;}
ul, li {
margin: 0; padding: 0;
}
Opera is fine also, but you'll now need to deal with rendering variance in FF with sets .nav1 flush right.
.nav1 {
width: 350px; position: absolute; /*margin: 5px 0 0 595px*/; top: 5px; right: 5%; right: 5%; border: .1em solid red;
}
The border is just added to help see what is going on.
The rendering of the code provided is consistent, but can't know how it will affect whatever else is on the page.
If margin and padding defaults are playing a role in this, do you think it could have anything to do with the defaults I'm using in the body element?
body {
margin: 0;
padding: 0;
background: #EDBE3C;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
}
ul, li {
margin: 0; padding: 0;
}
If margin and padding defaults are playing a role in this, do you think it could have anything to do with the defaults I'm using in the body element?
No.
.....................
I stand corrected on the other hack:
Your markup is fine. I run vertical tabs in FF, so the container wasn't lining up because I didn't pull the slider bar over and was seeing about a 60px difference in position.
<!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></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
ul, li {
margin: 0; padding: 0;
}
.nav1 {
width: 350px; position: absolute; /*margin: 5px 0 0 595px*/; top: 5px; right: 5%; right: 5%; border: .1em solid red;
}
.nav1 ul {
float: right; padding: 0 15px 0 0; font-weight: bold;
}
.nav1 li {
display: inline; list-style-type: none;
}
.nav1 li a {
display: block; float: left; padding: 2px 5px 2px 5px; color: #fc0; text-decoration:none; font-size:100%;
}
.nav1 a:hover {
text-decoration:none; color: #fc0;
}
</style>
</head>
<body>
<div class="nav1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Mailing List</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<!--##########
Pasted below is the code (css and html) I'm using for some navigation links at the top of a page. In most browsers it works fine, but for some reason in IE the last list item (sitemap) is disjointed from the inline style.Instead of being tagged on at the end of the line (far right) it shows up on a separate line below the other list items. Is anyone familiar with this problem? (I have tested this in firefox (mac,win,linux), chrome (win), safari (mac),
opera (win, mac), and these all render fine. The problem seems to be in IE only. Any help would be appreciated.
-->
</body>
</html>
ul, li {
margin: 0; padding: 0;
}
If margin and padding defaults are playing a role in this, do you think it could have anything to do with the defaults I'm using in the body element?
No.
.....................
I stand corrected on the other hack:
Your markup is fine. I run vertical tabs in FF, so the container wasn't lining up because I didn't pull the slider bar over and was seeing about a 60px difference in position.
<!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></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
ul, li {
margin: 0; padding: 0;
}
.nav1 {
width: 350px; position: absolute; /*margin: 5px 0 0 595px*/; top: 5px; right: 5%; right: 5%; border: .1em solid red;
}
.nav1 ul {
float: right; padding: 0 15px 0 0; font-weight: bold;
}
.nav1 li {
display: inline; list-style-type: none;
}
.nav1 li a {
display: block; float: left; padding: 2px 5px 2px 5px; color: #fc0; text-decoration:none; font-size:100%;
}
.nav1 a:hover {
text-decoration:none; color: #fc0;
}
</style>
</head>
<body>
<div class="nav1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Mailing List</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<!--##########
Pasted below is the code (css and html) I'm using for some navigation links at the top of a page. In most browsers it works fine, but for some reason in IE the last list item (sitemap) is disjointed from the inline style.Instead of being tagged on at the end of the line (far right) it shows up on a separate line below the other list items. Is anyone familiar with this problem? (I have tested this in firefox (mac,win,linux), chrome (win), safari (mac),
opera (win, mac), and these all render fine. The problem seems to be in IE only. Any help would be appreciated.
-->
</body>
</html>
