SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Padding problem

  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    ff
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding problem

    Hello friends

    I try to put padding and borders in a image with the follow code :
    img {
    border: 1px solid #666666;
    padding: 3px;
    }

    It works with the firefox and opera but not with IE ...

    Why?

    Thanks

  2. #2
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not off the top of my head. Have you checked the CSS FAQ howto...? It could be the IE broken box...

  3. #3
    SitePoint Enthusiast nelovishk's Avatar
    Join Date
    Dec 2004
    Location
    Guadalajara, México
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perhaps what you need is a margin, not padding. you could try this:

    Code:
    img {
         border: 1px solid #666;
         margin: 3px;
    }
    I hope this helps
    See any mistakes? Please tell me! I need to improve my English.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    If you are using ie6 without a doctype or partial doctype or ie5 and ie5.5. then you will be using the broken box model where padding/borders are included in the width of the element. I believe this is why the image doesn't get any padding added in ie.

    Ie6 in standards mode is fine.

    Just use an outer container and give that the border and padding instead.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #outer img {
     width:100px;
     height:100px;
    }
    #outer {
     border:1px solid #000;
     padding:3px;
     width:100px;
    }
    * html #outer{width:108px;w\idth:100px}/*box model hack assuming standards mode */
    </style>
    </head>
    <body>
    <div id="outer"><img src="img.gif" width="100" height="100" /> </div>
    </body>
    </html>
    Paul


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
  •