Help: CSS Equal Height Column bug in IE

Discussion in 'Web Design and Development' started by notjustjay, Jan 15, 2008.

Most Liked Posts
  1. notjustjay, Jan 15, 2008

    notjustjay macrumors 603

    notjustjay

    Joined:
    Sep 19, 2003
    Location:
    Canada, eh?
    #1
    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.
     
    share
    + Quote Reply
  2. angelwatt, Jan 15, 2008

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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,
    HTML:
    <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,

    Code:
    /*  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.
     
    share
    + Quote Reply
  3. notjustjay, Jan 15, 2008

    notjustjay thread starter macrumors 603

    notjustjay

    Joined:
    Sep 19, 2003
    Location:
    Canada, eh?
    #3
    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.
     
    share
    + Quote Reply
  4. speechpoet, Mar 14, 2008

    speechpoet macrumors newbie

    Joined:
    Apr 15, 2002
    Location:
    Vancouver
    #4
    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):

    The bad news is, the problem seems to be intractable.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page