Support » Fixing WordPress » CSS errors, only happens in WordPress

  • Hello,

    To keep you from having to read through this whole thing, I’ll give you the Executive Summary:

    • CSS is messed up.
    • Two-column float. Roughly half the time, the right column drops below the left column.
    • This ONLY happens when the page is generated by WordPress, and ONLY in Firefox/Mozilla. I’ve tried TONS of things to fix it (scroll down to the bulleted list below for most of them), nothing has worked (besides using a table).
    • Redundant but important: I’ve tried this in several browsers on several platforms. Again, only happens with the WP & Firefox/Mozilla combination.

    I think that sums it up. If you’re bored, read below for the details. I know, I know, way too long winded. Sorry ’bout that.

    I’ve run into a strange problem. Please read through. I think I’ve covered all the bases, and I’ll try and keep it concise. [Edit: That didn’t work.] I’m just hoping someone has had a similar experience so I won’t continue to think I’m going crazy.

    I’ve run into some CSS errors with my site. The strange thing is that they happen ONLY in Firefox/Mozilla, and ONLY when the page is generated by WordPress.

    I have two columns. They are side by side, and the layout is pure CSS (except for the search input box/button). The columns are given a float:left; attribute to allow them to be side by side. The layout works perfectly in all tests, in all browsers, as static pages. Okay, you ready? Here’s the doosie.

    Once the layout was converted into a WordPress theme the right column in the single & archive pages jumps below the left column, creating a very long, single column with a huge space on the right. But wait, there’s a punch line. It only happens about 40% of the time on the archive pages, and about 5%-10% on the single pages. So far, I’m thinking it’s a bad combination between the browser and something that’s happening on the server.

    A part time guy at work came over after hours last week and tried to help me narrow down the problem. He’s a freaking brilliant programmer for Dana Farber Cancer Research Institute, so I knew if my hunch was right he’d be able to help. We narrowed it down to a “racing” issue. (I’d never heard that term before, so if you haven’t here’s an amateur’s take on it: it has to do with the order of the different elements of the page as they get to your browser; they’re all “racing” to get there, so their arrival comes at different times…but only by micromilliminisupersmall seconds. But apparently, it makes a difference.)

    I noticed this the first time I ran the theme in WordPress, and after spending way too much time trying to fix it I just finished the build to come back to it later. Now I’m spending a little bit of time every day seeing if there’s something I’ve forgotten (I’ve been doing it this way for about a week now). So, unfortunately, I’m stuck having to use a single table in my layout (*GASP!*) to keep the columns where they should be. At least for now, that’s the way it’ll stay.

    Here’s a very unorganized, unordered list of things I’ve tried and/or figured out. I’ve tried this on every browser on every platform I can get my hands on, but unless otherwise noted all items below have to do with the Firefox/Mozilla/WordPress combination. Sorry for the mess:

    • Layout works fine as a static HTML page, and also as a PHP page served directly from Apache (tested on a Linux box [dedicated] & PHPDev here at home)
    • When the layout is pushed through WordPress, it immediately starts happening. Tried it both ways as stated above.
    • I’ve tried every single CSS variation I can think of to solve the problem, but nothing has worked so far. I’ve even tried taking out each and every part of the two columns, both one-by-one and in every combination I could figure out. Floats, display types, the works. No difference; still happens.
    • I’ve tried both linking and importing the CSS file, but no go on that one, either. Still happens both ways.
    • I’ve tried taking the code from the sidebar and putting it directly into the template, replacing the WordPress include of the page. Still happens. (The column in single.php isn’t included with the sidebar, though, so I didn’t think it was that.)
    • I’ve tried floating each column both left and right, and every combination in between. Didn’t work.
    • I rebuilt all the code, piece by piece, without looking at the old code for reference. Found a few mistakes, but not anything that fixed the problem.
    • I smoked a pack and a half of cigarettes one day trying to figure it out. That didn’t even help a smidgin.
    • I’ve tried moving the CSS code where it happens to the top of the CSS file, the the bottom of the CSS file, to the middle of the CSS file. I’ve even tried moving the location of the CSS link (in header.php). Nope, still smacking me in the face.
    • I even tried getting drunk to fix it. I think you can guess what happened then.
    • I’ll come back and list more later when I think of what else I did; I’m thinking I’ve forgotten at least half of what I’ve tried so far.

    So, am I crazy? Does WordPress move through the code and push it to Apache in a strange order? Am I just not seeing something that’s right in front of my face because I’ve been trying to nail down this problem for so long? Are the WordPress Gods hating me? Did I take an anti-open source job in a past life?

    I’m hoping someone will just call me a dunce and tell me I’ve done something pathetically wrong (with an explanation to go with the backhand, please). Below is an older version of the theme with the offending code. If you look inside, please remember that this is unfinished and messy…it’s just the way I work. 🙂 Go to an archive page and refresh refresh refresh in Firefox. It’ll happen…

    Please let me know if you’ve seen anything even remotely like this yourself. I’ve searched the forums and the codex, but it’s tough searching for something when you don’t know what it’s called.

    P.S. I even spellchecked!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Dude, I’d like to help but honestly, there is no way I’m going to read all that. Just being honest. Where is the executive summary?

    Sorry, that was far too long-winded. I added the “Executive Summary” to the top, but here it is again for good measure:

    • CSS is messed up.
    • Two-column float. Roughly half the time, the right column drops below the left column.
    • This ONLY happens when the page is generated by WordPress, and ONLY in Firefox/Mozilla. I’ve tried TONS of things to fix it (scroll up to the bulleted list for most of them), nothing has worked (besides using a table).
    • Redundant but important: I’ve tried this in several browsers on several platforms. Again, only happens with the WP & Firefox/Mozilla combination.

    Sorry again…and thanks for trying to help. 🙂

    Moderator James Huff


    Bringing your XHTML and CSS up to code may fix the problem. At the very least, it will make it far easier to troubleshoot.

    More than likely, the problem you’re seeing is related to the error that the CSS validator points out.


    Nope, I got it all to validate (it had more to do with the way I was posting the <!--more--> link when writing the posts. Fixing the CSS didn’t work either.

    This is one of the URLs that does it (but not as often now as it used to):
    validated HTML:
    Validated CSS:

    Also, it’s working now in Firefox on a Mac. (?) No idea what I did though. FF on a PC? Still done broked.


    Thanks for the summary! Unfortuneatly, I have no clue. As I’m sure you know, the CSS reading and formatting done by firefox adhears more to the standards than IE. One could conclude that you have some bad code in there that buggers it for standards compliance. I’m a CSS novice at best, but maybe you need to specify z-order?

    I’m in my own css world of hurt right now — a div I have won’t even appear in IE, although if you view the source you can see it. Grrrr…. good luck!


    Post up the CSS you mentioned. It’s 2am, I need to be at work at 9am…wired on Diet Wild Cherry Pepsi. Get me away from my conundrum!


    No can do compadre, I have fixed the problem, apparently IE didn’t like that I used a DIV id twice, copy, paste, change name seems to have fixed it. Running the code through the validators picked it up.

    I love how the sheep automatically assume user error when it comes to the Holy FireFox or Sainted WordPress. And, of course, the moment you prove them wrong, the moment even the blinded by faith begin to see the logic of a software error, the sheep run away in fear of the blasphemy.

    I don’t know if you ever solved your problem, Frankiejr. I didn’t see it happen on your site, but then, you’ve changed the layout to avoid the scenario in which FireFox breaks the columns.

    If you found a solution, I’d love to hear it. I’m experiencing the same problem–100% valid code, columns work in everything (IE 6, IE 7, Opera Win, Opera Mac, Safari, OmniWeb, iCab, Camino) but in FireFox the columns jump around every other page load.

    A link to your site would be helpful.

    A small observation if I may: Consider re-writing that first paragraph. Unless your goal is to side-track folks from your real issue and get a good flamewar going -or- get people to skip the post, it really isn’t very helpful towards detailing your issue.

    A link to *both* sites would be nice so we could see the issue. Pariah – if the site you’re talking about is the one that’s in your profile, you have 35 errors in your HTML. If it’s not the one in your profile, I’d love to see this site…

    By the way. Baaa. (And I’ve never run.)

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS errors, only happens in WordPress’ is closed to new replies.