smallest css layer possible

[phil speakman]

I am trying to create a layers in css that is one pixel high and several in length, but everytime i set it as such (using dreamweaver) the resulting live is as wide as i specified but 4 pixels high. Anyone know why/how to get round it?
Cheers Phil.

[DougBTX]

What type of layers are you using in DWMX? Table based ones or CSS based ones?

THe only thing I can think that you want to have 1px high is an image, so why not just use an image?

<img src="..." height="1" width="100" alt="" />

If I know more about your layout, I could probably give you better advice. For example, this mught be what you want:

.line { border-top: 1px solid red; width: 100px; font-size: 0; line-height: 0;}

<div class="line">text</div>

[phil speakman]

i ended up using an image cos i couldn't do it with css - but i'm sure it can be done - the line you posted was what i was using pretty much and it don't work - well didn't for me.
For some reason i can't ftp or i'd upload it to prove it, cheers for your time though...
Phil

[Percept]

I'm not sure about this but I think it has to do with the padding or font-size.

[jag5311]

Phil, I think I know the solution. I am also a css+dreamweaver user and I can tell you from experience, it was a pain in the butt to finally figure it out, but it seems so simplistic.

When you have the css window open (Font family, font size, etc..) you want to choose 1 pixel for the font size, and then go down to BOX (i think) and choose 1 pixel as the height there as well. Also, make sure you don't have the (SPACER characters) inside your div, the one that is like pushing the spacebar. That automatically creates the illusion in the div that there is a character there and makes the height accordingly. But make both the font size and the height of the div 1 pixel, and it should work out.

[Anim8d Life]

Not quite sure what the problem really is, but this will give you 1px x 50px using CSS. If anything else is within the container i.e. TD tag, it will expand to fit.

.layer
{
width:50; height:1; font-size: 0; line-height: 0;
}

[blufive]

Did you test cross browser?

Why do I ask?

Internet Explorer tries to second-guess you. If you have a div with something in it (text, for example - including whitespace), and try to set the height of the div smaller than the height of the content, IE will think "Oh, you didn't want to do that" and "helpfully" make the div tall enough to show the text. Hence all the advice above to set the font-size and line height to be tiny.

Mozilla (and, I suspect, Opera) will set the Div to the size you specified, regardless. This leads to all kinds of problems when people specify their divs too small, and then complain that Moz is squashing all their text - no, it's doing what you asked for, it's IE that's being disobedient.

[Anim8d Life]

Actually it would depend on the purpose of such a small div. If it's being used in place of a spacer.gif, then there aren't any issues as nothing will be within the DIV.

[phil speakman]

Cheers - indeed it was a font size/line-height issue.
It all works now.
Phil