Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Columns broken, etc. help?

    Hi, I wonder whether anyone can help me.

    My redesigned at http://www.robertandrews.co.uk is virtually XHTML1.0-compliant (and the CSS compliant, too, I believe) and I've been using it on Mac Safari and Firefox.

    Checking it today on Windows IE6, it's broken severely. The biggest problem is that the three columns appear on top of each other, instead of side-by-side. I'm vaguely aware that this may be a common problem relating to IE6's box model, but I can't figure out how to fix it. Besides, the whit, left-hand column is set to auto width.

    It's annoying, because I'd followed a great 3-column layout template tutorial at http://www.tanfa.co.uk/css/layouts/c...-layout-v2.asp - but, either that doesn't work with IE6 Windows (unlikely), or I've modified something incorrectly.


    The page should look like this grab.

    My stylesheet is here.

    Other problems I discovered whilst using IE6 are...
    • No dotted underline (1px border-bottom) on green links in the white area.
    • The three black straplines are incorrectly overlapped by the first table rows below.
    • The sitewide footer is too tall. Text appears to be in the correct place, but the buttons on the right are too low.
    • There also appeared to be a white gap above the footer.
    • On weblog entry pages, there is no bgcolor showing for replies or for the reply form.
    • For those replies, the name of the respondent is too low - it should be flush with the speech icon.


    Any CSS experts out there who can help? Much appreciated.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display: table?

    I didn't feel like going through your entire style sheet, all 10 k (!) of it, but if you rely on "display: table" and "display: table-cell" for your layout to work: IE doesn't support that.
    Try something more mundane, like floats.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    I didn't feel like going through your entire style sheet, all 10 k (!) of it, but if you rely on "display: table" and "display: table-cell" for your layout to work: IE doesn't support that.


    Try something more mundane, like floats.
    That method requires the "faux columns" approach... adding background images to the sidebars to make them appear as though they extend to the height of the taller, center column. I don't really want to do that. The above, tanfa, method was the first/best I saw that didn't require that.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    y not use 4 divs for the main content, one for dates float that one left and then another for the right part of the content the two columns (links and stats) in it and float that to the right and inside that div float links left and stats right
    keep in mind i haven't fully looked over ur code so its merely a suggestion

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ie.css

    On further inspection, you cleverly left out the special ie.css, which is activated by an IE-propriatory behaviour script thingamabob, which in turn serves them as floats. This hack depends on IE being in quirks mode -at least, that's what the comments say- to achieve a 100% height.

    All in all, I'd call this a shaky solution; then again, none of them are fully reliable in all situations. I'd reconsider the faux columns approach.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    On further inspection, you cleverly left out the special ie.css, which is activated by an IE-propriatory behaviour script thingamabob, which in turn serves them as floats. This hack depends on IE being in quirks mode -at least, that's what the comments say- to achieve a 100% height.
    Ooohhhhh, yes! Silly me.

    Okay, I've just added http://www.robertandrews.co.uk/newest/ie.css and the conditional Javascript that invokes it.
    I've just been able to try out http://www.robertandrews.co.uk/weblog/test.php on Windows IE. The expandable white left column (.one) is still full-width, the middle column (.two) is below all that and positioned incorrectly to the left, and the third column (.three) I can't see anywhere.

    I know for a fact the values in ie.css are incorrect. That's because I can't tell what should be where.

    All in all, I'd call this a shaky solution; then again, none of them are fully reliable in all situations.
    Pain, isn't it?


    I'd reconsider the faux columns approach.
    My main concern with this was whether there may be a discrepancy in colour between the actual bgcolor and the image colour - across browsers, screens etc.

  • #7
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, as per the above tip re: reinstating the ie.css compensation stylesheet, I am now running the site (http://www.robertandrews.co.uk) off:-

    • http://www.robertandrews.co.uk/styles/core.css and
    • http://www.robertandrews.co.uk/styles/ie.css


    However, I'm still having no luck. I had modified the main stylesheet of the tutorial (http://www.tanfa.co.uk/css/layouts/main.css and http://www.robertandrews.co.uk/styles/ie.css) so that the left column, not the middle, was the fluid one (my right two columns are stat-width, not the two side columns), and so, I would think I need to adjust the values in ie.css accordingly...

    This I have tried, but to no avail. I'm not certain that I've modified the values correctly.

    What am I doing wrong here?

    Could anybody please help?

    Many thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •