border around image is actually around padding

fine in IE but not in FF

[GeddyLee]

Hello

I have placed a border around images on my webpage.

.imgleft {
float: left;
padding: 5px 8px 2px 0px;
border: 1px solid #666666;
}

In Internet Explorer the border is around the image but in FireFox it is around the padding

any ideas?

Rob

[Fotiman]

Yes, Firefox is behaving correctly according to the specs and IE is operating in it's own crazy Quirks mode. IE sucks.

To fix this, give your document a proper DOCTYPE declaration. Doing so will tell IE to behave more like Firefox (it puts IE into standards compliant mode).

Lastly, you wrote "fine in IE but not in FF". This is actually backwards. Take a look at the CSS spec on the box model and you'll see that IE is actually misbehaving (this is usually the case when there are cross browser issues):
[w3.org...]

[vol7ron]

I don't see the "fine in IE but not in FF" in the first post, but I'd say if that's how you want it, take the padding off the image, keep the border, and put the image in container div/span with padding

[GeddyLee]

thanks all - I appreciate it
but margin actually took care of my problem
.imgleft {
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 2em;
margin-left: 1em;
/*padding: 5px 8px 2px 0px;*/
border: 1px solid #666666;
}

[vol7ron]

that'll work too haha