SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding at bottom of DIV tag in IE

    Please can somebody explain to me why IE seems to be adding padding to the bottom of this background image? It's driving me nuts!

    .divider {
    background:url('./img/newsDivider.gif') no-repeat;
    height:3px;
    width:306px;
    padding:none;
    margin:none;
    }

    <body>
    <div>text</div>
    <div class="divider"></div>
    <div>text</div>
    </body>

    Cheers,
    Steve

  2. #2
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't you have to put

    padding: 0 ... I don't think you can put "none"

    same thing with the margin: 0

  3. #3
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:

    Code:
    padding:0; margin:0;

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, still got the same problem though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a screengrab, with border:1px solid red; set on the div.

    http://img72.imageshack.us/img72/4056/wtfbordermi1.gif

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could we have a link?

  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)
    start your css with

    Code:
    * {
       padding: 0px;
       margin: 0px;
    }
    That will set all padding and margins on your page to zero and then you can apply it wherever you need it.

    Also, make sure that you've got a valid doctype. A link for us to see will certainly help as the problem might exist outside of the code you've actually posted.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, guys. Here's a link as requested...

    http://www.dis-play.net/dev/test/test.html

  9. #9
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man ... that's really weird.

    Why don't you add the image to the div instead?

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    div {
    background:url('http://www.dis-play.net/dev/test/img/newsDivider.gif') no-repeat left top;
    height:100px;
    width:306px;
    }
    
    div.first {
      background: none;
      }
    </style>
    </head>
    
    <body>
    <div class="first">text</div>
    <div>text</div>
    </body>
    
    	
    </html>

  10. #10
    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)
    ah, I've got a much easier solution....

    Internet Explorer 6 cannot display a block level element at a smaller height than it's base font.... sooooo if you add font-size: 0; to that class then that'll fix the problem

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    ah, I've got a much easier solution....

    Internet Explorer 6 cannot display a block level element at a smaller height than it's base font.... sooooo if you add font-size: 0; to that class then that'll fix the problem
    I KNEW it had to be something like that!

    Thanks, guys!

  12. #12
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ nice ... I didn't think of that


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
  •