SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Another IE5 bug

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Another IE5 bug

    Hi,

    I've been reading the forums trying to figure out why my layout doesn't work in IE5 but I can't find the answer. I think it's something to do with the floats I am using but I don't know what. The site renders fine in IE6 and Firefox.

    My site is at http://www.spibey.com/test/

    Thanks for any advice you can give

    James

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie has a roundng bug with percentages and when you try and add 2 percentage together they will very likely be bigger than the whole. In the case of floats this can cause the layout to break up completely.

    Therefore shave a fraction off one of the floats and it should still display ok.
    Code:
    #AppTitle{float:left; Width:70%;display:inline;}
    #AppImg{float:left; Width:29.9%;min-width:171px;display:inline;}
    #NavMenu{float:left;Width:70%;Height:18px;display:inline;}
    #MyMenu{float:right; text-align:right; Width:29.9%;Height:18px;display:inline;}
    #LeftMenu{float:left; Width:10%; Height:90%;display:inline;}
    #Content{float:left;Width:89.9%; Height:90%;display:inline;}
    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I should have said that the problem I'm having is with the height not the width. The page is pushed down the screen and the image in the top left seems to have aquired a margin. I have uploaded a screenshot of the page rendered in IE5 so you can see the problem.

    http://www.spibey.com/test/screenshot.jpg

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well the uissues will affect the height because the floats will ine up underneath each other so you need to take account of them.

    The issue with the top left image is cause by tour errorwarning style. You have set it to height:0px which makes no difference to ie anyway as it will render it at the current font-size/line height anyway. (The usual solution is to set overflow:hidden (or font-size:0)).

    However there is something else going on with ie5 and I suggest you use display:none instead.

    Code:
    .errorBannerOff {height:0px;display:none;}
    This clears the problem up although your page is very unstable and I would consider re-designing that page so that it doesn't break so easily in ie.

    Just resize the page smaller to see what I mean.

    Anyway hope the above helps and bear in mind the problems with floats and percentages.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Paul, very useful. The only remaining problem is removing the margin on the right side of the header image. Do you know what might be causing that?

    I understand what you are saying about stability but the site is to be used on an intranet with guaranteed minimum spec of 800x600 and IE5 so I'm not to worried about IE corrupting it at resolutions lower than that.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Take out the align=left from the image html and just set the image to display:block,
    Code:
    #AppTitle img {display:block}
    Using align in conjunction with floats can cause problems so its best not to use them together and just float elements instead. After all align is deprecated in strict anyway.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Nottingham, UK
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul that works brilliantly!


Bookmarks

Posting Permissions

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