Hi guys,
I seem to have a problem with the margins in the website I am developing. The spacing looks different in IE and Firefox and I don't understand why.
here is the CSS code:
h1
{
text-align:left;
font-size: 1.7em;
font-family: Arial, Verdana, sans-serif;
}
#banner
{
background:#81A594 url(typewriter.jpg);
background-repeat:no-repeat;
background-position:right;
height:120px;
padding:10px 50px 0 200px;
}
/*This is for the left hand side navigation */
#navigation ul /* for the navigation, foreground is a2c1b2 and bg is f5d9d7*/
{
list-style:none;
padding:0;
border:0;
margin:4em 0 0 0;
}
#navigation ul li
{
background: #f4d8c7 url("box.jpg") repeat-x scroll center bottom;
width: 10em;
display: block;
text-decoration: none;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding:10px 0 10px 0;
}
/*This is the top navigation */
#topnav ul
{
list-style: none;
margin-left:10px; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */
}
#topnav li
{
float: left;
margin: 0 1.5em 1em 0; /*bottom margin is because I want some space between the top navigation and the horizontal line but it is rendered differently in IE and firefox */
font-family: Arial, Verdana, sans-serif;
}
body
{
background-color:#E6E6DC;
}
/* Horizontal line */
#horizontal_line
{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em
}and here is the page I am working on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Web editing in Richmond</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<!-- BANNER STARTS HERE -->
<div id="banner">
<h1>Web editing in Richmond</h1>
</div>
<!-- BANNER ENDS HERE -->
<!-- TOP NAVIGATION STARTS HERE -->
<div id="topnav">
<ul>
<li>Our web standards</li>
<li>Livelink issues and fixes</li>
<li>How to's</li>
<li>Do's and don'ts</li>
<li>Reference</li>
</ul>
</div>
<hr id="horizontal_line">
<!-- TOP NAVIGATION ENDS HERE -->
<!-- LEFT HAND SIDE NAVIGATION STARTS HERE -->
<!-- <div id="navigation">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> -->
<!-- LEFT HAND SIDE NAVIGATION ENDS HERE -->
</body>
</html>Here's the issue:
in the stylesheet I have
#topnav ul
{
list-style: none;
margin-left:10px;because I want some space between the left corner of my page and the top navigation but in firefox there is more space then IE7
Also in
#topnav li
{
float: left;
margin: 0 1.5em 1em 0;
font-family: Arial, Verdana, sans-serif;
}I gave 1em to the bottom margin because I wanted some space between the horizontal navigation and the horizontal line, but again it is rendered differently in Firefox and IE7, the latter displaying more space than the former.
I am not quite sure what I am doing wrong...
I attached a screenshot showing how it is rendered in both browsers
thanks
