This could be part of the problem.
And upon inital “peekage” of your site, I can see two possibilities for your issues:
1) Your images are set wider than your content div allows, therefore the sidebar is being pushed down. I bet if you reduced the size of your images, the sidebar would pop back into place.
2) You’re missing a clearing element – that’s why the background isn’t coming down. Perhaps you accidentally deleted it when you moved to the new server, or perhaps you messed with something in the CSS file (or something got correupted), but you need to have a clearing element at the bottom to pull the background down to the bottom.
Strange. I’m using the chinared theme’s default style.css. I reuploaded it just now to verify.
Thanks for pointing out the CSS validation problem. I’ve fixed the missing semicolons after the color attributes and the stylesheet now validates as css without errors. That didn’t change the site’s appearance.
The image width is a good suggestion. I’m skeptical of it being the issue only because in all cases, the text is wider than any of the images.
I’m not sure what you mean by a clearing element. I’ve used CSS a fair amount but am not that sophisticated with it.
I took a closer look, and I think it’s your images.
You have them set up like so:
<div align="center">
<p>images</p>
<p>text</p>
<div align="center">
<p>images</p>
<p>text</p>
<div align="center">...
and so on. Youre not closing any of thoe divs until the nd – where you’ve got a *whole bunch* of closing divs (one of them is self-closing as well).
So, not only do you have all of those divs nested into each other (and if your default div setting is to have any padding at all) you’re throwing the width out of whatck on padding/margins alone. Then there’s the fact that you may have one (or more) extra closing div tags, which would close out a div you don’t *want* to be closed.
Also, the “align” attribute is deprecated and usually doesn’t validate (I can’t remember if it does or not in XHTML Transitional). Your setup should be more like this:
<img class="centered"><br />
text here
Get rid of all of those divs and the nesting of them. (You already have a class in your stylesheet for centering images, so you won’t even have to touch your CSS)
As for a clearing element – when you have containers that are floated next to each other – as your content and sidebar, for example – you have to have something that clears the floats. If you don’t, your wrapping element will snap back up behind them to the last thing that *isn’t* floated (or positioned absolutely) – in your case, the header. If you don’t clear floats, then backgrounds tend to disappear. So you have to either create a clearing div (div.clear {clear:both;}) or apply some other method of clearing the floats to pull the background down.
Though, after closer inspection, I believe it’s the “nested image” thing you have going on that’s doing it.
Thanks! I’ll try that. I’m using the WYSIWYG editor and I’m not sure why it ended up with the DIV’s screwed up, but I bet fixing it will solve my problem. I really appreciate you taking the time to sort me out!
