SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacings in IE not right

    Hi there,

    This page looks different in IE than other browsers: http://www.truedesign.co.uk/true/portfolio1.html

    I'm not too sure why. The images are floating in a DIV layer with these classes:
    Code:
    .rightbottomspace { padding-right: 5px; padding-bottom: 5px  }
    .bottomspace { padding-bottom: 5px  }
    The bottom space does not seem to be picked up at all, while the right space does. What's wrong?

    Also, they don't fir 5 in a row as they do in all other browsers. Do I have the wrong approach, or what kind of fix do I need?

    Many thanks for any help!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You only have part of the doctype which means that IE will switch into quirks mode which is likely to be the problem when dealing with padding and fix widths.

    Try using the following and see if it solves your problem.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    More information on doctypes is available here...

    http://www.alistapart.com/stories/doctype/

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, good tip. Thanks a lot!

    IE7 and IE6 seem to work. Only IE5.5 still displeys it wrong. Is there anything else I can do?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah.

    Box Model Hacking

    You'll find that useful in explaining what's happening in the different browsers.

    Basically, IE5.5 uses the broken box model and therefore applies padding, margin and borders to the inside of the box whereas modern browser (with a doctype) render the box model correctly and add them together.

    The article above explains this is more detail though and gives you a couple of solutions.

    Hope that helps.


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
  •