IE vs Firefox Pixel Difference?

Do they measure from different points or are they a different size?

[graphicsguy948]

I'm having a hard time finding information on this problem...difficult to word the question in a short form.

Here's the situation:

I am developing a website for the company I work for.

It is a table-based site since I created an image frame in Fireworks. I am using <div> layers inside of the table and CSS to organize them.

My header and footer <div> layers don't space out the same in Firefox compared to IE. For instance, I specify a 30 pixel margin-left for the footer text and it is far further left in IE than in Firefox (literally a 1/2" difference on my 1280x1024 displays).

When I do not specify a margin at all the text appears in the same position in both browsers, but slightly off my graphical elements so it is not acceptable.

I am wondering if this is due to where IE and Firefox measure their margins from or if it is due to how they handle <div> margins.

Any help would be appreciated.

[Milamber]

I could be wrong but I think your issue has to do with IE assuming there's padding. Try forcing it to 0 and see if that fixes it.

[graphicsguy948]

Thanks for replying...

Hmmm, just tried it, no luck...unless I didn't do it right.

I tried adding a line:

padding: 0px 0px 0px 0px;

Didn't do anything so I tried:

padding-left: 0;
padding-right: 0;
(etc.)

Didn't do anything either.

I guess it's no major issue since I can pick a "middle ground", but it's bugging me...

[Xapti]

Padding on all sides to be 0 can be done by just saying padding:0;

My guess is IE may be in quirks mode and/or is experiencing a rendering bug.

Make sure you have a proper doctype specified at the top of your page.

Other than that, you'll probably have to post your relevant HTML and CSS, since you may have made a mistake somewhere.

[graphicsguy948]

hahaha...well, here's my "beginner" status showing...

Well, I've never used the "doctype" because I didn't know what it was. I always delete the starting text whenever I open a new Dreamweaver document and basically just use Dreamweaver as a raw text editor and site organization.

So, I have now done a little research on doctypes...

I added a doctype, the site still works in FireFox, but renders completely wrong in IE. Anyway, I'll play with it a little more and find a solution.

[graphicsguy948]

Fixed my problem. Played around with a blank document for a bit. Found out it had to do with the "float" commands I had placed in my CSS file for the <div> ids.

IE6 seems to render the div, float it to the specified margin, and then margins what is inside the div as well.

I changed the "margin" settings to "padding" and it now renders fine.

[mattclayb]

the element with your div and the div will be inheriting the margin.

I always start my css documents wih * {padding:0; margin:0;} this resets padding and margin on all elements to 0, and then you can control it individually for each tag. - Bear in mind this will reset 'in built' margins to elements such as <h> tags, but I like to have the control.

Margins 'add pixels to the outside of elements on top of the element size'.

And padding 'adds pixels to the inside of elements'.

You should also really look at structuring your site with Div's rather than tables with div's inside. you will get a much more predictable output cross browsers, and cleaner code.

[SuzyUK]

IE6 seems to render the div, float it to the specified margin, and then margins what is inside the div as well.

aahh.. that sounds to me like the IE "Double margin float bug" if it is, adding display: inline to the floated div will fix it - the margin only render once

[graphicsguy948]

"double margin float bug"?

Oh sure...NOW I find out what I should have searched for! haha

You should also really look at structuring your site with Div's rather than tables with div's inside. you will get a much more predictable output cross browsers, and cleaner code.

Yeah, I thought of that AFTER I was half-way through the project. I didn't do too bad, though. It's only one table and my <div> layers are mostly contained in the center <td> (two small exceptions).

Thanks for the replies!