DIV tags, FireFox vs. IE..off by 50-100px?

Live forum: http://forum.freeipodguide.com/viewtopic.php?t=61008

jadem

30-04-2007 10:45:01

I'm working with div tags and the page layout is great in FF, but everything is shifted to the left by 50-100px in IE. I cannot add a doctype declaration because it's for Neopets (and their filter flags it as an HTML comment), and I've made the margins, padding, and border all 0 and still no go.

The position is relative, because with absolute, I would resize my browser and the text would move. lisighli

Anyone willing to help? I can't link to a page because it's all private on Neopets.

I blame all of this on Neopets, btw. The page was PERFECT but they had to go and change their entire site layout and design. P

TFOAF

30-04-2007 10:50:08

Some tags don't work the same way in certain browsers. Try using the SPAN tag, however...I don't find manually positioning where an object is to be good. Browsers don't interpret the positions the same way, therefore they appear off than what they are supposed to look like.

jadem

30-04-2007 11:21:45

[quote82d5be3e64="TFOAF"]Some tags don't work the same way in certain browsers. Try using the SPAN tag, however...I don't find manually positioning where an object is to be good. Browsers don't interpret the positions the same way, therefore they appear off than what they are supposed to look like.[/quote82d5be3e64]

The span tags made it worse, unless I'm not using them right. I was using div because the text needs to be perfectly placed in relation to the background image. /

dmorris68

30-04-2007 12:00:56

The difference is due to the broken box model in IE. IE includes padding and thus calculates element width differently than the W3C standard (go figure).

http//en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

If you can't use the DTD (which should fix the problem in IE6 & IE7), then you'll have to hack CSS to set a different position for IE. There are several techniques to do so, including conditional IE comments and box model hacks.[=http//tantek.com/CSS/Examples/boxmodelhack.html]box model hacks.

jadem

30-04-2007 12:08:03

[quoteb1f4e21c82="dmorris68"]The difference is due to the broken box model in IE. IE includes padding and thus calculates element width differently than the W3C standard (go figure).

http//en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

If you can't use the DTD (which should fix the problem in IE6 & IE7), then you'll have to hack CSS to set a different position for IE. There are several techniques to do so, including conditional IE comments and box model hacks.[=http//tantek.com/CSS/Examples/boxmodelhack.html]box model hacks.[/quoteb1f4e21c82]

Well, the reason I can't use DTD is because it blocks comments, so the conditional statements are out. I'm looking into the box model hacks. D Thanks!