height: 1px in IE

How to display height 1px in IE

[sgina22]

.th20 {
background-color: #474747;
height: 1px;
width: 500px;
font-size: 1px;
z-index: 1;
}

<div class=th1></div>

Is there a workaround to have this display 1px height in IE?

[Fotiman]

Just a guess, but maybe try adding:

overflow: hidden;

[Veil]

I'm sure you use class 'th20' instead of 'th1'.

Works fine here in IE7. Maybe leave out the font-size part, they could use more space then defined, because of 'f','g','l', etc. characters. Or try line-height instead.

[Xapti]

That code works okay for IE6. (well it actually ends up giving 2px, so I guess not)

Overflow:hidden does work perfect though. You can then remove the font-size altogether.

You don't need the z-index though, unless it's required in your page because of positioning. In fact z-index doesn't even work unless the element's position is set to something other than static.

[edited by: Xapti at 4:26 am (utc) on June 11, 2007]

[Setek]

I guess I'll be the one to go ahead and ask... what's the purpose?

A 1px-tall container which has nothing except a background colour? Sounds an awful lot like a 1px-thick border here :)

Isn't there a container above or below it that you could attach the border to? It seems a bit silly to have a container dedicated to giving you a border...

[Xapti]

I could probably think up some situations where you'd need a line, but wouldn't fit a scenario where just a border could be used instead.

take, for instance, absolutely positioned line going over multiple elements with different heights

or acting where it doesn't span the whole width of the element. Lets say you want two paragraphs separated by a width 50% line (like a horizontal rule). HRs can be messy to deal with cross-browser support (well at least for fancy ones). I'm not sure if you can easily get a 1px high red horizontal rule through all major browsers, and if you can, it might take work.

I guess the person could use an image instead of a container too, though. I guess that makes the most sense.

[edited by: Xapti at 8:15 am (utc) on June 11, 2007]

[SilverLining]

Hi there.

Try changing

background-color

to

border-bottom

and add

line-height: 1px 

as mentioned before. Seems to work fine in Firefox, IE6 and IE7 (standalone).

.th20 {
/*background-color: #474747;*/
border-bottom: 1px solid #474747;
height: 1px;
width: 500px;
font-size: 1px;
/*z-index: 1;*/
line-height: 1px;
}

Is that what you were intending to achieve or is it particularly for a pixel perfect layout?

[edited by: SilverLining at 10:29 am (utc) on June 12, 2007]