Is there any difference in the effect of CSS coding in different browser?

While working on CSS code, I noticed that the same code had a different effect. In Chrome and Opera the effect is fine, but in Firefox It's showing the image with 1px margin.

Is there any difference in the effect of CSS coding in different browser?

Good Heavens! Who would have thought!? </mode type="fake surprise">

C'mon, probably a good fifty percent of all question asked about CSS are regarding browser differences.

However -> Have a read at this

You've answered in that thread that no would notice about it, but that isn't in my case.

Look at it yourself:

In Firefox:


In Chrome:


Also, In Chrome & Firefox, the div sections weren't working until I added float: left; to one of it.

You've answered in that thread that no would notice about it, but that isn't in my case.

Why isn't it?

People don't open a page in a different browser "just to see if it is different".

Yep, I agree. But what's happening with me in Internet Explorer is really nasty..

And, Internet Explorer is _____

Few days back, I made some changes to

/* ================================================================ 
     HEADER
=================================================================== */

#header {
	width: 982px;
	height: 184px;
	color: #132C08;
	font-size: 10px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}

#header p {
	font-size: 10px;
	font-family: Verdana;
        color: #132C08;
	font-weight: bolder;
        padding: 0px;
        margin: 0px 0px 5px 0px;
}
	
.headerleft {
	width: 395px;
	float: left;
	font-size: 14px;
        clear: left;
	margin: 0px;
	padding: 0px;
	}

.headerright {
	width: 586px;
	float: right;
	margin: 0px;
	padding: 23px 0px 0px 0px;
	font-weight: bolder;
	}

.headerleft2 {
	width: 734px;
	float: left;
	font-size: 14px;
	margin: 6px 0px 0px 6px;
	padding: 0px;
	}
	
.headerleft2 a img {
	border: none;
	margin: 0px;
	padding: 0px;
	}

.headerright2 {
	width: 225px;
	float: right;
	margin: 6px 4px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
	}
	
.headerright2 a img {
	border: none;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	border: 1px solid #FFFFFF;
	}

to

/* ================================================================ 
     HEADER
=================================================================== */

#header {
	width: 982px;
	height: 184px;
	color: #132C08;
	font-size: 10px;
	overflow: hidden;
	margin: 0;
	padding: 0px;
        align:center;
	}

#header p {
	font-size: 10px;
	font-family: Verdana;
        color: #132C08;
	font-weight: bolder;
        padding: 0px;
        margin: 0px 0px 5px 0px;
}
	
.headerLeft {
	width: 395px;
	float: left;
	font-size: 14px;
        clear: left;
	margin: 0px;
	padding: 0px;
	}

.headerCenter {
	width: 275px;
	float: left;
	margin: 0px;
	padding: 25px 0px 0px 0px;
	font-weight: bolder;
	}

.headerRight {
        background: #FFFFFF url(images/searchBKG.png) no-repeat;
	width: 301px;
	float: right;
        font-size: 11px;
        font-family: "Tahoma", "Geneva", sans-serif
        color: #c9d7ab;
        padding: 5px 0px 5px 3px;
        margin: 28px 0px 10px 0px;  
	}

.headerleft2 {
	width: 734px;
	float: left;
	font-size: 14px;
	margin: 2px 0px 0px 6px;
	padding: 0px;
	}
	
.headerleft2 a img {
	border: none;
	margin: 0px;
	padding: 0px;
	}

.headerright2 {
	width: 225px;
	float: right;
	margin: 2px 4px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
	}
	
.headerright2 a img {
	border: none;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	border: 1px solid #FFFFFF;
	}

It's aligned the header to left. Not only the header, but the whole pages. Only in IE; working fine in all other browsers. FF, Chrome and Opera

Use a valid DTD, don't use deprecated align attributes and properties.

And -> Stickied thread

And if we don't get a link to the page how can we find out what the problem is?

I was already going through it , but Thnx for the info.

It's localhost. Can I share screenshots here?

What does DTD stand for?

DTD = Document Type Declaration, or DOCTYPE.

For the most part I use a HTML 5 DOCTYPE with XHTML strict syntax, also valid under that declaration.

And as Chris said, don't use align attributes in your HTML elements; use CSS for your styling and HTML solely for markup. The overall intent of that separation when it was made the standard is to keep your code cleaner, though there are other reasons as well.

tim

Finally solved! I'm not satisfied with it !

Changed

margin: 0px auto;

to

margin: 0px 0 0 150px;

After going through this..

Is there any other way to do it? This is only in IE 9, I don't know how to check for other IEs.

IE Tester - http://www.my-debugbar.com/wiki/IETester/HomePage
Allows you to see what's up in IE 5.5 - 9