|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
February 4th, 2004, 11:58 AM
|
|||
|
|||
|
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
February 4th, 2004, 10:41 PM
|
||||
|
||||
|
(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
|
|
#3
February 4th, 2004, 10:50 PM
|
|||
|
|||
|
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.
|
|
#4
February 4th, 2004, 10:59 PM
|
||||
|
||||
|
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>
|
|
#5
February 5th, 2004, 12:10 AM
|
|||
|
|||
|
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.
|
|
#6
February 5th, 2004, 07:51 AM
|
||||
|
||||
|
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
|
|
#7
February 6th, 2004, 09:22 AM
|
|||
|
|||
|
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.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Image Border: IE Bug |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
