Minimum height for DIV tags?

[lateatnight]

I would like to create a DIV that is only 7px high to include a thin, tiling BG graphic. But it seems that IE7 only accepts 10px as a minimum height -- I can make it taller, but anything less than 10px has no effect. Looks OK in Firefox. Any ideas? Here is the DIV tag in question:

#blank {width:770px; height:7px; background:#000000 url("/images/layout/horizontal.gif") top left;}

[cmarshall]

I would suggest a couple of things:

1) Make sure that you have a valid DOCTYPE that will keep IE out of Cap'n Quirk's Mode.

2) Apply the "global style":

* { margin: 0; padding: 0 }

I'll lay odds your element has some inherent padding that is preventing the collapse.

[mep00]

A more semantically correct choice than an empty div would be to use a horizontal rule:

<hr id="blank" />

That's what it's there for. I've tested it in both Firefox 2, Konqueror 3.5.6, Opera 9.1, Amaya 8.53, and IE 5.0, 5.5, and 6.0, and it works fine, so it should also work in Safari and IE7. Two possible advantage of <hr /> are that it will also work in text browsers (though only as a plain line) and screen readers (I'm guessing about screen readers).

I'll lay odds your element has some inherent padding that is preventing the collapse.

Sounds like a safe bet.

[Robin_reala]

I’ve had problems before with this in certain situations (I think when you have any text inside of your element) and found that I’ve had to set line-height as well. So in you case, try adding line-height:7px to your CSS.

mep00’s post is probably a better idea but be warned that IE has some inconsistencies when rendering <hr>s. I’ve had problems removing the inset borders before without using the non-standard noshade attribute. Usually these days I actually put an <hr> inside a classed <div> then hide the <hr> using CSS (usually the off-left method of position:absolute;left:-9999px;).

[edited by: Robin_reala at 7:09 am (utc) on Jan. 25, 2007]

[lateatnight]

I have a valid doctype. The * { margin: 0; padding: 0 } trick didn't work. I don't want to use an HR; I need to display a GIF that is part of the design.

Any other ideas?

[cmarshall]

Well, I do this all the time.

I noticed that you didn't specify margin or padding in your CSS. I assumed that it was defined elsewhere. Now that I think about it, I don't think IE6 understands the *, and people use it to hack.

This should work:

div#blank {margin:0; padding:0; width:770px; height:7px; background:#000000 url(/images/layout/horizontal.gif) top left;}

Don't use quotes in a CSS URI. IE hates 'em.

[Fotiman]

I believe the problem is that IE doesn't correctly handle overflow. Firefox and other browsers will let your content overflow it's boxes, but IE will automatically stretch the box to fit.

Try adding this:

overflow: hidden;

I think that will fix it.

[lateatnight]

That did it, Fotiman. Thanks!

[mep00]

I don't want to use an HR; I need to display a GIF that is part of the design.

An <hr> will display a background if you gives it one via css. All you need to do is give it a height, width, and background-image. It also has the advantage of displaying when viewed without css.