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… https://futureclassic.net/wp/

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.

Thanks!
.frankiejr
P.S. I even spellchecked!