Padding at bottom of DIV tag in IE

**ShinyCDMan** · Oct 23, 2006 06:36

Please can somebody explain to me why IE seems to be adding padding to the bottom of this background image? It's driving me nuts!

.divider {
background:url('./img/newsDivider.gif') no-repeat;
height:3px;
width:306px;
padding:none;
margin:none;
}

<body>
<div>text</div>
<div class="divider"></div>
<div>text</div>
</body>

Cheers,
Steve

**karinne** · Oct 23, 2006 06:39

Don't you have to put

padding: 0 ... I don't think you can put "none"

same thing with the margin: 0

**Rob_D** · Oct 23, 2006 06:39

Try:

Code:

padding:0; margin:0;

**ShinyCDMan** · Oct 23, 2006 06:42

Thanks guys, still got the same problem though.

**ShinyCDMan** · Oct 23, 2006 06:45

Here's a screengrab, with border:1px solid red; set on the div.

http://img72.imageshack.us/img72/4056/wtfbordermi1.gif

**karinne** · Oct 23, 2006 06:48

Could we have a link?

**DaveWoods** · Oct 23, 2006 06:50

start your css with

Code:

* {
   padding: 0px;
   margin: 0px;
}

That will set all padding and margins on your page to zero and then you can apply it wherever you need it.

Also, make sure that you've got a valid doctype. A link for us to see will certainly help as the problem might exist outside of the code you've actually posted.

**ShinyCDMan** · Oct 23, 2006 06:57

Thanks for your help, guys. Here's a link as requested...

http://www.dis-play.net/dev/test/test.html

**karinne** · Oct 23, 2006 07:13

Man ... that's really weird.

Why don't you add the image to the div instead?

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}

div {
background:url('http://www.dis-play.net/dev/test/img/newsDivider.gif') no-repeat left top;
height:100px;
width:306px;
}

div.first {
  background: none;
  }
</style>
</head>

<body>
<div class="first">text</div>
<div>text</div>
</body>

	
</html>

**DaveWoods** · Oct 23, 2006 07:18

ah, I've got a much easier solution....

Internet Explorer 6 cannot display a block level element at a smaller height than it's base font.... sooooo if you add font-size: 0; to that class then that'll fix the problem

**karinne** · Oct 23, 2006 07:22

^ nice ... I didn't think of that

**ShinyCDMan** · Oct 23, 2006 07:23

Originally Posted by csswiz

ah, I've got a much easier solution....

Internet Explorer 6 cannot display a block level element at a smaller height than it's base font.... sooooo if you add font-size: 0; to that class then that'll fix the problem

I KNEW it had to be something like that!

Thanks, guys!

User Tag List

Thread: Padding at bottom of DIV tag in IE

Thread Tools

Display

Padding at bottom of DIV tag in IE

Bookmarks

Bookmarks

Posting Permissions