#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    39
    Rep Power
    11

    CSS Image Border: IE Bug


    I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem here: http://www.sdstyle.org/article.php?id=101

    Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page.

    The offending code is:
    Code:
    .article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}
    
    ...and for the image:
    
    <img src='images/articles/101_image_1.jpg' class='article_image'>
    This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work.

    Thanks in advance!
  2. #2
  3. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    In front of my 19 incher ;-)
    Posts
    12
    Rep Power
    0
    (after some testing) yep, seems to be a bug to me too...

    i recommend manually putting the 6px white padding around the image manually in your image program
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    39
    Rep Power
    11
    Yeah, I was trying to avoid that. Since I am using JPGs for these images (the rest are PNGs), and often highly compressed ones at that, I didn't want to start adding borders because I could get artifacting along the edges of the images.

    I know that this can be done in IE because I've seen it one a couple pages. SimpleBits is an example. I, of course, looked at the source code but when I tried to replicate it on my website (it uses a div with a nested class), it didn't work.

    I'll take some more cracks at it. Putting a border like this seems as if it ought to be quite simple, so I have the feeling I am just missing something obvious.
  6. #4
  7. Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    In front of my 19 incher ;-)
    Posts
    12
    Rep Power
    0
    you could use a div instead ( dont know WHY i didnt think of that the first time ):

    Code:
    <div class='article_image'><img src='images/articles/101_image_1.jpg'></div>
    or maybe span

    Code:
    <span class='article_image'><img src='images/articles/101_image_1.jpg'></span>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    39
    Rep Power
    11
    Thanks so much ucm for the help, I actually tried using a div earlier but it had unequal borders on a couple sides - I have no idea why.

    I did however, manage to figure it out, sort of. I replaces the DTD I had been using:

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>

    ...with a new DTD:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    ...which seems to have corrected the error. The border doesn't show up on the table, but I think, at some point, I'll replace that with a div tag anyhow (having a table there is so verbose, especially since its all done through a CMS).

    Anyhow, I thought I'd post this in case anyone else ran across this problem.
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    the problem with the first doctype is that it triggered the browsers to render the page in quirks mode.

    the new the doctype you choose triggers the browsers to render the page in standard compliance mode
    http://www.hut.fi/~hsivonen/doctype.html
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    39
    Rep Power
    11
    Quirks mode, thats a nice way to explain it. Dumb IE.

    Ah well, I'm happy it all works now. Thanks for the link Akh, I just bookmarked it and expect the page to come in very useful for the future.

IMN logo majestic logo threadwatch logo seochat tools logo