CSS displays incorrectly in Firefox but correctly in IE

Hey everyone, I know I haven't really posted in awhile and it kind of sucks that it has to be me begging for help rather than releasing something neat. However if I can get this panned out that would be sweet. Okay...

I've been working on version three of my website lately and being as I'm practically illiterate in the field of markup language I thought trying to do my site in css instead of nested tables would make it more efficient and make the web nerds happy. The past few nights I've read up on css learning one aspect and getting frustrated and learning another one the next night blah blah (don't need a life story)

Basically according to the w3 verification thingy my html is "perfect" and my css has three warnings and they're minor dumb ones like my links and hover links have a color but no background color. Stuff like that. When I open the page in Internet Explorer the page displays properly but in Firefox it's ommitting the content section of my page and it's messed up. The way the page is layed out is very basic, three rows, and the middle has three columns. In firefox the middle columns are together on the left side. My images also used to have gaps between them if they were stacked vertically, even with line breaks (in firefox) but those went away when i changed the doctype thingy or whatever. Anyway:

Here's the HTML:

*removed until potential further issue occurs*

And the CSS:

*removed until potential further issue occurs*

Hopefully if I can overcome this hurdle, I can get lovely third version online! Any help would be greatly appreciated.

#419514

Basically according to the w3 verification thingy my html is "perfect" and my css has three warnings and they're minor dumb ones like my links and hover links have a color but no background color.

Fix the incorrect CSS, you may think it's dumb, but at least try it and see if FF displays it then. Firefox is very particular about displaying correct information, whereas IE lets you use shortcuts.

#419530

Even with the three warning in the CSS taken care of and verified with "no errors" the page is still displaying the same way in firefox. Two of the three warnings are for link text and I don't want them to have a background color in case I have one over a subtle background image, for example. The third warning was for the bottom div with the copyright disclaimer so that can have a background color, that's fine.

So only two warnings for link background colors even though they're set to "transparent."

The div including the banner is good, and the bottom image is good, the bug appears to be the "middle" div containing the three inlined columns "left" "right" and "content." They're all squished together on the left side in firefox but displayed properly in IE.

Edit: The same error that happens in firefox also occurs in safari.

Edit 2: Uhh yeah, after some vigorous trial and error, I managed to fix the missing content issue in firefox by setting the three parts of it with "absolute" positioning and just accomodated the margin for each section from the left edge of the page. Everything looks good now. If I have anymore problems, I'll be sure to post away, hopefully this thread can help anyone else with the same problem.

#419582

What you think of as "an error" is probably the correct interpretation--Internet Explorer is interpreting you wrongly to produce the result you want, and your code, rendered correctly, won't show what you want.

I've run into this before, usually on layout issues. Mostly, this is due to the fact that margins and paddings etc. are calculated differently (search for "box model IE").

-NC

#419775