Chrome vs. IE

**jonybigude** · 03-14-2012, 03:42 PM

Hello everybody!

I'm having a problem with browser compatibility here... All I want to do is to center the page contents. Therefore I wrote in my code

Code:

<body bgcolor="#ffffff" p align="center">

This works perfectly in Chrome, but not in IE

... Any suggestions?

Thanks in advance!

**jonybigude** · 03-14-2012, 04:02 PM

Actually, in all the 3 main browsers the site seems completely different... I don't get it, I used CSS and some images to edit the the looks of the site, shouldn't it look exactly the same in every browser??? The address is bodatradgard.se and it should look like as it is with Google Chrome...

Can somebody save my day??

**traq** · 03-14-2012, 04:19 PM

Originally Posted by jonybigude

Hello everybody!

I'm having a problem with browser compatibility here... All I want to do is to center the page contents. Therefore I wrote in my code

Code:

<body bgcolor="#ffffff" p align="center">

This works perfectly in Chrome, but not in IE

... Any suggestions?

Thanks in advance!

This is not valid HTML at all.
All browsers are going to look at that and try to "error-correct" it into something they can parse. Chrome happens to be doing this in a way that looks like what you want, but this is a coincidence: Chrome's implementation is not "correct."

Perhaps you were trying to do:

HTML Code:

<body>
   <p>A paragraph...</p>
</body>

?
as far as styling goes, you would then use

Code:

body { background-color: #fff; }
p { text-align: center; }

...which would do what your code suggests above, but is not what you say you're trying to do.

If you want the entire "page" to be centered in the browser, you'd need to do something like this (same HTML, change the CSS to):

Code:

body { 
   width: 900px; /* or whatever width you prefer */ 
   margin: 0 auto; /* this keeps the body centered in the browser window */
}

Originally Posted by jonybigude

... shouldn't it look exactly the same in every browser???

no.

**jonybigude** · 03-14-2012, 09:04 PM

But why you say it shouldn't look exactly the same in all the browsers? There are millions of pages that look like exactly the same in all the browsers, isn't that the goal of a web designer?

**traq** · 03-14-2012, 09:41 PM

Edit: For context, this is from an earlier PM:

Originally Posted by jonybigude

I don't intend to question your coding capabilities but isn't really the command

<p align="something"> or <body align="something"> incorrect?? Because I learned like this (otherwise, me being a designer wouldn't invent code just like that )

Anyway, it seems that my website is completely full or mistakes that seriously I don't understand and somehow I have to fix. For instance, Firefox doesn't recognize some of the CSS and therefore my menu appears with a white background when it should be green (which it is in IE and Chrome), and as well, still in Firefox, the size of my cells isn't at all the one it should be (Firefox just stretches the whole website along the whole screen...) and then on IE, somehow the menu gets longer in it's size, making a weird line break, and so on....

Finally, I tried your code for the centering of the contents of the website (which are all inside of a table) and it keeps on only working with Chrome, both offline and online... Is it possible that it is making some kind of conflict with another code?????? I don't specify anywhere else to center the contents of the <body>...

align is an old attribute - it has been depreciated for some time (same with the bgcolor attribute, in fact) in favor of CSS.

Regarding my example, yes, there may well be something interfering with it on your actual page - I intended it as an example only, not as a working solution - I did not test it on your page.

Try the example I gave you in a new HTML document and see how it works (you might add more text, or add differently colored borders, to see how everything is positioned).

Sometimes, it really is easier to star over: Start by building a layout, using current methods and practices, that matches (or is close enough) to what you need, and then, start adding the content back in, one piece at a time, stopping when anything breaks.

Originally Posted by jonybigude

But why you say it shouldn't look exactly the same in all the browsers? There are millions of pages that look like exactly the same in all the browsers, isn't that the goal of a web designer?

web browsers are all different. they don't all have the same parsers or programming. If you use current, valid code, you should be able to expect good results and very similar layouts, etc., but "pixel-perfect" (meaning "exactly the same") is not a reasonable goal. Beyond the fact that "different browsers are different," you should also consider that users might have things set up "the way they like them" - different fonts, font sizes, margins, and so forth - that would affect how the page is displayed. Different screen (or window) sizes are another issue.

The goal of a web designer should be to make the page look good and be usable.

Now, to clarify, I agree that your webpage has browser-compatibility issues. I'm not saying that the drastic differences you're running into between browsers are acceptable. It's not really the fault of the browsers, however - they have "broken" markup and are trying their best to guess at how to fix it.

I would recommend making up a new layout, and adding the content back in a piece at a time to make sure nothing "breaks." The example below has no margins, content, etc., but (visually) is the same basic layout you have - but it doesn't use tables or depreciated attributes, and it functions well cross-browser (the dotted outline is so you can see where all the elements are):

HTML Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Layout Example</title>
	<style>
		*{ outline: 1px dotted red; }
		p{ outline: none; }
		html{ background: url('http://bodatradgard.se/src/fundo.jpg'); }
		body{ 
			background: #fff;
			width: 1100px; 
			margin: 0 auto; 
			position: relative; /* see John's post, below */
		}
		.row{
			width: 100%;
		}
		.row.green{ background: #00AE38; }
		
		/* Nicolas Gallagher's micro clearfix */
		.row:before,.row:after{ content:""; display:table; }
		.row:after{ clear: both; }
		.row{ zoom: 1; }
		
		.col{
			float: left;
			position: relative;
		}
		.col.main{
			width: 800px;
			background: #fff;
		}
		.col.side{
			width: 300px;
		}
	</style>
</head>
<body>
	<div class="row">
		<p>Banner and navigation go here.
	</div>
	<div class="row green">
		<div class="col main">
			<p>Main content column.
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		</div>
		<div class="col side">
			<p>Side column (for photos).
		</div>
	</div>
	<div class="row green">
		Footer goes here.
	</div>
</body>
</html>

**traq** · 03-14-2012, 09:53 PM

follow-up:

in Firefox, my guess (haven't been able to confirm this) is that content and/or spacer gifs (another very outdated method) in your various table cells are pushing the table out beyond the dimensions you specified - where Chrome is containing, or collapsing, the extra space (for some reason).

As I said, I'm not sure if that's the case - I can look at it more in-depth later, when I have more time - but that would be my guess.

**jscheuer1** · 03-14-2012, 11:54 PM

This is the right idea generally, but you shouldn't do it to the body:

Originally Posted by traq

Code:

body { 
   width: 900px; /* or whatever width you prefer */ 
   margin: 0 auto; /* this keeps the body centered in the browser window */
}

Some browsers will make you pay for that under certain circumstances by distorting floats, relatively and/or absolutely position content in the body, perhaps some other undesirable stuff. The safer practice is to leave the width of the body alone, zero out its margin if you like, whatever. You can safely apply that style you have there for the body to a container division that encompasses all of the content of the page:

Code:

#container { 
   width: 900px; /* or whatever width you prefer */ 
   margin: 0 auto; /* this keeps the body centered in the browser window */
}

Then in the body:

HTML Code:

<body>
<div id="container">
Everything else
</div>
</body>

as a side note, in IE in order for the margin: auto to work, you need a standards invoking DOCTYPE. And in IE 8 and less at least, a defined width. Others can center with margin: auto even without a defined width as long as the native width is less than the parent element and the element and its parent are both display block.

**traq** · 03-15-2012, 12:54 AM

Originally Posted by jscheuer1

This is the right idea generally, but you shouldn't do it to the body:

Some browsers will make you pay for that under certain circumstances by distorting floats, relatively and/or absolutely position content in the body, perhaps some other undesirable stuff...

Sorry, I did leave out an important bit:

Code:

body {
    width: 900px;
    margin: 0 auto;
    position: relative;
}

Explicitly specifying relative positioning fixes the floated/relative/absolutely positioned stuff within the body (in IE>=6). I've never had problems with this - anything you can show me?

I agree that the #wrapper method accomplishes the same thing, with fewer potential issues to account for, and so is a "safer" approach.

Originally Posted by jscheuer1

...as a side note, in IE in order for the margin: auto to work, you need a standards invoking DOCTYPE.

Everything I've read indicates (often specifically) that <!doctype html> works "in all browsers," though I have had some situations where IE<8 seems to intermittently ignore it when lowercased (only responding to <!DOCTYPE html>). Haven't figured that one out, yet.

**jscheuer1** · 03-15-2012, 02:51 AM

Code:

<!DOCTYPE html>

Is a standards invoking DOCTYPE. It's the HTML 5 DOCTYPE. You probably already knew both of those things. IE can be very finicky though. I haven't heard of the lower case bug. But it doesn't hurt to upper case it. I use a clip, so mine are always upper case. I have heard and observed it to be so that if there's anything, even just a comment tag before the DOCTYPE tag, it throws IE into quirks.

Another thing to consider though with DOCTYPE is what your content is and if you want it to validate. The HTML 5 DOCTYPE is very liberal in many respects, but is more limiting in some, so that's a consideration. A valid url HTML 4.01 Transitional DOCTYPE can at times be easier to validate to and will still invoke standards mode.

**traq** · 03-15-2012, 04:43 AM

I'm not sure that it is a "lowercase bug" - I haven't been able to figure out what conditions must exist to trigger it. It could have been caused by something completely unrelated. Can't reproduce.

Originally Posted by jscheuer1

... I have heard and observed it to be so that if there's anything, even just a comment tag before the DOCTYPE tag, it throws IE into quirks.

Yeah - in fact, there was (is?) a script somewhere on DD that did that on purpose, to fix some stupid thing that IE was only doing "correctly" ("as desired") in quirks mode. I don't remember what it was... It was years back, probably not even on my HD anymore

Thread: Chrome vs. IE

Thread Tools

Search Thread

Chrome vs. IE

Oh my...

Bookmarks

Bookmarks

Posting Permissions