By heleng on

Hi,

I am using the Newsflash theme. I have changed the search bar by adding the following

margin-right: 150px;

This way it doesn't appear at the very edge of my page. The problem is that it appears differently when you view it in Internet Explorer than it does when viewing it in Firefox. Why is this? Its as if Firefox doesn't recognise pixels.

⋅ Categories: Drupal 6.x

Comments

tjodolv’s picture

tjodolv commented

This is probably because Internet Explorer doesn't conform with web standards, so you get some odd results depending on the browser used. I don't know the theme used, but my guess is that it has to do with how IE and Firefox render boxes with margin and padding differently.

In short:
- The HTML specification states that en element with the "width" parameter specified in CSS shall have this width applied to content only, with margin, border and padding added to this width. Firefox does this.
- Internet Explorer sets the width and includes margin, border and padding in this value.
The code below will make Firefox display a box with the content 200px wide, and then a padding and margin of 10px each on either side, to a total of 240px for the whole shebang. Internet Explorer will display a box where the content is 160px wide, with 10px + 10px margin and padding on either side, to a total of 200px for the whole shebang.
Example:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Box test</title>
	<style type="text/css" media="screen">
		#box {
			margin: 10px;
			padding: 10px;
			width: 200px;
		}
	</style>
</head>

<body>

	<div id="box">
		Hello
	</div>

</body>
</html>

Here is an explanation with images and stuff :)
http://www.addedbytes.com/css/box-model/

heleng’s picture

heleng commented

OK. Thanks for that explanation. It made sense. Is there any way I can get around this to fix the problem do you know?

tjodolv’s picture

tjodolv commented

There are plenty of solutions. One is to include a conditional stylesheet for IE. Another is to add the IE7 JavaScript. Both have their pluses and minuses. Read a bit about them and decide for yourself :)

About contidional comments:
http://www.quirksmode.org/css/condcom.html
http://www.positioniseverything.net/articles/cc-plus.html
http://en.wikipedia.org/wiki/Conditional_Comments

PS: As a rule of thumb, create HTML/CSS for the standards-compliant browsers (Firefox, Opera, Safari...) and then add IE7 or conditional comments to work around IE's quirks.