Help: CSS Equal Height Column bug in IE

[notjustjay]

Hi folks,

I've been coding HTML by hand since about 1995, and perhaps that's the problem... a lot has changed since then! I was recently called upon to redesign a website for an organization I volunteer with, and had to relearn everything I knew about site design (using tables for formatting, etc).

Please have a look at the page I am having a problem with, at http://www.cherith.ca/faqs.php. The CSS is located at http://www.cherith.ca/styles.css.

I've deployed the "equal height columns" CSS trick to get the sidebar and the main content area to be equal height with a white background. It seems to work well, except for this page where I am having display glitches in IE6 when I click on a named anchor (e.g. the shortcut to any FAQ question).

Questions:

1. Anyone else experience this, or any other glitches with IE6 or any other browser? (I've tried on Safari 2 and 3, and all seems well)

2. Any ideas how to fix the anchor glitch? A google search didn't find me much.

3. Does my host (Dreamhost)'s PHP serving seem excessively slow to you?

Images and formatting of other pages are all temporary, as we basically just copy/pasted our old site into this new template, and will be redoing content later. The old site had a dark background and smaller fonts, so the images look too small, have incorrect background colors, etc. We'll fix that next.

Otherwise, your comments and suggestions on colors, styles, etc. are welcome as well.

 

[angelwatt]

Yeah, glitchy (tested Firefox, Safari, IE6). Clicking on link causes everything above the spot I'm linking to, to disappear. Clicking the Back button doesn't resolved it either as well as a refresh. Quite glitchy.

I recommend validating your code to find a number of errors here, some of which may be contributing to your problem. One thing I would change though is the "name='1'" uses. I can't remember if it's a standard, but using a number generally isn't good practice. I recommend doing,

<a id="faq-1" name="faq-1"></a>

Though personally I just add the id to the tag nearest that point, without the name attribute. But I work in XHTML only and can't remember HTML 4.01's standards for this point.

I also wouldn't use a dl for your layout along with using h4 for titles. Mostly because it's against standards. Do one or the other, not both. It looks like you're using the dl for styling purpose, which is a bad practice. So personally I'd go with the h4 for title, though really it should be h3 if you setup your hierarchy correctly (You skip h2).

Another thing, you mix using HTML and XHTML syntax. Pick one and stick with it. The validator will help you identify these points.

Your CSS for "A NAME, A NAME:hover" does nothing. There's no tags named "name" and those anchors aren't visual so there'll never be a :hover opportunity. Your CSS,

/*  Faux Columns hack */
padding-bottom: 10000px;
margin-bottom: -10000px;

does seem to be the problem. Using Firefox's Web Developer Toolbar I removed this code in two places and it resolved the problem and the page looked fine. Though this only test Firefox and not IE. I'd work on a different solution than Faux columns.

 

[notjustjay]

Thanks for the quick response. Yeah, as you can see I've been playing around all over the place, and there are some remnants that will need to be cleaned up. Thank you for that analysis!

I'll start playing around with the changes you suggest and see if that helps. I'm concerned about removing that hack as it definitely did not display correctly without it on my browser (Safari 2.0) but I'll try some others again and see how they work.

 

[speechpoet]

Issues with the equal height hack

I had the same problem... and then checked back at the Position is Everything article where I first read about the hack. They have an update that describes several problems... and first and foremost is the one you've been experiencing (along, as it turns out, with me):

Several issues have been discovered since publication which, depending on your requirements, can cause severe problems when using the equal height technique.

1. Linking to anchors in elements within the containing block

The bad news is, the problem seems to be intractable.