For some reason the width of my border differs in IE and FireFox. Here's a image of what i'm talking about: <!-- m --><a class="postlink" href="http://img62.imageshack.us/img62/5646/temp7hb.jpg">http://img62.imageshack.us/img62/5646/temp7hb.jpg</a><!-- m -->
Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Entity Games</title>
</head>
<style type="text/css">
<!--
body{background-color: #292929; text-align: center; }
.navheader {
color: #292929;
background-color: orange;
font-weight: bold;
letter-spacing: 3px;
width: 120px;
float: left;
padding: 0;
margin: 0;
}
ul.navmenu {
list-style: none;
font-family: Verdana;
color: orange;
font-size: 10px;
padding: 0;
margin: 0;
float: left;
border-style: solid;
border-width: 2px;
border-color: orange;
}
ul.navmenu li a {
text-decoration: none;
display: block;
width: 96px;
color: #ffffff;
padding: 2px 10px;
letter-spacing: 1px;
}
ul.navmenu li a:hover {
background-color: orange;
color: #292929;
}
-->
</style>
<body>
<p class="navheader">.Navigation.</p><br />
<ul class="navmenu">
<br />
<div style="text-align: left;">//Projects</div><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Wild6.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Yahtzee.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Sudoku.</a></li>
<br />
<div style="text-align: left;">//About</div><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Team.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Contact Us.</a><br />
</ul>
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/banner.bmp" class="banner" alt="Entity Games 2006">
</body>
</html>You can set the border all in one property. I looks something like this:
it may fix the problem
border:solid 1px orage;I'll have a more in-depth look now, but always be sure to include "border:0;" in your "body{background-color: #292929; text-align: center; }" IE interminably will add it's own default border value (along with a padding and a margin. Set them to null too with "padding:0; margin:0;" in the "body{background-color: #292929; text-align: center; }" part.
brb
bak
Yup, -that was it. Add "border:0; padding:0; margin:0;" to your style "body{}" statement. Looks the same now for me in IE and Firefox...The width of the orange border around your navmenu is 2px in both browsers. But if you mean that the width of the navmenu differs in the browsers, then that's because IE gets the box model wrong in quirks mode.
Since you didn't use a proper DOCTYPE, IE is useing the same box model as it did for IE 5, which means that any padding and border is included in the width of the element, instead of adding to the width of the element.
Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Entity Games</title>
</head>
<style type="text/css">
<!--
body{background-color: #292929; text-align: center; }
.navheader {
color: #292929;
background-color: orange;
font-weight: bold;
letter-spacing: 3px;
width: 120px;
float: left;
padding: 0;
margin: 0;
}
ul.navmenu {
list-style: none;
font-family: Verdana;
color: orange;
font-size: 10px;
padding: 0;
margin: 0;
float: left;
border-style: solid;
border-width: 2px;
border-color: orange;
}
ul.navmenu li a {
text-decoration: none;
display: block;
width: 96px;
color: #ffffff;
padding: 2px 10px;
letter-spacing: 1px;
}
ul.navmenu li a:hover {
background-color: orange;
color: #292929;
}
-->
</style>
<body>
<p class="navheader">.Navigation.</p><br />
<ul class="navmenu">
<br />
<div style="text-align: left;">//Projects</div><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Wild6.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Yahtzee.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Sudoku.</a></li>
<br />
<div style="text-align: left;">//About</div><br />
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Team.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">.Contact Us.</a><br />
</ul>
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/banner.bmp" class="banner" alt="Entity Games 2006">
</body>
</html>You can set the border all in one property. I looks something like this:
it may fix the problem
border:solid 1px orage;I'll have a more in-depth look now, but always be sure to include "border:0;" in your "body{background-color: #292929; text-align: center; }" IE interminably will add it's own default border value (along with a padding and a margin. Set them to null too with "padding:0; margin:0;" in the "body{background-color: #292929; text-align: center; }" part.
brb
bak
Yup, -that was it. Add "border:0; padding:0; margin:0;" to your style "body{}" statement. Looks the same now for me in IE and Firefox...The width of the orange border around your navmenu is 2px in both browsers. But if you mean that the width of the navmenu differs in the browsers, then that's because IE gets the box model wrong in quirks mode.
Since you didn't use a proper DOCTYPE, IE is useing the same box model as it did for IE 5, which means that any padding and border is included in the width of the element, instead of adding to the width of the element.