CSS alignment problem with FireFox

[Kimpossible]

Hi,
This is my first post. I'm trying to do a web site in all css for a change, I usually do tables. I'm starting from the top of the page and formatting as I go.

The problem I'm having is with FireFox. The layout looks fine in IE.

The 3rd column is not aligning to the top of the column on Firefox. I think it has to do with the div "logobottom" because when I remove that div it aligns, but I need that image in there.

My css might be messy to a pro so I'd like help with my problem and if you have other suggestions for my css that would be great.

Here's the link: http://www.webdesignexpressions.com/pr/website/

Thanks a bunch!
Kim

[drhowarddrfine]

The problem is one of organization and trying to make some of the elements behave like a table or a sliced image, which isn't necessary using CSS. You are getting confused by IE, which has difficulty handling floats properly, but there is a bit of a mish-mash going on making it hard to keep track of what belongs where. I started to get a handle on it but it's tricky and touchy.

I noticed that if 'heading', I think, is removed, the middle column is the same height as the right. This is caused by the height set on that but it, in turn is pushed down by the logobottom image, iirc. But there begins our journey.

I noticed a lot of background images but don't see where they are or what they're used for. Also, a lot of "none" attributes but, in those cases, 'none' is the default so the property isn't needed.

I think you need to sit back and re-think this so there isn't so much a cross-over of elements and this touch of 'div-itis' you may have. You may be overcomplicating things a bit and, as stated earlier, tried to make divs act like tables which is unnecessary.

Also, never use any version of IE as your test browser. It is old, buggy and non-standard. Always use a modern browser, such as anything else, but Firefox and Opera are good.

[Kimpossible]

Thank you for your insights. I know I don't have my head around css yet. I've take several tutorials etc but it's not quite there. Do you have any good book suggestions for the "theory" side of it that you recommend. I do have a few books, including csszengarden, but haven't read them cover to cover. I've been visiting lots of sites like csszengarden as well.

I've struggled through creating a couple sites from using a css template and got it to work after much time.

On your last comment about IE, I'm not sure I understand why you suggest not testing in it since it's what the majority of people use. I use FF.

Thanks again for your time!

[Kimpossible]

Hi drhowarddrfine,
I just wanted you to know how much your direction helped me. You are a great instructor.

I'm glad you told me that I had div-itis and that I was treating it like a table, I've evaluated some more sites at csszengarden and came up with a better layout. I'm still not sure how how to get the body to stretch vertical with my text without putting in carriage returns. Any suggestions? I'm happy with the results though. Still open to suggestions if you have them.

Here's the new link:
http://www.webdesignexpressions.com/pr/website/pr1/

Thanks again!
Kim

[drhowarddrfine]

On your last comment about IE, I'm not sure I understand why you suggest not testing in it since it's what the majority of people use.

I usually say you should not "initally test" using IE. Too many times people use IE to design and code their sites but then complain other browsers don't look the same as IE. The reason for this is IE, all versions, are riddled with bugs and quirks, don't follow the standards close enough, and is nine years behind web standards in some cases. So it is always better to check your markup using a modern browser like Firefox or Opera along with the validators to make sure your code is correct. Chances are, it will then work in ALL other browsers, including IE. However, experience has shown us that IE will frequently require tweaks and hacks to make it follow the standard.

The general mantra is, "If it works in IE but not Firefox then something is laid out or coded wrong." but "if it works in Firefox but not IE, chances are IE is the problem."

Remember that <br> is for breaking lines in a paragraph of text. If you are trying to create space between elements, the best and most controllable way is with margins and padding. Then you can control the top/bottom and sides of each element from 1px to as large as you want.

Beware of IE (again). Microsoft created the now infamous "broken box model", also referred to as 'quirks mode'. MS misinterpreted how margin/padding is applied to elements and we've been paying the price for years. Using a proper doctype, as you are doing, pulls it into "standards mode" so you don't have to worry as much about it, but IE still has issues here and there, such as bullets on <li>, where they use margin for spacing while the rest of the world uses padding.

For future reference: all new pages should use the strict doctype. Transitional is for older pages where you are still using deprecated elements and are 'transitioning' it to the modern world. New pages have no need for transitional doctypes. For fun, you could change yours to strict, revalidate and see if anything gets messed up, but it may not be worth rewriting anything just for that now.

[drhowarddrfine]

Some links I really like:
No, IE didn't handle that properly.
PositionIsEverything
Webdevout

For a real eye opener, go to webdevout (above) to see how horribly IE conforms to modern standards. It's interesting to see how many sites and articles are dedicated to 'fixing' IE6 and IE7 but there are NO sites dedicated to fixing ANY other browser.

While IE is the most used browser, you will find that, those who are technically inclined and know more of the ins and outs of the web, do not use it. And, in Europe and Australia, Firefox usage is as high as 40%. For those with international users, getting it right in non-IE browsers is more important than ever.

One last point. Chris Wilson, the lead developer of IE, wrote on his blog that IE is trying to become more standards compliant. So that means it will work more and more like modern browsers of today, like FF and Opera. Many people had their sites break when IE7 came out because IE7 is more compliant than IE6. If those sites were originally created with standards compliance, much of that breakage would not have happened. A run through of a lot of posts on forums are titled "Works in IE6 but not IE7" and vice-versa. Even more interesting are the "Works in IE7 and Firefox but not IE6".

I think this post is the start of a book.

[Kimpossible]

Hi,
Somehow I didn't get notified of your post earlier than now. I appreciate you sharing all this info with me. I will try some of your suggestions and print your post for my reference file. Thanks!

Kim

Some links I really like:
No, IE didn't handle that properly.
PositionIsEverything
Webdevout

For a real eye opener, go to webdevout (above) to see how horribly IE conforms to modern standards. It's interesting to see how many sites and articles are dedicated to 'fixing' IE6 and IE7 but there are NO sites dedicated to fixing ANY other browser.

While IE is the most used browser, you will find that, those who are technically inclined and know more of the ins and outs of the web, do not use it. And, in Europe and Australia, Firefox usage is as high as 40%. For those with international users, getting it right in non-IE browsers is more important than ever.

One last point. Chris Wilson, the lead developer of IE, wrote on his blog that IE is trying to become more standards compliant. So that means it will work more and more like modern browsers of today, like FF and Opera. Many people had their sites break when IE7 came out because IE7 is more compliant than IE6. If those sites were originally created with standards compliance, much of that breakage would not have happened. A run through of a lot of posts on forums are titled "Works in IE6 but not IE7" and vice-versa. Even more interesting are the "Works in IE7 and Firefox but not IE6".

I think this post is the start of a book.