homepage Welcome to WebmasterWorld Guest from 204.236.254.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Minimum height for DIV tags?
lateatnight




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

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




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

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




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

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




msg:3231123
 7:08 am on Jan 25, 2007 (gmt 0)

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




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

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




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

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




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

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




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

That did it, Fotiman. Thanks!

mep00




msg:3232289
 1:28 am on Jan 26, 2007 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved