Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Twenty Eleven footer not displaying styles correctly in FF Chrome and Safari

  1. moonlakeshow
    Member

    Surprisingly, I checked it on IE today at work and the footer looks fine. In fact, the whole template looks better in IE. How in the world does that happen?

    I am editing the CSS, but I haven't touched the footer. How can I fix this?

    The blog I need help with is moonlakeshow.wordpress.com.

  2. devblog
    Member

    Could you post a screenshot of how's supposed to look?

  3. moonlakeshow
    Member

    I can really only guess at how it is supposed to look based on the demo of the template and how my site looks in IE (which most closely resembles the demo and simply looks more correct). It's like the CSS floats aren't rendering in Chrome and FF but I can't figure out why.

    Here's how it looks in IE at this very instant:
    http://www.flickr.com/photos/nophotosplease/5835740033/

    I'd rather have the 3-column footer but I changed it to two last night to see if that would fix the problem. Obviously it didn't.

  4. devblog
    Member

    There's a lot going on with your CSS... It'll take me some time to figure out what's going on, and right now I don't have the time.

    You are repeating these selectors, and I don't understand why

    .singular .entry-header,.singular .entry-content,.singular footer.entry-meta,.singular #comments-title {
width:68.9%;
margin:0 auto;
}

.one-column.singular .entry-header,.one-column.singular .entry-content,.one-column.singular footer.entry-meta,.one-column.singular #comments-title {
width:100%;
}

.singular .entry-header,.singular .entry-content,.singular footer.entry-meta,.singular #comments-title {
width:100%;
}

.singular .entry-header,.singular .entry-content,.singular footer.entry-meta,.singular #comments-title {
width:100%;
margin:0;
}

    If you're repeating the above selectors, it's probably that others are being repeated as well.

    Also, if you're making a few changes to the original CSS, you don't need to paste the whole CSS and select the "start from scratch" radio button (unless you want to use your themes markup as a "blank canvas").

    Again, if you're making small changes to the original CSS (e. g. changing background colors) then I'd recommend you to reset the theme (delete entire CSS code in the CSS Editor and check the "add to current CSS" radio button) then, add ONLY those changes to the Editor (leaving the "add to current CSS" radio button checked). This article might tell you the benefits of why the CSS editor should only have your changes/additions to the CSS:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  5. moonlakeshow
    Member

    If you look at the original CSS for Twenty Eleven, you'll see that those three selectors are repeated there too. With the same values.

    So, if that's a problem, it's not caused by me. What now? The demo appears to work fine in Chrome, etc. It must be something else.

  6. devblog
    Member

    So, if that's a problem, it's not caused by me. What now?

    Like I said, reset the theme, save. If the footer looks good, then you can take it from there and start debugging. Add _your_ changes to the Editor selector by selector. If the footer gets messed up after adding one of your changes, then that selector has bad code which you could post here to figure out what's wrong with it.

    However, if after resetting the theme (without your changes), your footer still looks messed up, then you should contact support

    http://en.support.wordpress.com/contact/

    Now, if the original CSS was written like that, the wp folks should know better... Anyway, try my suggestions, see what happens.

  7. moonlakeshow
    Member

    Awesome, thanks - that did work. I think I finally got the idea of "add this" through my thick skull. I thought you still had to keep the original CSS in the editor. I'm used to the uber flexibility of the WordPress installed version, so deleting what was in that editor did not even cross my mind since that would majorly screw up a WordPress install.

    I didn't want to mention how messy I thought the Twenty Eleven CSS is since I thought you worked for WP. But now I feel safe mentioning it. :)

    Thanks again!

  8. devblog
    Member

    Glad it worked.

    I didn't want to mention how messy I thought the Twenty Eleven CSS is since I thought you worked for WP. But now I feel safe mentioning it. :)

    I see what you mean, but it's true, though... the code _is_ messy, and they should take the time to clean it up.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags