Welcome to WebmasterWorld Guest from 174.129.96.175

Forum Moderators: not2easy

Minimum height for DIV tags?

   
12:01 am on Jan 25, 2007 (gmt 0)

5+ Year Member



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;}

12:19 am on Jan 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

5:24 am on Jan 25, 2007 (gmt 0)

10+ Year Member



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.
7:08 am on Jan 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

5:39 pm on Jan 25, 2007 (gmt 0)

5+ Year Member



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?

6:21 pm on Jan 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

7:42 pm on Jan 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

11:22 pm on Jan 25, 2007 (gmt 0)

5+ Year Member



That did it, Fotiman. Thanks!
1:28 am on Jan 26, 2007 (gmt 0)

10+ Year Member



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month