Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > setting height on <div>

Reply
Thread Tools

setting height on <div>

 
 
shank
Guest
Posts: n/a
 
      10-06-2003
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


 
Reply With Quote
 
 
 
 
Matthias Gutfeldt
Guest
Posts: n/a
 
      10-06-2003
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
 
Reply With Quote
 
 
 
 
shank
Guest
Posts: n/a
 
      10-06-2003

"Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


 
Reply With Quote
 
Matthias Gutfeldt
Guest
Posts: n/a
 
      10-06-2003
shank schrieb:
>
> "Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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
 
Reply With Quote
 
shank
Guest
Posts: n/a
 
      10-06-2003

"Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> shank schrieb:
> >
> > "Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed)...
> > > 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!


 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      10-06-2003
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

 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      10-06-2003
Matthias wrote:

> shank schrieb:


>> "Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>> > 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.


 
Reply With Quote
 
Matthias Gutfeldt
Guest
Posts: n/a
 
      10-06-2003
shank schrieb:
>
> "Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > shank schrieb:
> > >
> > > "Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
> > > news:(E-Mail Removed)...
> > > > 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
 
Reply With Quote
 
shank
Guest
Posts: n/a
 
      10-06-2003
"Toby A Inkster" <(E-Mail Removed)> wrote in message
news(E-Mail Removed). ..
> 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!


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      10-07-2003
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
textbox height different than input height tshad ASP .Net 1 03-08-2007 10:04 PM
measuring web controls height at runtime (or converting .height % to px) Wotney ASP .Net 1 10-25-2006 01:39 PM
how to get specific cell height without hard-coding a height value laredotornado@zipmail.com HTML 0 08-19-2006 08:13 PM
Setting <img> height to match <td> height MyndPhlyp Javascript 5 12-22-2003 05:30 AM



Advertisments