1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Browser Compatibility

page displays different across browsers

         

kanbun

3:11 am on Feb 24, 2011 (gmt 0)

10+ Year Member



displays fine in IE, but not so in Firefox.

Here's the code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Test File</title>

<style type="text/css">
td#blocks { padding:0em 0em; height:inherit; width:100%; text-align:center;vertical-align:top;}
#col0 { display:inline; padding:3em; background-color:#9999CC; }

#col1 { display:inline; padding-top:2em;padding-left:2em; padding-right:2em;width:350px; height:inherit;background-color:transparent; vertical-align:top;text-align:center;font-family:cursive; font-size:20px;line-height:22px;}
#col1a { display:inline; padding:3em; width:350px; height:inherit;background-color:transparent; text-align:center;font-family:cursive; font-size:16px;}

#col2 { display:inline; padding-top:2em;padding-left:2em; padding-right:2em;width:350px; height:inherit; background-color:transparent; vertical-align:top;text-align:center; font-family:cursive; font-size:20px; line-height:22px;}
#col2a { display:inline; padding:3em; width:350px; height:inherit;background-color:transparent;text-align:center; font-family:cursive; font-size:16px;}

p.text1 {font-family: cursive; font-size: 14px; font-color:black; text-align: justify; margin-top:5;}
</style>
</head>

<body bgcolor="cccccc">
<table width="770" height="488" border="0" cellpadding="0" align="center" background="opennotebook.jpg">
 
<!-- Row 1 -->
<tr>
<td id="blocks">
<div id="col1">Test File Corporation
<p class="text1">A b c d e f g h i j k l m n o p q r s t u v w x y z.

<br><br>A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z</p></div>

<div id="col2">Test File Here
<p class="text1">A b c d e f g h i j k l m n o p q r s t u v w x y z

<br><br>A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t u v w x y z
<br><br>A b c d e f g h i j k l m n o p q r s t u v w x y zA b c d e f g h i j k l m n o p q r s t u v w x y z</p></div>

</td>
</tr>
</table>
</body>
</html>


Can someone tell me why I'm having trouble with Firefox?

Thanks.

[edited by: alt131 at 2:22 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy [/edit]

Samizdata

3:17 am on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can someone tell me why I'm having trouble with Firefox?

Because you are developing in Internet Exploder.

Far better to develop in a standards-compliant browser then tweak for IE if necessary.

Welcome to WebmasterWorld.

...

kanbun

3:32 am on Feb 24, 2011 (gmt 0)

10+ Year Member



OK, thanks. What do I need to change?

4css

1:42 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi kanbun,

Welcome to WebmasterWorld.

Just a bit of information for you. First, please read the Terms of Service [webmasterworld.com] and the Charter [webmasterworld.com] for the site.

When posting please don't post url's to your site, this isn't permitted.

Reason being is that this could become a dead link and in the future when someone is searching and a thread comes up as a dead link, it doesn't help the person looking for help. Also, this keeps people from advertising their sites in posts.

The Charter for the css forum gives you complete instructions for posting your code and how to post it. Someone will probably come along and snip out your link.

Once again, welcome to WebmasterWorld, and just an fyi, when I started here I also posted a link :)

webprutser

2:16 pm on Feb 24, 2011 (gmt 0)

10+ Year Member



I always use Firefox, but before putting my site online I had to test it in Internet Explorer also. Had some annoying errors with Internet Explorer, which were solved at the moment I used a different DOC-type. There is a very useful post about it on this forum: [webmasterworld.com...]
I used option 3, the strict type, and my problems were solved.
Just check out that post, make your site working well in Firefox and then test it in Internet Explorer (using a recent version is also good practice). I think that's the way I should take care of it and if you are having problems with a specific item, you can post for help, here.

kanbun

2:58 pm on Feb 24, 2011 (gmt 0)

10+ Year Member



Thanks webprutser. I have changed the code to more (all) css, but still have a Firefox problem. Still looks good in IE, but in Firefox the left column is too far left and not on the correct horizontal. Right column OK.

Here's the changed code. Any suggestions?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 100% cursive;
color: #333;
}
#container {
height: 488px;
width: 770px;
margin: 0px auto;
overflow: auto;
background: url(http://survey.mcbcorp.net/opennotebook.jpg);
}
#left {
height: 430px;
width: 280px;
margin: 30px 0 0 40px;
float: left;
}
#right {
height: 430px;
width: 280px;
margin: 30px 0 0 420px;
}
h1 {
font-size: 1.3em;font-weight:normal;
text-align: center;
}
p.text1 {font-size: 0.7em}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h1>Test File Corporation</h1>
<p class="text1">
A b c d e f g h i j k l m n o p q r s t u v w x y z.
<br /><br />
A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e
f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j
k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o
p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t
u v w x y z
</p>
<!--end left--></div>
<div id="right">
<h1>Test File Here</h1>
<p class="text1">
A b c d e f g h i j k l m n o p q r s t u v w x y z.
<br /><br />
A b c d e f g h i j k l m n o p q r s t u v w x y z A b c d e
f g h i j k l m n o p q r s t u v w x y z A b c d e f g h i j
k l m n o p q r s t u v w x y z A b c d e f g h i j k l m n o
p q r s t u v w x y z A b c d e f g h i j k l m n o p q r s t
u v w x y z
</p>
<!--end right--></div>
<!--end container--></div>
</body>
</html>

Thanks.

webprutser

3:56 pm on Feb 24, 2011 (gmt 0)

10+ Year Member



I'm no positioning-expert, but you might get some progress by doing the following. First add background-colors to the left and right div, so you can see which area they cover. I changed the margins of the left container to put it in place and also added padding:

#left {
background-color: yellow;
height: 430px;
width: 280px;
margin-left: 70px;
margin-top: 30px;
padding-top:4px;
float: left;
}
#right {
height: 430px;
width: 280px;
margin: 30px 0 0 420px;
background-color: red;
padding-top: 4px;
}
When you don't specify padding, the second div is positioned differently from the first div. Why Firefox renders them differently, I don't know, but as soon as you add padding you have control over positioning as you can see.
The differences in left margin I can't explain. I think Firefox has certain standards, for margins that are not specified or it has to do with the float-element.
Maybe someone will jump in here, to explain the behaviour, I'd like to understand the margin-story.

kanbun

4:29 pm on Feb 24, 2011 (gmt 0)

10+ Year Member



It is confusing. This change makes Firefox look good, but IE is shifted to the right and no space between columns.

SuzyUK

4:54 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



as far as I can see the renewed code with a DocType is now diplaying virtually the same in IE7 & IE8 as it is FF - still "too far to the left" in both browsers which would be the expected result after adding a Doctype

previously without a "proper" Doctype IE would have been in "quirks rendering mode" - hence the advice to develop in non-IE browser first.

so now, what you have is an almost even playing field. Both browsers showing different foibles - all of then collapsing margin related.

If you do the background color on the two columns as suggested by webprutser you will see a lot of differences, as in the top "margin" is sometimes a margin (outside the coloured column) and sometimes padding inside the coloured area.. it's not actually padding, as you have no padding lol, it is actually the default margin in the <h1> In IE you will not see it as "padding" on the left column as IE doesn't handle default margins very well on floated elements

OK after adding colors to left/right, also remove those top margins (temporarily) ..

1st part of solution: add an explicit margin for all elements inside the content areas, in fact it's not a bad idea to always declare explicit margins, rather than rely on the default. This is one reason why the use of resets have "hidden" this problem, it's not talked about quite so much as it used to be

IE handles collapsing margins differently on floated elements than it does on non floated ones so this trick will even up the handling between your 2 columns

add: h1, p {margin: 1em 0;}

now you should see that FF still contains the margin differently than IE. IE's H1 margin has now collapsed inside the box, whereas FF is outside, you can likely use this as is, in your case - because the colors are not required.. an as long as the gap is the same your not bothered.. but if you want to be sure and make them behave the same add 1px top/bottom padding to the left and right boxes - now your picture should look the same in both scenarios and you can go ahead remove the colors and add back in your required top margins

here's my code with colours and fixes in place, all code reposted in case I changed something else.. and I did tweak the left/right margins to bring the columns into line with your graphic: 

html, body {
margin: 0;
padding: 0;
background: #FC6;
font: 100% cursive;
color: #333;
}
#container {
height: 488px;
width: 770px;
margin: 0 auto;
overflow: auto;
background: url(http://survey.mcbcorp.net/opennotebook.jpg);
}

#left {
height: 430px;
width: 280px; 
margin: 0 30px 0 75px;
float: left;
background: #fff; /* temp */
}
#right {
height: 430px;
width: 280px;
margin: 0 0 0 425px;
background: #ffe; /* temp */
}

/* added! */
#left, #right {
padding: 1px 0;
margin-top: 30px;
}

h1 {font-size: 1.3em; font-weight:normal; text-align: center;}
p.text1 {font-size: 0.7em}

h1, p {margin: 1em 0;} /* added! */

SevenCubed

5:14 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I haven't read this thread in its entirety but I just tried it like webprustser has and it and everything looks fine here.

If you still aren't getting the results you are expecting maybe you are seeing a cached version -- clear your cache? Also, it's good practice to at the very least to reset browser default margins and padding on page load. Adding this as your very first line of CSS is a good practice:

*{margin:0;padding:0;}

One more thing worth mentioning -- there is a "firefox web developer add on" -- Bing it, it's your friend. There is a feature in it that would permit you to see your layout like Suzy is pointing out but you don't have to add anything to your CSS code just view it as "display topographic information" It's like the Swiss army knife for web development. (Hey the Swiss don't have an army do they?).

rocknbil

5:28 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I still say swimming upstream in quirks mode will hose you every time. :-)

Choosing the Best Doctype for your site [webmasterworld.com]

Once your doctype is properly set, validate the page [validator.w3.org].

These two things will make **most** of your cross browser issues go away, then it's down to just a few minor items.

SuzyUK

5:41 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



actually I think I was wrong.. you will still need the 1px padding trick no matter the colors or not, or else the h1 margin will collapse with the with boxes top margin, in non-floated boxes in non-IE browsers :o

anyway the code I give shouljd cover the whole scenario

what the 1px padding does is to put a "barrier" between collapsible margins, which are the way they are by design, if the can't touch each other they can't collapse.. oh and collapsing margins may be a new to term to some, what it means is that two adjoining margins join merge together and become the size of the largest one

:)

SevenCubed

5:55 pm on Feb 24, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



what it means is that two adjoining margins join merge together and become the size of the largest one

I've heard of it but never really looked at it closely -- sounds like quirks, quarks, and yin yang to me -- I'll have to look it up.

<OT>Speaking of which, the Swiss do have an army of sorts.</OT>

webprutser

11:05 pm on Feb 24, 2011 (gmt 0)

10+ Year Member



What I still don't understand is the different behaviour of the two divs (left and right). Why are they, without styling help, not rendering in a similar way, I mean vertically?
There is one difference between them and that's the float, included in the #left-specifications. Is that causing this effect?

SuzyUK

12:56 am on Feb 25, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@webprutser.. Yes, the float causes the difference

collapsing margins are a bit of a minefield, remember looking into it quite a bit of detail a lot of years back [webmasterworld.com]

the only things that stuck is to always set explicit margins for elements and that a floated element should not collapse it's margins

therefore FF is right with it's handling of the original case here.. it collapses (combines) them on the non floated right column but doesn't on the floated left, hence the bigger (and required) vertical "gap" on the left column, and btw IE8 also gets it right,

so the only way around it in this case, is to use the padding trick so you can use both margins or zero the H1 top margin and just use the one margin (top) on the boxes themselves

it depends on the design which method you might use, if you're in the habit of using a reset then you've likely zero'd all margins anyway, so setting explicit ones for either method would be second nature and all that would have shown up here was the difference in handling of floated collapsing - unless you looked at IE7 which wrongly collapsed the float making it look even ;)

webprutser

1:22 pm on Feb 26, 2011 (gmt 0)

10+ Year Member



Hello, good morning .....
Reading about collapsing margins I'm beginning to wonder why I wanted to switch from table-layout to box-model (old name yet, uhh, new name was flow model?) in the first place. To make my life more complicated?
It's hard to understand all these rules and exceptions are necessary. It looks more like an insurance contract, than something designed to be used.
Nevertheless, thanks for your explanation. I do understand now, that the float makes a difference.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026