PDA

Click to See Complete Forum and Search --> : Top margin differences between Firefox & IE

lxndr
03-30-2007, 10:25 AM
I'm trying to display a tabbed menu on top of the main page content and it is working but behaves differently in IE & FF and I suspect I must be doing something incorrectly. The relevant css would appear to be:


#header
{
position: relative;
margin-left: 68px;
width: 580px;
font-size:70%;
background:#e4e5ee;
line-height:normal;
}


#wrapper
{
position: relative;
background-color: #FFFFFF;
border: 1px solid #000000;
width: 750px;
margin-top: 0px; /* was 23 which works in FF but not IE */
margin-left: 25px;
text-align: left;
background-image: url(notebook.gif);
}


.content
{
font: 0.8em "bitstream vera sans", verdana, sans-serif;
font-weight: bold;
padding: 4px;
color: #293a74;
margin-left:55px;
margin-right:35px;
}


and the html:

<!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</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">@import "v1.css";</style>

</head>


<body >

<div id="header">
<ul>
<li id="current"><a href="#">Home</a></li>
<li><a href="#">View</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Endorse</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Tables</a></li>
<li><a href="#">Gamble</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>

<div id = "wrapper">
<div class = "content">

Content

</div>
</div>

</body>
</html>


It all looks fine in IE if I set margin-top to 0px and fine in Firefox if I set margin-top to 23px ... can anyone tell me why that's happening and how to fix it.

..
WebJoel
03-30-2007, 10:36 AM
Have you used the 'universal selector' to remove default padding/margins from all elements (IE is particularly affected)?

* {margin:0; padding:0;}

Makes the above be your first line of CSS. It strips to "zero" the margin and the padding from everything on the page. This is a big help, but yo umay now find that you will need to write default margins/paddings for elements that previously enjoyed the 'default' settings...
lxndr
03-30-2007, 11:56 AM
Have you used the 'universal selector' to remove default padding/margins from all elements (IE is particularly affected)?

* {margin:0; padding:0;}

Makes the above be your first line of CSS. It strips to "zero" the margin and the padding from everything on the page. This is a big help, but yo umay now find that you will need to write default margins/paddings for elements that previously enjoyed the 'default' settings...

Hi, thanks for your message. I believe I've now done what you recommended but I've still got the same problem, is there an easy way to see which element is responsible for the border problem ?

..
lxndr
03-30-2007, 12:05 PM
Thinking about it a bit further, and looking at the margin settings, isn't IE actually doing what would be expected, i.e. showing a 23px margin between the header block (tabbed menu) and the actual page content ? If so I suppose the question is why does Firefox need the 23px margin for the two elements to be vertically adjacent to each other ? I'm a real beginner when it comes to CSS so I'm sure there must be a mistake in my code somewhere ...

..
WebJoel
03-30-2007, 01:44 PM
<!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</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">@import "v1.css"</style>

<style type="text/css">
* {margin:0; padding:0;} /* REMOVES all padding & margin from EVERYTHING */
#header
{
position: relative;
margin-left: 68px;
width: 580px;
font-size:70%;
background:#e4e5ee;
line-height:normal;
padding:6px; /*pad the container a bit*/
}

#header ul li {list-style-type:none; padding:1px 0 1px 16px;} /*get rid of the "list item bullets" which are visible in Firefox, but not in IE*/


#wrapper
{
position: relative;
background-color: #FFFFFF;
border: 1px solid #000000;
width: 750px;
/* margin-top: 0px; <-- no longer required because we use "universal selector"
/* was 23 which works in FF but not IE */
margin-left: 25px;
text-align: left;
background-image: url(notebook.gif);
}


.content
{
font: 0.8em "bitstream vera sans", verdana, sans-serif;
font-weight: bold;
padding: 4px;
color: #293a74;
margin-left:55px;
margin-right:35px;
}

</style>

</head>


<body >

<div id="header">
<ul>
<li id="current"><a href="#">Home</a></li>
<li><a href="#">View</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Endorse</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Tables</a></li>
<li><a href="#">Gamble</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>

<div id = "wrapper">
<div class = "content">

Content

</div>
</div>

</body>
</html> Try this. I see exactly the same thing now in Fx as IE (maybe a slight difference in font-size, but dismissable amount).
Centauri
03-30-2007, 07:31 PM
Where is the css for the actual menu - the <ul>, <li>, <a> tags? If any / all of these are floated, the #header div would collapse in compliant browsers unless the floats are cleared - if the menu is about 23 pixels high, then that is probably the problem.

Cheers
Graeme
AveryBrightman
04-05-2007, 08:38 PM
I'm a nobb, but I've noticed that IE and FF seem to treat the margin-top property differently. Is this so or am I imagining things?
Jeff Mott
04-05-2007, 10:28 PM
They've always seemed to behave the same for me.
Demon
04-07-2007, 02:41 PM
* {margin:0; padding:0;}

This single line of code has solved the one remaining problem I had with my website. I thank you, very very much, WebJoel. :)
WebJoel
04-07-2007, 04:14 PM
Credit where credit is due... up until about a month ago *I* was using

body, html {padding:0; margin:0}

(and quite pleased with what it was doing for my pages), but Jeff Mott explained how much better the universal selector " * " does this (meaning "everything", and that solved some other probs I occasionally encountered..).
Demon
04-07-2007, 04:44 PM
Very interesting. So the way you were doing it didn't have effect from browser to browser, unlike the universal selector?
WebJoel
04-07-2007, 05:13 PM
Very interesting. So the way you were doing it didn't have effect from browser to browser, unlike the universal selector? Not quite. -The way I was doing it only removed padding and margin from the "body" and the "html", which served my needs. Esp. a particularly annoying 'space' all around the screen in IE, which was never present in any other browser.

I still was getting default margins & padding in all other elements using just body, html {}.
The 'universal selector' removes margin & padding (and border:0;, if you choose to add it) from ALL elements (body, html, table, image, H-tags, p, img, -everything, -which means you now have to re-declare paddings & margins (and borders(s)) for these elements. Including the "border:0;" in the 'universal selector's declarations is particularly useful if you are doing a gallery of images, whereby you would not want to have the 'default 1-px border' on every image...

The end result of including the universal selector is a much more consistant X-browser layout. (And was it Jeff or Ryan Butler that put me onto 'universal selector'? -Don't recall now... I learn a little bit from everyone here and my pholosophy is none of us are smarter than all of us, -although I'd like to be! :D ).
Demon
04-08-2007, 05:40 AM
Haha! Okay then.

Well, i'm very happy to have come accross this code. It is smart to have it used on every site I do?