«

What is the minimum height that can be set on an emtpy <div>...?
The below appears to get down to about 10px and won't go smaller.
Is there a way without using <HR>...?

<div style="width:100%; height:2px; background-color:#AABBCC;
margin-bottom:0px"></div>

thanks

shank schrieb:
>
> What is the minimum height that can be set on an emtpy <div>...?
> The below appears to get down to about 10px and won't go smaller.
> Is there a way without using <HR>...?
>
> <div style="width:100%; height:2px; background-color:#AABBCC;
> margin-bottom:0px"></div>

<div style="border:solid 1px #AABBCC;">Your content here </div>

Of course it would be better to put the style rule in an embedded or
linked stylesheet.


Matthias

"Matthias Gutfeldt" <say-no-to-> wrote in message
news:...
> shank schrieb:
> >
> > What is the minimum height that can be set on an emtpy <div>...?
> > The below appears to get down to about 10px and won't go smaller.
> > Is there a way without using <HR>...?
> >
> > <div style="width:100%; height:2px; background-color:#AABBCC;
> > margin-bottom:0px"></div>
>
> <div style="border:solid 1px #AABBCC;">Your content here </div>
>
> Of course it would be better to put the style rule in an embedded or
> linked stylesheet.
>
>
> Matthias
>
Thanks, but that did not resolve my issue. I wanted to make a rectangle
across the page (100%) and 2px in height. It would imitate a line 2px in
height. I assumed I could do this with a <div> and setting the height to
2px. That does not work. The minimum height appears to be 10px. At least
that's as short as I can get it to go.
thanks

shank schrieb:
>
> "Matthias Gutfeldt" <say-no-to-> wrote in message
> news:...
> > shank schrieb:
> > >
> > > What is the minimum height that can be set on an emtpy <div>...?
> > > The below appears to get down to about 10px and won't go smaller.
> > > Is there a way without using <HR>...?
> > >
> > > <div style="width:100%; height:2px; background-color:#AABBCC;
> > > margin-bottom:0px"></div>
> >
> > <div style="border:solid 1px #AABBCC;">Your content here </div>
> >
> > Of course it would be better to put the style rule in an embedded or
> > linked stylesheet.
> >
> >
> > Matthias
> >
> Thanks, but that did not resolve my issue. I wanted to make a rectangle
> across the page (100%) and 2px in height. It would imitate a line 2px in
> height. I assumed I could do this with a <div> and setting the height to
> 2px. That does not work. The minimum height appears to be 10px. At least
> that's as short as I can get it to go.

Ah, OK - simply notch up the border to 2px.

But if you insist on torturing that poor innocent empty DIV into
something it was never meant to be: The problem with minimal element
height is usually the font-size or the line-height properties, plus
possibly margin and padding. Set those properties to improbably small
sizes and see what happens.


Matthias

"Matthias Gutfeldt" <say-no-to-> wrote in message
news:...
> shank schrieb:
> >
> > "Matthias Gutfeldt" <say-no-to-> wrote in message
> > news:...
> > > shank schrieb:
> > > >
> > > > What is the minimum height that can be set on an emtpy <div>...?
> > > > The below appears to get down to about 10px and won't go smaller.
> > > > Is there a way without using <HR>...?
> > > >
> > > > <div style="width:100%; height:2px; background-color:#AABBCC;
> > > > margin-bottom:0px"></div>
> > >
> > > <div style="border:solid 1px #AABBCC;">Your content here </div>
> > >
> > > Of course it would be better to put the style rule in an embedded or
> > > linked stylesheet.
> > >
> > >
> > > Matthias
> > >
> > Thanks, but that did not resolve my issue. I wanted to make a rectangle
> > across the page (100%) and 2px in height. It would imitate a line 2px in
> > height. I assumed I could do this with a <div> and setting the height to
> > 2px. That does not work. The minimum height appears to be 10px. At least
> > that's as short as I can get it to go.
>
> Ah, OK - simply notch up the border to 2px.
>
> But if you insist on torturing that poor innocent empty DIV into
> something it was never meant to be: The problem with minimal element
> height is usually the font-size or the line-height properties, plus
> possibly margin and padding. Set those properties to improbably small
> sizes and see what happens.
>

What kind of element should I be using? I resorted to <div> because <hr> was
creating to much margin. If you can picture this scenerio...
1) a 2px colored line going across the page
2) a 2 px white space going across the page
3) a 30px colored area going across the page (I have this)
4) a 2 px white space going across the page
5) a 2px colored line going across the page

I had this using a table, but I'm trying to get the same look with CSS.
thanks!

shank wrote:

> Thanks, but that did not resolve my issue. I wanted to make a rectangle
> across the page (100%) and 2px in height. It would imitate a line 2px in
> height.

<div style="border-top: 2px solid #AABBCC;"></div>

But why not just use <hr>?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

Matthias wrote:

> shank schrieb:

>> "Matthias Gutfeldt" <say-no-to-> wrote in message
>> news:...
>> > shank schrieb:
>> > >
>> > > What is the minimum height that can be set on an emtpy <div>...?
>> > > The below appears to get down to about 10px and won't go smaller.
>> > > Is there a way without using <HR>...?
>> > >
>> > > <div style="width:100%; height:2px; background-color:#AABBCC;
>> > > margin-bottom:0px"></div>
>> >
>> > <div style="border:solid 1px #AABBCC;">Your content here </div>
>> >
>> > Of course it would be better to put the style rule in an embedded or
>> > linked stylesheet.
>> >
>> >
>> > Matthias
>> >
>> Thanks, but that did not resolve my issue. I wanted to make a
>> rectangle
>> across the page (100%) and 2px in height. It would imitate a line 2px
>> in
>> height. I assumed I could do this with a <div> and setting the height
>> to
>> 2px. That does not work. The minimum height appears to be 10px. At
>> least
>> that's as short as I can get it to go.

> Ah, OK - simply notch up the border to 2px.

> But if you insist on torturing that poor innocent empty DIV into
> something it was never meant to be: The problem with minimal element
> height is usually the font-size or the line-height properties, plus
> possibly margin and padding. Set those properties to improbably small
> sizes and see what happens.


> Matthias

IOW, it's easier to do the trick with HR.

shank schrieb:
>
> "Matthias Gutfeldt" <say-no-to-> wrote in message
> news:...
> > shank schrieb:
> > >
> > > "Matthias Gutfeldt" <say-no-to-> wrote in message
> > > news:...
> > > > shank schrieb:
> > > > >
> > > > > What is the minimum height that can be set on an emtpy <div>...?
> > > > > The below appears to get down to about 10px and won't go smaller.
> > > > > Is there a way without using <HR>...?
> > > > >
> > > > > <div style="width:100%; height:2px; background-color:#AABBCC;
> > > > > margin-bottom:0px"></div>
> > > >
> > > > <div style="border:solid 1px #AABBCC;">Your content here </div>
> > > >
> > > > Of course it would be better to put the style rule in an embedded or
> > > > linked stylesheet.
> > > >
> > > >
> > > > Matthias
> > > >
> > > Thanks, but that did not resolve my issue. I wanted to make a rectangle
> > > across the page (100%) and 2px in height. It would imitate a line 2px in
> > > height. I assumed I could do this with a <div> and setting the height to
> > > 2px. That does not work. The minimum height appears to be 10px. At least
> > > that's as short as I can get it to go.
> >
> > Ah, OK - simply notch up the border to 2px.
> >
> > But if you insist on torturing that poor innocent empty DIV into
> > something it was never meant to be: The problem with minimal element
> > height is usually the font-size or the line-height properties, plus
> > possibly margin and padding. Set those properties to improbably small
> > sizes and see what happens.
> >
>
> What kind of element should I be using? I resorted to <div> because <hr> was
> creating to much margin. If you can picture this scenerio...
>
> 1) a 2px colored line going across the page
> 2) a 2 px white space going across the page
> 3) a 30px colored area going across the page (I have this)
> 4) a 2 px white space going across the page
> 5) a 2px colored line going across the page

Such a simple decorative line is so much easier done with a GIF!

But you could check out CSS1 and the Decorative HR:
<http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html>.


Matthias

"Toby A Inkster" <> wrote in message
news. ..
> shank wrote:
>
> > Thanks, but that did not resolve my issue. I wanted to make a rectangle
> > across the page (100%) and 2px in height. It would imitate a line 2px in
> > height.
>
> <div style="border-top: 2px solid #AABBCC;"></div>
>
> But why not just use <hr>?

I couldn't get the margin-bottom to reflect 2px. There was too much space
and it wouldn't go away.
I did resolve the issue though by using font-size:1% in the <div> tag. Then
height:2px.
That worked great... so far...
thanks!

Matthias Gutfeldt wrote:

> shank schrieb:
>>
>> I wanted to make a rectangle
>> across the page (100%) and 2px in height. It would imitate a line 2px in
>> height.
>
> Ah, OK - simply notch up the border to 2px.
>
> But if you insist on torturing that poor innocent empty DIV into
> something it was never meant to be: The problem with minimal element
> height is usually the font-size or the line-height properties, plus
> possibly margin and padding. Set those properties to improbably small
> sizes and see what happens.

try overflow:hidden

but I agree that a border might be the best method

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.