PDA

View Full Version : CSS+DIV+Image: unwanted padding in IE

don
01-13-2005, 10:12 PM
This is crazy. I'm new to CSS/DIV layouts. I'm already ready to go back to tables! :)

I can't get rid of the bottom padding under the picture in IE. It is fine in Firefox.


<html>
<head>
<style>
.helpme {
border-top-style: solid;
border-bottom-style: solid;
}
</style>
</head>

<body>

<div class="helpme">
<img src="http://igloons.com/stuff/pics/wonderwoman.jpg">
</div>

</body>
</html>
mcdougals4all
01-13-2005, 10:40 PM
Tells the browser to apply the style to every img within an element with the 'helpme' class:

.helpme img { margin:0; }


Tells the browser to apply the style to every img...

img { margin:0; }


Tells the browser to apply the style to every img with the 'wonder_woman' class:

img.wonder_woman { margin:0; }


Pick which works best based on the rest of your code.

Looking at what you're doing, you can probably just apply the border to the image itself.
don
01-14-2005, 02:00 PM
I applied all three and none work.

This is wacky. I know DIVs are the way to go, but this is killing me.
ronaldb66
01-14-2005, 02:05 PM
Are you able to put the page up online somewhere? It often helps a lot to see the whole page + styles as they are instead of snippets of markup.
_Aerospace_Eng_
01-14-2005, 02:16 PM
its an IE thing, all they have to do is butt up the image with the div tags like so
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.helpme {
border-top-style: solid;
border-bottom-style: solid;
}
</style>
</head>

<body>
<div class="helpme"><img src="http://igloons.com/stuff/pics/wonderwoman.jpg"></div>
</body>
</html>
you dont need any additional css such as margin:0px;, u can totally get rid of that, and make it a habit of using doctypes
don
01-14-2005, 03:10 PM
That was it. Thanks! I got signoff yesterday on the design and realized I should use DIVs. I know what I'll be doing this 3-day weekend...