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

Ikunu,
thanks for your reply, but I am not sure what change the DOCTYPE declaration could do to the margin. Also, I would like to use the "strict" and not "transitional" because I want to make sure I don't use deprecated tags
Could you think of anything else that affect the margins (I insist on margins because I think the problem somehow depends on the margins, but I might be wrong)

I think that you should rather have your margins in 'px', since 'em' represents the size of the letter 'M', and different browsers have different font sizes...

Hi there,
I changed them but it doesn't seem to make much difference, also the margins I am interested in have all value 0 (so does it matter whether is em or px?).

However, I solved one of the above problems, the space between the left corner and the top navigation. the code I had was

#topnav ul
{
list-style: none;

margin-left:10px;
}

but apparently firefox and chrome adds some extra padding (!!??), so I added this line

padding-left:10px;

to make it even and now it works! yay! Unfortunately I couldn't solve the other problem (the space between the horizontal navigation and the horizontal line). I applied pretty much the same logic even if this time IE7 seems to add some extra space between the two. I tried to even up the space removing any possible extra margin or padding and some extra modifications ending up with this

/*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 */
padding-left:10px; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */ 
margin-bottom:0;
padding-bottom:0;
}
 
#topnav li
{
float: left;
margin-top:1em;
margin-right:1.5em;
margin-bottom:0;
margin-left: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 */
padding-bottom:0;
font-family: Arial, Verdana, sans-serif;

}
body
{
background-color:#E6E6DC; 
}
 
/* Horizontal line */
 
#horizontal_line
{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em;
width:65%;
float:left;
padding-top:0;
margin-top:0;
border-style:none; /*Firefox seems to have a little border, so I removed it altogether */

}

but no joy...there is always more space between the horizontal navigation and the horizontal line in IE7 than in firefox and chrome

Did you take of the 'margin-bottom'? I don't see it at all?

I did yes, it's in line 18 of the css. I gave it 0 now because I was trying to determine how much more space IE7 gives it to the gap between the line and the navigation. I can give it any value really, still IE7 adds that little annoying bit.
The funny thing is though, that's only IE7, whereas IE8 is absolutely fine.
I am also floating the horizontal line left (line 38 in the CSS) and guess what? it is fine in all browsers (included IE8) but in IE7 the line doesn't float left but it is in the middle of the page and I can't get it to float left! how annoying

Welcome to the crazy world of IE... Unfortunately the only way you may be able to fix this is with a hack :(

I see, so what would you recommend then?

I don't recommend this, but in some cases it's just necessary...

<!--[if IE7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

and put in there the styling you want for IE7

I see, that makes sense, and does it need to go before or after the main CSS?
The only problem with this is that I wouldn't be able to put anything in it because I don't know how to make thing work in IE7. Take the first spacing issue: in the last code I posted (I removed the bottom margin so that there shouldn't be any space between the horizontal line and the horizontal navigation as it happens in firefox) IE7 still adds some space. I tried pretty much everything I could think of, but still can't remove the extra space.
Or take the second issue: the horizontal line that in IE7 is in the middle of the page: again, in the last code I posted I set

float:left;

in line 38, so if it doesn't float when I gave it that value, how do I make it float it left? I thought of "align" but that doesn't work either...

Put it after the regular CSS, and regarding the margin, try a negative margin (-)...

Negative? Ok cool, will definitely try that and then post back, thanks, didn't know I could use negative values

Hi Violet 82 fix by Shaya4207 can work for you because IE have a different way of dealing with HTML CSS and in that regard just let it do something forcefully will get the job done

By default, each browser has its own margin and padding for elements. To "reset" this simply add a universal rule (*) in your CSS.

* {
    margin: 0;
    padding: 0;
}

As for the doctype I'm going to quote a mentor of mine,

"The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules."


Regards, Arkinder

IE applies the width setting outside the margins, borders, and padding.

The W3C standard, Firefox, and others apply the width setting inside them.

Thanks guys.
Arkinder, if I add

{
     margin: 0;
     padding: 0;
   }

then how do I play with margins and paddings? If I set them to 0 then I won't be able to say something like

margin-top:1em;
margin-right:1.5em;
margin-bottom:0;
margin-left:0;

in the code?

MidiMagic, if different browsers then apply different settings, the only way to get around will be, as I was suggested, to use a different stylesheet for IE then. Like the problem I am having with the horizontal line that is not centred in IE but it is in firefox et al

No add

* {
margin:0;
padding:0;

}

at the TOP of your css.

Then you set margins and paddings for each element you want to have them. Ths global margin and padding rule is simply to set them to 0 or nothing, like a clean slate, so that all browsers start at the same place.

Ok thanks for that, it really makes the difference actually and sorts most of my problems out :) .
Still, something that that doesn't seem to fix (and I thought it would have been a problem with margins/padding) is the fact that the horizontal line below the navigation, which I set to float to the left, is instead displayed in the centre of the page in IE7 (and I think in IE6 too), whereas it is fine in IE8 and all the rest of the browsers. I thought it was applying some kind of padding which is why I thought that your trick would have solved it, but no, there seems to be something else...I downloaded this from the microsoft website http://www.microsoft.com/downloads/en/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en which seems a nice tool, and I discovered that in IE7 there are an extra 187px of space between the horizontal line and the left margin. Not sure where this space is coming from but is there any way that I can remove it without applying a separate CSS for IE7 do you think?
My CSS now looks like:

*
{
margin:0;
padding:0;
}


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:1em; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */
padding-left:0; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */ 
}
 
#topnav li
{
float: left;
margin:1em 1.5em 0 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;
width:40.6em;
float:left;
margin-top:0.15em;

}

I might have missed it, but do you have a link to your site? Sure would be much easier to see you issues live.

One thing I will mention, and I'm just guessing, is that you created a div for a horizontal line correct? Why didn't you just insert a horizontal line and style the line itself. Not that it wouldnt work that way, just overkill.

Hi Violet82,

I skimmed over the thread and tested out the HTML/CSS in the first post. It works fine in IE8 and Firefox. I realize the problem is IE7, but without sounding like a wise-ass, it should unless you're doing something wrong. At my job, we recently created a calendar solution using floats throughout the page with NO problems, tested in 100's of department skins.

What I'd suggest is NOT fun, but it will pretty much guarantee you'll figure out your trouble-spot. What you think is the issue may not actually be the issue.

Also, is there any way you could upload the site to a public server?

Please keep in mind that floating an element removes it from the normal flow of the page.

Regards, Arkinder

Hi there,
you guys are right, I should have put the site up somewhere. I have just done it, the link is http://www.antobbo.webspace.virginmedia.com/webediting/home.htm
It's only the home page, I will add the rest as it comes along.
So as mentioned one of the problems is the horizontal line in IE7.

One thing I will mention, and I'm just guessing, is that you created a div for a horizontal line correct? Why didn't you just insert a horizontal line and style the line itself. Not that it wouldnt work that way, just overkill.

teedoff, The line is not in a div

What I'd suggest is NOT fun...

floatingDivs, What would you propose?

Please keep in mind that floating an element removes it from the normal flow of the page.

Arkinder, what do you mean exactly?

you need to determine height for that div
of the menu dont leave it without the definition

you can either do:
height: whateverPX
or
line-height: whateverPX

that should fix it..

Violet82,

My apologies. I can't believe I forgot to include the suggestion for which I included a warning. *facepalm*

The suggestion would be to restart the page from scratch and add little by little and test it various browsers. Find the EXACT html code that causes the problem. Just because one thing LOOKS like the problem does not mean it is.

Once again, sorry! Hopefully, Daniweb helps you get your answer.

The problem is only occurring in IE7. Modern browsers have no problem with it, so it's doubtful that there is anything actually wrong with the code. Taking apart the site would be pointless, not to mention a huge waste of time for a problem that's exclusive to a browser that's known for its many flaws.

Try removing the width and float from your #horizontal_line rule. This should allow the element to cover the entire width of the page. Is it still being moved?


Regards, Arkinder

Violet, can you please tell me exactly what you would like for your page and elements too look like. I had played around with the navigation and horizontal rule and got them centered. Now I look back and maybe thats not what you wanted. Thanks.

you need to determine height for that div

which div, the hr is not in a div.

Try removing the width and float...

Done, and yes the line is covering the whole page now and seems to be the same for IE7 and Firefox. If I remove the

width

and

float

though the

margin-top:0.15em;

seems to get affected as well, at least in firefox

can you please tell me exactly what you would like for your page...

the horizontal line should be on the left, like in firefox, and get to the end of the top navigation, which is not happening in IE7 only, where the line is in fact centered for some reason

Ok then, I am happy to have a line that covers the entire width of the page if there is nothing we could do to fix it.
How do I proceed to achieve that? I suppose I can't simply remove

width:46.8em;
float:left;

all sorts of things happen like spacing between the line and the navigation goes crazy in IE7 and disappears completely in Firefox...