Thread

Hello.

I just updated my homepage… it looks great in FireFox v.3 and Safari v.3.1 but not in IE v.6.02.  This is my first time dabbling in CSS, and I completely forgot to test it in IE, and only found out about my error from another reader.

All of my info is displaying, just not correctly.  I assume it has to do with my divs and such, but I’m wondering if someone can give me the low-down on how FF/Safari differ from IE and what I may try.

Thanks so much!
northernwoodlands.org

Hi - nice looking site coming together there. I don’t *think* the site is working properly in Firefox 2 but that’s based on how I think it should be looking. I’m guessing ‘the outside story’ should be appearing to the right of ‘feature articles’, is that right?

If so, you seem to have a leftcolumn and a rightcolumn, but the rightcolumn is inside the leftcolumn div. I would think you’d need to move that outside, so you can float the two side-by-side, but again that’s based on how I think it should look.

If you can post a screenshot of what you consider correct, that’d be handy!

I was messing around with the css to get it to display a little more closely in IE.  Now I have changed it back.  Should look a little different.

Would

display: inline

help me to solve this?  If so, where would I apply it?  Is there any documentation on how to use inline styles to help to guide me?

display:inline isn’t a fix for anything as it stands, it’s just another rule. You really need to grab a book on CSS and do some reading if I’m quite honest, at least for an understanding of the fundamentals (floats, inline/block elements, box models etc). CSS Mastery is a good choice.

Your problem is more or less certainly to be with widths and margin/padding. A quick scan shows you have leftcolumn set to a width of 50%, and the right column has a left-margin of 53%. That’s 103%, which doesn’t exist. Personally I’d advise you start by removing any percentage widths and work them out to the pixel as that makes it a LOT easier to debug.

Andy, thanks for the pointer of changing percentages to pixels and taking another look at margins/padding. 

I’m sure that pasting together lots of different code that I’ve gleamed from random sites and then tinker with until I achieve the desired result isn’t the best way to learn CSS.  And I’m certain that the code that I produce is very ugly!  But thank goodness for our preproduction site, plenty of backups and the kindness of strangers like yourself! 

Thanks again.  Let’s keep our fingers crossed that I figure out why IE hates on my code so much.
<3 Courtney

All fixed.  Seems like IE wanted extra padding.  Andy, you were right on the money!

Good work! I usually draw the box layout on paper along with dimensions (margin/padding/border) and keep it as a reference per project. It works for me anyway!