Quickie CSS help?

July 9, 2006 12:57 PM

CSS Q: how come when I put a border around an image with consistent padding there is always a pixel or two extra at the bottom? How do I get rid of it?

So, when I have this code:

padding: 10px;
border: 1px solid #545454;

I end up with an image that has a border around it, 10 pixels out from the top, left, and right, and 11 or 12 pixels from the bottom. Why?

Also, since no doubt css geniuses will quickly answer this Q, can anyone tell me why

margin-right: auto;
margin-left: auto;

doesn't work in IE? Or is it just not working in my IE? Is the solution to wrap a non-industry standard center tag around the sucker?

posted by You Should See the Other Guy to Computers & Internet (14 answers total)

IE's support for CSS is incomplete/broken in several significant ways, much like the browser's support for web standards and security in general.

Do you have a padding on img as well? Maybe something like padding:0px 0px 0px 1px?
posted by Tuwa at 1:14 PM on July 9, 2006

Response by poster: No, I have no padding on it. And it's happened to every img I've ever tried to put a border around on every site.

Are you saying it's not normal?

I assumed that maybe the CSS was inserting a carriage return or something but I've never known how to remove it.
posted by You Should See the Other Guy at 1:17 PM on July 9, 2006

Response by poster: That should read that I have no *extra* padding on the bottom. It's as it appears in the code, above.
posted by You Should See the Other Guy at 1:18 PM on July 9, 2006

This usually happens when you're putting the border on, say, an anchor tag rather than the image directly and you've left a space or linebreak between the end of the image tag and the closing anchor tag...
posted by beerbajay at 1:28 PM on July 9, 2006

Your CSS obviously looks fine. Give us a link to a page that you think doesn't work. Minimal test case, please.
posted by beerbajay at 1:28 PM on July 9, 2006

Ah, I got my TRBL wrong above (it's top, bottom, right, left).

Can you post your complete CSS here, or point us to it? I think that might help in answering the question.

As for the margin troubles, this page offers a bit of javascript intended to get IE to cooperate, in case you're interested. Of course a better solution would be for IE to pay more attention to the W3C, but until then....
posted by Tuwa at 1:29 PM on July 9, 2006

Ah hell. I need to go back to bed. Top Right Bottom Left, Top Right Bottom Left... [bows out]
posted by Tuwa at 1:30 PM on July 9, 2006

Response by poster: I can't supply a link at the moment but I just tested locally with this as the entire CSS:

body {
margin: 0px;
padding: 0px;
text-align: left;
background-color : #262626;
font-family: "Lucida Grande";
}

.imagetest{
float: right;
background-color: transparent;
margin: 10px;
padding: 5px;
border: 1px solid #545454;
}

And this as the entire HTML (with proper brackets, of course):


[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]

[head]
[meta http-equiv="content-type" content="text/html; charset=utf-8"]

[link rel="stylesheet" href="css/tester.css" /]


[title]title[/title]

[/head]
[body]

[div class="imagetest"][img src="images/news_image.jpg" /][/div]

[/body]
[/html]

And I get a page with an image with a border around it 10 pixels from the image on all sides but the bottom, which appears to have about 12 or 13 px there.
posted by You Should See the Other Guy at 2:03 PM on July 9, 2006

can anyone tell me why

margin-right: auto;
margin-left: auto;

doesn't work in IE?

Already covered.

Or is it just not working in my IE? Is the solution to wrap a non-industry standard center tag around the sucker?

No, that would be Wrong because you'd be putting styling info back into the HTML!

The way most people I know do it is to use "text-align:center;" in the css to handle centering for I.E. and then laboriously put "text-align: <whatever>;" into the child elements where necessary, for other browers.

Great how CSS has liberated us from hacks isn't it? But at least the hackage is all in the CSS.
posted by AmbroseChapel at 2:44 PM on July 9, 2006

Try adding 'display: block' to the image. IMG is by default an inline element, so you get some extra space for descenders (such as on the letters y, p, q). Although, this is only true if you're in "really strict" mode, as opposed to quirks mode or "almost strict" mode.
posted by Sxyzzx at 2:57 PM on July 9, 2006

Response by poster: Thanks, AmbroseChapel.

Sxyzzx, good suggestion, but it didn't affect it.
posted by You Should See the Other Guy at 3:29 PM on July 9, 2006

Best answer: make the class:
.imagetest{
float: right;
background-color: transparent;
margin: 10px;
padding: 5px;
border: 1px solid #545454;
display: block
}

and remove the div, doing this instead:
[img class="imagetest" src="images/news_image.jpg" /]
posted by beerbajay at 3:50 PM on July 9, 2006

Response by poster: beerbajay, that worked! Thanks!

Any idea why?
posted by You Should See the Other Guy at 4:24 PM on July 9, 2006

As I noted above, this often happens when there is whitespace (a space, newline, tab, whatever) between the closing part of the image tag and the closing of the enclosing tag. If that was not the case, then I don't know. =) Your div wasn't necessary in any structural way except to make the image display as a block rather than inline element, so it's easier to just simplify the whole thing.
posted by beerbajay at 5:14 PM on July 9, 2006