CSS Positioning and IE6 is making me cry

January 18, 2009 5:32 PM

CSS Positioning and IE6 is making me cry - Working on a freelance project as a favor for my sister-in-law, and I'm having an issue with the display in IE6. (Looks great in IE7 and Firefox) As you can see, the main content on the right is appearing below the menu on the left, instead of alongside it. Any ideas?

You can find the CSS file here if that helps.

And before people ask, the client uses IE6, so I can't really ignore it.

(Why do people still use that piece of crap? Do they expect to put a DVD in their VCR and have it run perfectly?)

posted by emptybowl to Computers & Internet (11 answers total)

Without spending any time on it cuz I'm at workies, it'll be a padding thing is my guess: browsers handle them differently, with some including it in the specified width of an item and some adding it on top of the specified width. Make your columns narrower by at least the amount of pixels you've used in horizontal padding, and see if they all fit alongside one another then. If that works, fabulous - except you won't have the padding you're wanting, no doubt. Try creating the spacing you're after using margins instead.
posted by springbound at 6:06 PM on January 18, 2009

What springbound says is almost good advice except that IE6 tends to double the margin on any floated elements (which would also make it stay at the bottom). So make sure to create an IE 6 only stylesheet and adjust accordingly with padding and margins. Use the IE only conditional comments.
posted by shownomercy at 6:29 PM on January 18, 2009

Response by poster: Yeah, there's an IE only CSS sheet, but I've had difficulty getting anything I've tried to work, so I thought I would see if there was anything I wasn't thinking of. I don't *believe* I'm using any padding, just margins, but what shownomercy is saying maybe be what the issue is....
posted by emptybowl at 6:36 PM on January 18, 2009

This is may or may not help http://www.divitodesign.com/2008/11/let-ie6-behave-like-ie7/. It's a javascript file that tries to have IE6 act similar to IE7. Helped me with some of my layout problems.
posted by pyro979 at 6:53 PM on January 18, 2009

Q: What happens if you take that "left: 15px" off your #equatorDialoguesText div (ie, make it "left: 0px", effectively)? Again, I'm working blind - I'm using Firefox on a Mac, of all the useless things towards solving this! - but that div seems to be starting at 15px from the left but nonetheless being 100% (100% of the column it's in) wide, ergo poking out over the edge of where it ought to be, when I click on it using Firefox's Web Developer plugin...?
posted by springbound at 7:03 PM on January 18, 2009

oh the pain. yea, adjust all the padding, especially the top&bottom, for some reason, that seems to affect horizontal positioning.

www.browsershots.org is a great resource for mac-based webdevs trying to make something work for the interminable abyss that is IE6.
posted by emptyinside at 8:00 PM on January 18, 2009

Dreamweaver's "Check Browser Compatibility" feature is great for quickly getting to the bottom of IE bugs/issues.

Here are the issues in the source:

line 105: Doubled float margin bug
line 118: Expanding Box Problem
line 226: Expanding Box Problem
line 277: Float Drop Problem
line 277: Expanding Box Problem

There are a few other issues with the css files such as typos and unsupported properties/values, but I'd just get a trial of DW and run them through it.
posted by lmm at 8:52 PM on January 18, 2009

Your HTML doesn't validate: [123 Errors, 18 warnings] and your CSS doesn't validate: [16 errors].

I'd say you're making IE cry, rather than the other way around.

But seriously, what's the point in even asking for help if your code doesn't validate? Fix all those errors, see if that helps, then ask again.
posted by AmbroseChapel at 10:05 PM on January 18, 2009

Looking at it in Safari, the two columns seem to overlap by at least a pixel, so I'm guessing the content in at least one column is too wide for the container. IE6 expands containers to accommodate content instead of letting it spill over the edges, which often results in these kinds of problems, so go through and check your widths carefully.

Whatever the problem, you should be able to pin it down by commenting out different bits of markup and styling to determine the elements and properties involved.
posted by malevolent at 11:50 PM on January 18, 2009

ugh. looking through the code - way too many nested tables. a good place to start would be to not mix static widths (leftcolumn) with percentage widths (maincontent).

partners is also forcing leftcolumn to expand knocking main content down. put it in its own container. then remove the 77px margin on the blog_front tables nested in main content. that should get them on the same level.

there will still be lots of clean up after that getting it working in all browsers cause as soon as you make those changes, it will likely be broken in IE7, FF etc. why are you opening three naked divs under "module_menu_main"? they appear without class, id, or inline style.

frankly? this could (and should) be redesigned. If i inherited this code to work on, id be tempted to scrap it and start over.
posted by nihlton at 10:52 AM on January 19, 2009

I didn't even look at the actual page you're having issues with. I'm just going to contribute two pieces of advice:

1) easy way to minimize browser differences - start your style sheet with
* { margin: 0; padding: 0; }
Now, most differences between browsers have been erased. Proceed from there.

2) easiest IE-only hack: IE will recognize a property that starts with an underscore. No other browser will. So just start all your needed tweaks with underscores, like so:
.class { _property: value; }
This works in IE5 and IE6, but not IE7. It's a hack, but it's simple and effective. But well-written HTML and CSS will make it much easier to use.
posted by timepiece at 4:14 PM on January 27, 2009