IE, Firefox difference -- igophoto Life Hosting

IE, Firefox difference

< prev

next >

IE, Firefox difference -- Wed, Apr 13 2005 09:26PM

<html><body>
<div style="position:absolute;left:10;top:10;width:100;height:20;border:1px solid green;background-color:#d0d0f0">test</div>
<div style="position:absolute;left:10;top:10;width:200;height:200;border:9px solid blue;"></div>
<div style="position:absolute;left:210;top:210;width:100;height:20;border:1px solid green;background-color:#d0d0f0">test</div>
<div style="position:absolute;left:210;top:210;width:200;height:200;border:1px solid red;"></div>
</body></html>

Apparently in Firefox borders make the div bigger?, IE puts them on the inside, which I prefer. Ugh...
I'm sure there's a paramter to set here, but a walk through the Firefox DOM Inspector reveals no default params and I'm too old and tired for this.

Posted By

Mark

Posted In

Code Samples

Comments

Firefox is following the W3C spec here. Looked around a bit and came up with this. It looks like if there's no doctype on the document, IE goes into "Quirks mode" which does stuff like put the borders on the inside of the div instead of the outside. I tried adding a doctype to that sample though, and both IE and firefox stopped rendering it at all, so who knows...

Or, you can tell firefox to stop following the standard like this:

<html><body>
<div style="position:absolute;left:10;top:10;width:100;height:20;border:1px solid green;background-color:#d0d0f0">test</div>
<div style="position:absolute;left:10;top:10;width:200;height:200;border:9px solid blue;-moz-box-sizing: border-box"></div>
<div style="position:absolute;left:210;top:210;width:100;height:20;border:1px solid green;background-color:#d0d0f0">test</div>
<div style="position:absolute;left:210;top:210;width:200;height:200;border:1px solid red;-moz-box-sizing: border-box"></div>
</body></html>

- rich, Thu, Apr 14 2005 09:09AM

hey rich - thanks man - you're the greatest!

that link members only ug. a mildly interesting one http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

writing a page that looks the same in all browsers. In point of fact, it's impossible. well, we'll see heh heh.

Internet Explorer 6.0 adds an additional space (like a <br>) surrounding <div> tags, unless you write the contents of the div all on one (long) line. I've already hit this one, first time i've seen it written up. I have a fixup function that shortens the div heights after page rendering... fun fun fun [edit: i should add, have a form in your div and you get the br regardless of all-in-one-line code]

- Mark, Thu, Apr 14 2005 09:47AM edited Thu, Apr 14 2005 09:53AM

That's odd... I found that link randomly off of google, didn't have to sign up or anything... maybe it recognized the CA proxy IP...

- rich, Thu, Apr 14 2005 10:20AM

Add a comment

igophoto home [bugs/comments]