Post #196,418
2/26/05 12:59:54 PM
|
Question on Height attributes for DIV/SPAN tags
Ran into some html that acts differently between IE and Firefox (surprise, surprise). In investigating, I'm not exactly sure I understand how the height style attribute is supposed to work for div and span tags. What I wanted to do was have a div or span section that had a fixed height and let the overflow attribute take care of scrollbars. I wrote 4 test cases, using div and span, along with the document type of html 4.0 transitional and xhtml strict. I can't figure out why the height tag is ignored by Firefox or why IE ignores it in an XHTML document. Maybe they just don't like providing layout control? Here's the Results, with links to the cases and the source below: | | HTML 4.0 | XHTML 1.0 | | | [link|http://www.angelfire.com/tx4/cus/mozilla/divTransitional.html|DIV] | [link|http://www.angelfire.com/tx4/cus/mozilla/spanStrict.html|SPAN] | [link|http://www.angelfire.com/tx4/cus/mozilla/divStrict.html|DIV] | [link|http://www.angelfire.com/tx4/cus/mozilla/spanTransitional.html|SPAN] | | Firefox | no scrollbars | ignored | ignored | ignored | | IE | ok | ok | ignored | ignored |
\n<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">\n<html>\n <head>\n <title>DIV Height Test - HTML 4.0 Transitional</title>\n <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\n </head>\n <body>\n <div style='height:20;width:100%;overflow:auto;'>\n GRR<br/>\n LRPD<br/>\n zIWETHEY<br/>\n </div>\n </body>\n</html>\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">\n<html>\n <head>\n <title>SPAN Height Test - HTML 4.0 Transitional</title>\n <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\n </head>\n <body>\n <p>\n <span style='height:20;width:100%;overflow:auto;'>\n GRR<br/>\n LRPD<br/>\n zIWETHEY<br/>\n </span>\n </p>\n </body>\n</html>\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html>\n <head>\n <title>DIV Height Test - XHTML Strict</title>\n <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />\n </head>\n <body>\n <div style='height:20;width:100%;overflow:auto;'>\n GRR<br/>\n LRPD<br/>\n zIWETHEY<br/>\n </div>\n </body>\n</html>\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html>\n <head>\n <title>SPAN Height Test - XHTML Strict</title>\n <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />\n </head>\n <body>\n <p>\n <span style='height:20;width:100%;overflow:auto;'>\n GRR<br/>\n LRPD<br/>\n zIWETHEY<br/>\n </span>\n </p>\n </body>\n</html>\n
|
Post #196,425
2/26/05 3:50:50 PM
2/26/05 3:52:06 PM
|
OS X Firefox has scrollbars for HTML 4.0 DIV
However they are so small that they are difficult to use.
[image|http://spiceware.org/albums/Misc/DIV_HTML_4_0.png||||]
Darrell Spice, Jr. [link|http://spiceware.org/gallery/ArtisticOverpass|Artistic Overpass]\n[link|http://www.spiceware.org/|SpiceWare] - We don't do Windows, it's too much of a chore
Edited by SpiceWare
Feb. 26, 2005, 03:52:06 PM EST
|
Post #196,449
2/26/05 8:52:51 PM
|
Re: Question on Height attributes for DIV/SPAN tags
Use "height: 2em;" instead of "height: 20;" and it works in Firefox on Linux for 4.01 transitional.
Regards,
-scott anderson
"Welcome to Rivendell, Mr. Anderson..."
|
Post #196,464
2/26/05 11:05:30 PM
|
That'll do the trick. Thanks.
|
Post #196,599
2/28/05 9:07:21 AM
|
Height means nothing on a span tag
Unless you change the properties of the span, a span tag is an inline element and height should be ignored. IE is simply wrong to even consider it.
For the DIV case, with overflow set to auto, there seems to be a mininum size that an object has to be before Firefox will put the scroll bars in. I didn't work out the exact point, but if you put more text in the block and set the pixel height to 100px the scroll bars will show up. This is technically allowed under the CSS 2.1 spec, since auto means it is up to the browser to decide how to handle it.
Oddly enough, on my computer IE does put the scroll bar on the text in the XHTML DIV case. I have no idea why it would show up on some computers and not on others.
Jay
|
Post #196,604
2/28/05 9:43:14 AM
|
Makes sense for the most part
But the last question is why the XHTML acts different for DIV elements than the HTML 4.0 transitional documents? This occurs in both browsers and I'm not sure why the change. Also, while I'm at it: Is there a DOM way of doing things with regard to measuring coordinates relative to the viewable area? What I need is to measure the view resolution but the following attributes are not DOM'd: - offsetHeight
- clientHeight
- clientWidth
- offsetWidth
- clientTop
- clientWidth
So without these, how is one supposed to know how to do calculations on where the element is and where it should be.
|
Post #196,610
2/28/05 11:06:35 AM
|
Re: Makes sense for the most part
But the last question is why the XHTML acts different for DIV elements than the HTML 4.0 transitional documents? This occurs in both browsers and I'm not sure why the change. I'm not sure about your specific example, but there are a lot of little differences between XHTML and HTML 4.x in the obscure corners of the language. This is not always because of differences in the standards. Both Microsoft and the Mozilla foundation took XHTMl as a chance to fix some long standing bugs in their rendering that they didn't fix previously because it would break existing pages. Jay
|
Post #196,616
2/28/05 11:35:12 AM
|
Know it fixes problems related to well-formedness
But I ran the 4 examples though the W3C validator and they all check out. Which begs the question of why the height attribute on the DIV tag is ignored in the XHTML document.
|
Post #196,625
2/28/05 12:05:05 PM
|
Seems to be the lack of unit identifier
The CSS spec requires that measurements have a unit identifier, such as px for pixels or pt for points.
It appears to be a case where Firefox just assumes pixels when rendering HTML but ignores the incorrect declaration when rendering in XHTML. This passes the W3 validator because the CSS validator is a seperate utility.
If you put ".div {height:20;width:100%;overflow:auto;}" into the CSS validator it kicks it out for not having a unit on the height.
Jay
|
Post #196,627
2/28/05 12:07:48 PM
|
That was what I was trying to grok. Thanks.
|
Post #196,721
2/28/05 10:39:10 PM
|
Have a rummage in here.
[link|http://www.quirksmode.org/|http://www.quirksmode.org/]
There's info in there about positioning and locating elements. Hint: it's not easy.
Wade.
Is it enough to love
Is it enough to breathe
Somebody rip my heart out
And leave me here to bleed
| |
Is it enough to die
Somebody save my life
I'd rather be Anything but Ordinary
Please
| -- "Anything but Ordinary" by Avril Lavigne. |
|
Post #197,065
3/3/05 4:53:40 PM
|
20 what?
You've got "height:20", but 20 what? Pixels? Ems? Percent? Elephants?
--\r\nYou cooin' with my bird?
\r\n[link|http://www.shtuff.us/|shtuff]
|
Post #197,066
3/3/05 4:55:15 PM
|
Well, you'd think that have a default.
But, yea, that was the answer that I was missing.
|
