I am new to CSS.......aren't most who ask questions ? Well, I like it, I like what it does, I like how it looks...but it can drive a person CRAZY.
I want my site, hazlett.net to be fluid, that is, I want it to look similar when the window is downsized, or if a person surfs to it using a different browser setting.
Now..it looks fine using MY settings, but when I downsize the window the right box overlaps the center box.
How to cure that ????
Widths. I'll look into it soon, shouldn't be too much trouble.
Flicking through the HTML though, I noticed a number of <HTML> </HTML> tags, and styles in random places! It's probably worth regrouping your HTML a bit, so it looks like:
<html> <head> ... <style> ...all styles here... </style> ... </head> <body> ...the page content here... </body> </html>
IE is quite resiliant, but I bet there are a few browsers that would stop rendering your page on the first closed HTML tag.
But yeah I'll get back to you on the widths.
Extraneous HTML Tags
I did have a few HTML tags that were not needed....something to be aware of when using SSI, I suppose.
Waiting for your word on widths.....thanks.....
The table that contains the stories (the grey ones) is too large. It's set to 55% - but when the left/right divs take up more than 45%, it stays at 55% and wraps underneath.
You could change all this around by using a DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
which should be the FIRST thing in your HTML file. Then you need to change the width of the tables to 95% or something to make them larger.
But in older browsers (eg IE <5.5) it won't cure it since they don't read the doctypes. It then depends on how you want it layed out - I'd suggest removing the width from each table, and giving a margin-left/right of a few px - the table should then resize nicely with the page.
Hope that helps!
Thanks for the help...it is much better. Now, if you don't mind helping some more, how do I make the center content area wider ? I have tried tweaking everything I can think of.
Hmm... The only way you could do that is to reduce the width of the left and right sidebars (#leftcontent, #rightcontent) and then touching up the margin-left and margin-right on the #centercontent element.
Couple of other quick things - you don't need the HTML tags in your CSS file; and it might be worth checking out all the double-quotes in your HTML - some are opened and never closed, which might confuse some browsers!
Thanks for all your help, dJomp.
I think I have it about where I want it now......until I learn of something else to play with.