SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Padding is adding to a div's width in IE6

    Not sure if there's a workaround for this; I've got a list with a set background/border that's currently a set width. All of the items in the list have a background image to the left, almost used as bullet points I guess, but because of this I've had to add - padding-left: 3em to the actual text contained within the list so the text isn't over the image.

    In Firefox this is fine, but in IE6, the extra padding is making the list 3em too big - I'm just wondering if there's anyway around this please?

    Thanks

  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)
    That's how the box model should work.

    Total width = width + padding + margin + border

    IE6 does have a few bugs but shouldn't have any problems from what you've described and should render identically as long as you have a full, valid doctype?

    If that doesn't help though, then please feel free to post the full code.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the reply; shame it works like that, I thought padding was added to the middle of the div instead of the outside, if that makes sense.

    What I've got is a livesearch thing, when there's no users it'll display "No users found", or when there are users it'll display a list of each of them. The problem I'm having, is that the list has an extra 3em of padding, so the box size jumps around depending on if any users are found or not. Here's the CSS at least:

    Code CSS:
    #live li {background: #f6f6f6 url(../img/icons/ico_note.png) no-repeat 1em 50%; line-height: 2.2em}
    #live li a {display: block; width: 100%; height: 100%; padding-left: 3.3em;}
    #live li a:hover {background: #ccc url(../img/icons/ico_note.png) no-repeat 1em 50%; color: #fff}

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because you are specifying the 100&#37; width PLUS the padding. If the <a> is set to block display, it will automatically fill the width without specifying it - then it will take into account the padding.
    Code:
    #live li a {display: block; padding-left: 3.3em;}
    No point specifying 100% height either, as the parent (the <li>) does not have a height specified - the height will default to "auto".

  5. #5
    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)
    Yep, any block element will adjust to fill the remaining space so you don't have to specify width: 100&#37;; and can instead apply any margin, padding or border's and just let the remaining space be taken up by the width.

    Obviously, things are a little more tricky when you need to float an element but there are ways around it.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oops, hit the wrong button on my mouse and managed to lose my post, sigh! Many thanks for the info, I stupidly thought you needed to set the width/height to ensure that it filled the listed item, but just display: block seems to work fine.

    It's great now, except for some reason since removing the height=100&#37; line, the first item in the list doesn't change background colour when I hover it, all of the others work fine. If I add the height back in, it's fine again, hmm. Any idea why this would happen? The HTML is identical for the first one as it is for the others. It's fine in Firefox too, just IE6 that it's breaking in. Think it could be a bug with the hover.htc file I'm using?

    Thanks again

  7. #7
    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)
    Quote Originally Posted by xkratosx View Post
    It's great now, except for some reason since removing the height=100% line, the first item in the list doesn't change background colour when I hover it, all of the others work fine. If I add the height back in, it's fine again, hmm. Any idea why this would happen? The HTML is identical for the first one as it is for the others. It's fine in Firefox too, just IE6 that it's breaking in. Think it could be a bug with the hover.htc file I'm using?

    Thanks again
    Without seeing the full code I can only guess but it sounds like a haslayout issue.

    If that's the case then I'd supply the following code to IE6 and below

    Code:
    * html #live li a {
     height: 1%;
    }
    Failing that though, I'd be tempted to put the 100% height back in if it works and doesn't have any adverse side affects in other browsers although if it were my code, I would like to get to the bottom of the problem.

    From the information you've provided though then I'd expect the above to work.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah I see, thanks for the info.

    * html #lives li a {height: 1&#37;;}

    Works a treat, just wondering what are the benefits of using this over the regular height: 100% that was there before?

    Thanks again

  9. #9
    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)
    In your example, none really but in other situations it could potentially cause you problems so I'd personally use the 1&#37; just targeted at IE6 and below as you then know that this is fixing the problem as apposed to targeting all browsers with 100% height and hoping it works.

    To apply "Layout" you just need to supply a dimension to the element that's causing the "HasLayout" rendering issue so I'd always use height: 1% with the star hack if possible.

    Hope that helps.

  10. #10
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the info, it inspired me to check out the "HasLayout" thing in IE, which not only threw up a very interesting page, a cheeky look at the CSS also gave me a great idea on displaying things on hover using purely CSS! http://www.satzansatz.de/cssd/onhavinglayout.html


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
  •