Quote:
|
My husband thinks that since we are going from tables to CSS that I shouldn't be so concerned with the width of my areas being EXACTLY like the old site.
|
Good advice too. If you try to get pixel perfection across browsers, you'll drive yourself nuts. You can get very close, but there will always be slight differences due to the nature of all the browsers out there.
It looks fairly good in Firefox, with a few minor problems. IE6 however, is barfing it up - as usual
.
A couple of comments:
Your text should be inside <p></p> or headings, you should never have text just sitting on a page.
If you do that, you'll be able to control spacing and you won't need all those <br> tags everywhere.
For your quote on the side, it might be best to stick it in it's own <div> and put it where you need it (and inside a paragraph).
Set your #wrapper to position:relative - it's often the only positioning you'll need and it's useful if you do need to use positioning for elements inside your #wrapper. They will be positioned relative to the #wrapper and not the body.
Get rid of the position:absolute on your logo box, use the normal document flow and learn to use floats. Absolute positioning can cause a LOT of headaches. I'd get rid of all that position:absolute, it's just not necessary.
IE6 (and below) does NOT support min/max width/height, so you'll have to feed it a fixed height (not recommended) or let it flow with it's content. Use conditional comments and a separate 'fixes' only css file to target IE's bad behavior.
The position:relative on the #bottom probably isn't necessary either.
Put your navigation in an unordered list, it's semantically correct and you'll have a bit more control over how it's displayed.
I would say the other thing you need to do is re-think the way you've got it laid out. This is a learning process when you go from tables to table-less layouts, you have to get away from that tables-slicing mindset.
On your layout, I would make that entire top section, the logo and your banner, a single 'slice', and put it at the top as a "header" div. It would look something like this:
wrapper
header (contain logo and banner, probably float the logo left)
sidebar (left column)
content
footer
/wrapper
If you use floats, you must also CLEAR your floats - some info here on float layouts:
http://css-discuss.incutio.com/?page=FloatLayouts
Clearing floats:
http://css-discuss.incutio.com/?page=ClearingSpace
