WordPress.org

1. johntynes
   Member
   Posted 5 years ago #

   I've been using the ChinaRed theme for months. I recently upgraded to WordPress 2.04 from the last 1.x version and changed hosts.

   Now I have a very odd situation in which Chinared's main page appearance is broken, but its appearance on the comments page is fine. Previewing my post in the WordPress editor also works fine.

   Examples:

   http://www.jstynes.com/gm/2006/08/28/scott-tynes-stereo-seafood-salad/

   This is a single-post page and the ChinaRed theme is appearing correctly.

   http://www.jstynes.com/gm/

   This is a multi-post page and the ChinaRed theme is broken.

   I've never modified the ChinaRed theme except to change the images, and even there I just overwrote the existing files with new ones that had the same resolution and filetype. In trying to make this work, I have deleted the theme and reinstalled it from a freshly downloaded copy.

   Until my upgrade and host change, ChinaRed worked fine. Now it's behaving strangely. Anyone have any ideas?

2. doodlebee
   Member
   Posted 5 years ago #

   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.

3. johntynes
   Member
   Posted 5 years ago #

   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.

4. doodlebee
   Member
   Posted 5 years ago #

   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.

5. johntynes
   Member
   Posted 5 years ago #

   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!

Topic Closed

This topic has been closed to new replies.