Firefox and IE Compatability

Displaying a basic div with a background colour and positioning it!

Page 1 of 1

4 Replies - 1605 Views - Last Post: 02 June 2008 - 10:07 PM

#1 ShinX   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 14-November 07

Firefox and IE Compatability

Posted 26 May 2008 - 05:56 PM

Ok so imagine I have something like this:
<html>
<head>
call css...
</head>
<body>

<div id="navigationBackground"> </div>

</body>
</html>



and this being the css code linked to it:

#navigationBackground {
	background: #333333;
	margin-left: 32px;
	margin-top: 50px;
	width: 690px;
	height: 20px;
}


Why is it that in IE 7 and Firefox the div will be displayed in different locations, I am sure its because browsers read my css code differently and behave different just wondering whether there is a fix for this? Or better said the right way to code for this?

Is This A Good Question/Topic? 0
  • +

Replies To: Firefox and IE Compatability

#2 Sandi   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: Firefox and IE Compatability

Posted 26 May 2008 - 09:56 PM

In many cases IE has it's own standards instead of following the W3C standards. But as it is the most popular browser around, complaining about it doesn't do much good.

But knowing the differences can help avoid problems, and using a different tact to get the same result will often work. In older browsers IE looks at box models differently than what is layed out in the standards. Microsoft has corrected this problem in IE6 and later browser version, but if your using a doctype with backwards compatibility this correction is eliminated.

You can use a DOCTYPE in the "standards mode" instead of quirks mode to make IE6&7 follow the standards, but then you loose backwards compatibility. Perhaps your best bet is to read a collection of articles at Position Is Everything called "Internet Explorer vs. the Standards." Knowing what your up against will make the job easier.
Was This Post Helpful? 0
  • +
  • -

#3 Winstinology   User is offline

  • I'm pretty good with a laser mouse..
  • member icon

Reputation: 7
  • View blog
  • Posts: 958
  • Joined: 08-May 08

Re: Firefox and IE Compatability

Posted 27 May 2008 - 01:55 PM

I have struggled with the differences between IE and FireFox extensively and it really is a shot in the dark until IE conforms to the W3C. All I can tell you about what I did to cope with it is to do the best you can, sacrifice a little bit. Try leaving a bit of air around whatever it is you are trying to position, i found that to help a little bit. Also, be careful of the heading level differences between IE and FireFox. Those annoy me more than the positioning does. Quite frustrating I'll tell ya..
Was This Post Helpful? 0
  • +
  • -

#4 elDeuce   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 28-May 08

Re: Firefox and IE Compatability

Posted 28 May 2008 - 11:00 AM

Also, on DIVs Firefox and IE use either padding or margin but not both and neither use the same. I can't remember off hand which one uses which, but trying zeroing out both padding and margin and then set one or the other and you should notice that things tend to fall in line a bit better.
Was This Post Helpful? 0
  • +
  • -

#5 didgy58   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 246
  • Joined: 23-October 07

Re: Firefox and IE Compatability

Posted 02 June 2008 - 10:07 PM

i remember having trouble with a similar type of thing and was recommended using a css reset file, if you take a look on the web you can find a few out there, i believe it helped with neutralizing the default styles of most/all elements in independant browsers so that they would look the same in each browser and then you can work on the paddings and margins yourself to get the look that you require. quote me if im wrong with the use of css reset file. eric meyer implementation of it seems to be one of the best and commonly used out there and elements can be added or taken away as needed

http://meyerweb.com/...reset-reloaded/

Dan.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1