Alignment Problems with CSS

Hello - I'm starting to get familiar with CSS, and I'm stumped on a site design. The site is http://www.thekennylawfirm.com/demo2.

I've used CSS to create a black inner area that runs from top to bottom of the page. In Internet Explorer, the black inner area appears properly. However, when viewing the site in Firefox, the black inner area doesn't appear to be as wide as the area above it.

I'm not sure if I'm missing something simple, or if my overall logic is defunct. Thanks for any advice!

I'm actually suffering from the same problem myself in that a pair of input fields are appearring at different distances across the page. Firefox and IE7 unfortunately render CSS instructions differently so you're bound to get anomalies like that.

What I am doing is preparing the page so it looks correct in Firefox, then using a browser detect to check for IE (I think the Firefox version will appear identical in Opera and Safari but haven't checked yet) and loading an IE specific stylesheet.

Someone else may have a better way but that's how I plan to tackle the problem if I can fix up a few other more important things first.

Hope that helps.

You have some ID's used multiple times, you can only use and ID once per page. Problem is IE will render bad code FF will not. So in this case FF is rendering the page correctly while IE is doing so incorrectly. Check your source, clean up any errors and see if that doesn't fix it.

__________________

Thanks, moojoo. I found duplicative "contentarea" and "mainarea" id tags, and named the duplicates "contentarea2" and "mainarea2". I also copied the CSS and duplicated that with the "2" also. Didn't fix the problem. Maybe I still have something duplicated somewhere?

Thanks, Crow. Sounds like a good plan, but I can't figure out what is actually screwing up the code in FF, so I can't narrow down the problem.

A good rule of thumb, is if it breaks in FF but not in IE, its probably mixed up code that IE is happy to interpret but FF isn't. Best thing you can do is run your HTML and CSS files through the W3C validator (http://jigsaw.w3.org/css-validator/) and fix any issues there. ID's used twice would have been picked up straight away.

You are missing a closing div tag at the end, right before the /body tag. Its best to keep your code indented propperly so that you can always debug this kind of thing. Also, the validator would have found this problem for you

You would of been better just changing them to classes, you can call a class multiple times per page

like so...

Code: Select all

<div class="contentarea"><p>content</p></div>

and for the css, just change the #contentarea to .contentarea

That saves duplicating information, which saves on file size which will save you a fair bit of bandwidth (which you pay for).