...

View Full Version : Firefox and IE discrepancy with margin



tpeck
02-04-2005, 08:30 AM
I am trying to get the two beasts (and Firefox is the bigger beast today) to render the same thing.

Here is my test code:

*************************

<html>

<head>
<style>
{
margin: 0;
padding: 0;
}
</style>
</head>

<body bgcolor="#800000">
<div align="center">
<center>
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="98%" height="500">
<tr>
<td bgcolor="#FFFFEE">
</div>
</td>
</tr>
</center>
</div>
</table>
</body>

</html>

*************************

Looks JUST the way I want it in IE. How do I get Firefox to do EXACTLY the same?

OK - it's probably IE's fault, but there has to be a way.

I like the way IE does it from my code, NOT the way Firefox adds yards to the top margin.

Any ideas?

Many thanks in advance,

Terry

_Aerospace_Eng_
02-04-2005, 08:46 AM
give this a try

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">
html, body {
margin:0px;
padding:0px;
background-color:#800000;
}
#content {
margin:auto;
width:98%;
height:500px;
margin-top:20px;
}
#table1 {
border-collapse: collapse;
height:500px;
width:100%;
border:1px solid #111111;
}
#table1 td {
background-color:#FFFFEE;
}
</style>
</head>

<body>
<div id="content">
<table id="table1">
<tr>
<td></td>
</tr>
</table>
</div>
</body>

</html>

tpeck
02-04-2005, 11:49 PM
Thank you Aerospace - I have learned a lot and it works.

gfarr
12-15-2008, 11:19 PM
Hi,

I'm having the same problem with this site:http://www.oasi.org.mt

I can't understand why firefox adds witdh to the top margin:confused:

any help will be much apprecioated...

regards

_Aerospace_Eng_
12-16-2008, 12:28 AM
Please be more specific on your issue. Also I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". Tables are NOT for page layout.

gfarr
12-16-2008, 11:34 AM
Thank you for your reply.

I already read the article and intend to re-code the whole site in CSS in due course but I need a quick fix before the festive season....

My problem is that I need the menu (which is and iframe within a layer) placed in a specific position. In IE the postioning is as desired but not in Firefox. My guess is that Firefox is adding some pixels to the top margin thus pushing the contents of the page down....I came to this conclusion as the space above the top picture is bigger in Firefox.

Any help is much appreciated.

Thanks

effpeetee
12-16-2008, 11:53 AM
Change this-


<style>
{
margin: 0;
padding: 0;
}
</style>


to this -


<style type = "text/css">
*{
margin: 0;
padding: 0;
}
</style>


The * is known as the universal selector. The whole resets all padding and margins to zero. Not all the browsers start from the same place!

Look here. (http://exitfegs.co.uk/OASI.html)

View source for code.

This is the significant change.


<style type="text/css">
* {
margin:0px;
padding:0px;
}
</style>

Frank

gfarr
12-16-2008, 03:04 PM
Thank you for your insight.

Your solution is great :) however it created other layout problems, since some of the tables i'm using have padding set...so I removed the
padding: 0; and it worked fine...:thumbsup:

effpeetee
12-16-2008, 06:35 PM
Thank you for your insight.

Your solution is great :) however it created other layout problems, since some of the tables i'm using have padding set...so I removed the
padding: 0; and it worked fine...:thumbsup:
Really you should leave the code as I put it, and reset the padding on the tables. But I understand that your version is easier and may be satisfactory, however, it could cause problems on other browsers.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum