Forum Moderators: not2easy

Message Too Old, No Replies

Image padding won't go away

Image padding won't go away

         

aldend123

8:12 am on Jan 24, 2006 (gmt 0)

10+ Year Member



This code, run in Firefox, works great, wrapping the image in the border'ed DIV, however in IE, it insists on giving the image a small margin/padding space at the bottom of the image. Any fixes?
note: for various reasons, removing the border on the DIV and putting the border on the IMG instead cannot be used in my situation.

<DIV class="banner">
<img src="pic" height=200>
</DIV>

div.banner{
height: 200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top: black solid 3px;
border-bottom: black solid 3px;
border-right: black solid 3px;
border-left: black solid 3px;
}

aldend123

8:22 am on Jan 24, 2006 (gmt 0)

10+ Year Member



also the CSS min-height does not seem to work in IE, any ideas?

tomda

8:30 am on Jan 24, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There is a blank space between you <img> and </div>.
Put everything in one line and the space will disappear.

<DIV class="banner"><img src="pic" height=200></DIV>

SuzyUK

8:38 am on Jan 24, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



aldend123 - Welcome to WebmasterWorld!

to solve the image problem.. make it

display: block;
.
div.banner img {display: block;}

An image by default is an inline element and like normal inline text it leaves about a 3px gap below itself which would be where the descenders of letters (y, j, p.. etc) would fit.

>>min/max height/width
are not supported by IE however IE treats height like min-height so you might be able to use height for IE and min-height for others. Note that height may need targetted to IE *only* either using a conditional comment or a hack or it will be adhered to by compliant browsers thus overriding the min-height rule in them

Suzy