Results 1 to 7 of 7
  1. #1
    Star Lounger
    Join Date
    Jun 2001
    Location
    Kendal, Cumbria, England
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE 5.1 CSS layout problem

    My site at http://www.southlakesu3a.org.uk is based on XHTML and CSS. It works fine in Firefox, IE 6, IE 5.5 and, with a few niggles, Safari. But in IE 5.1 the layout goes to pieces.
    Basically it is a fixed width, centred, two column layout., using float: left and float: right divs for the two columns, all enclosed within a wrapper div using auto margins. I've used a hack for IE 5 suggested in various places of adding text-align: center in the body style then resetting this to text-align: left in the wrapper div.
    IE 5.1 seems to ignore the wrapper width definition, and lets the column divs float off to the left and right of the screen.
    In addition, on the Gallery page the image links don't work in IE 5.1 but are ok in other browsers.
    Having spent hours googling for suggestions with no result I would appreciate any help. I've attached the CSS file.

    George
    Attached Files Attached Files

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: IE 5.1 CSS layout problem

    I used IE 5.01 for a long time after 5.5 was released because 5.5 was a bit buggy. But eventually the prospect of having a print preview command got the best of me and I upgraded. <img src=/S/wink.gif border=0 alt=wink width=15 height=15> Anyway, I hope someone else still has that dinosaur around so they can see what you're seeing.

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE 5.1 CSS layout problem

    Hi George

    Well you have found the problem, unfortunately the solutions are many <img src=/S/flee.gif border=0 alt=flee width=25 height=25>. I do not have IE 5.X on my PC anymore but these are the general remedies that could be tried:
    1) If possible, always define a width or height dimension for the parent element containing a float( you have width but hot height in #wrapper.... You can use the Holly Hack to remedy this as well (see below)

    2) You can get past a lot of float issues when floating text elements by assigning a width to the element style

    3) On the other hand, avoiding widths on elements following floats also prevents display problems

    4) Put some space between floated text and the wrapping text, apply increased margin values to the float rather that the text following the float. IE on Windows has a habit of doubling the margin for floats. eg If you use float: left with a margin-left of 3 pixels IE renders it as 6 pixels. You can defeat this by adding a display: inline to the float.

    I have not got terribly deep into your work as I do not have IE5.X as I said but no1 and 4 look good options for you to try.

    Holly Hack

    This creates a minimal height declaration, not always a fix but certainly has worked for me on several occasions

    #wrapper {height: 1%;}

    You can also use the Peekaboo hack where it can help for compliant browsers to ignore it completely

    /*Start Commented Backslash Hack */
    * html #wrapper {height: 1%;}
    /*Close Commented Backslash Hack */

    I hope these give a way forward
    Jerry

  4. #4
    Star Lounger
    Join Date
    Jun 2001
    Location
    Kendal, Cumbria, England
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: IE 5.1 CSS layout problem

    Thanks Jezza - I tried all your suggestions but alas none of them worked.
    Then I tried something else - because it seemed like IE 5.1 was ignoring the #wrapper div width definition, I added another div - between the #wrapper div and the content divs. The CSS for this was simply
    #anotherwrapper {width:770px:}
    Amazingly it worked!
    I then took out this extra div, deleted the width definition from #wrapper then put it back in a further definition of #wrapper - so I ended up with
    #wrapper {
    margin-right: auto;
    margin-left: auto;
    text-align:left;
    }

    #wrapper{width:770px;}

    This also worked - so problem solved. But why?
    I still have the problem of the image link not working in IE5.1 - the markup is:



    [img]Images/Abbott-Hall-Park-Kendal.jpg[/img]Where is this? Who painted it? Click the picture to enter the Art Gallery and find out!</p>

    and the relevant CSS is:

    .rimage {
    float: right;
    position:relative;
    top:5px;
    margin-bottom: 10px;
    margin-left: 20px;
    border:0;
    }

    Do you have any idea why this doesn't work? It's ok in IE6, 5.5 and Firefox.

    I don't have a "native" installation of IE 5.1 on my PC but I have used the downloads available via http://labs.insert-title.com/labs/Multiple...article795.aspx for testing.
    I've also found the IE development toolbar download from Microsoft very useful for showing div boundaries.

    George

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE 5.1 CSS layout problem

    Ok George...good to see the result, I shall remember that [img]Images/Abbott-Hall-Park-Kendal.jpg[/img]</a>


    Where is this? Who painted it? Click the picture to enter the Art Gallery and find out!</p>
    </div>

    As I say, a shot in the dark but I thought it may be prudent to split the

    </p> away from the <div> tags just to see if this can assist. Works fine in IE 6 and FF 1.0.7+
    Jerry

  6. #6
    Star Lounger
    Join Date
    Jun 2001
    Location
    Kendal, Cumbria, England
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: IE 5.1 CSS layout problem - Success

    That works a treat Jezza. Thanks for all your help.

    George

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE 5.1 CSS layout problem - Success

    Wow, I have shocked myself....

    I have just got out an old laptop/notepad and was checking the IE version on it sadly 5.5 but I am going to take your suggestion and put a couple of legacy IE's on it.

    For what it's worth.....this doesn't work on my Ipaq.... <img src=/S/sad.gif border=0 alt=sad width=15 height=15>
    Jerry

Posting Permissions

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