DOCTYPE affects rendering of line-height
css, doctype, html, twitter-bootstrap
Solution
While writing this question and the related jsFiddle demo, I wound up doing some more digging and found out what's happening. Rather than scrap the question, I figured I may as well post it with this answer.
What I've gathered from inspecting the elements in Chrome after switching DOCTYPES is this:
- `.btn` has no height specified, only `line-height: 18px` and `padding: 4px 10px`
- in HTML5, the final height of the caret-only button is 18px, same as the defined `line-height`
- in a Transitional DOCTYPE, the height of the caret-only button is 11px, same as the `outerHeight()` of the `caret` (`border-top` + `margin-top`), but less than the `line-height` of the button.
So, I can only assume that Strict (and HTML5) DOCTYPEs enforce `line-height` as some kind of `min-height`; even if there is no text in the element, it applies `line-height` ... whereas Transitional DOCTYPES do not.
When I add some text to the caret-only button (` ` for example), then `line-height` kicks in on Transitional DOCTYPEs and the button renders at the full height.
Problem
This one's a head scratcher. I've created a commented jsFiddle to demonstrate the phenomenon I recently encountered while using Twitter's Bootstrap framework to create some dropdown buttons. http://jsfiddle.net/jackwanders/WKvPv/ Basically, when using an HTML5, HTML 4 Strict or XHTML Strict DOCTYPE, the button renders as designed. However, when using an HTML4 or XHTML Transitional DOCTYPE, the caret button renders with a shorter height. Here's the relevant CSS from Bootstrap for the `<span class="caret">` (i've removed styles that don't matter, like colors and gradients): ``` .caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } .btn .caret { margin-top: 7px; margin-left: 0; } .btn { display: inline-block; *display: inline; padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; line-height: 18px; *line-height: 20px; text-align: center; vertical-align: middle; } ``` Why does the DOCTYPE affect the height of the button? If `line-height` is set to 18px, why would the height be less than 18px? PS - Yes, I'm aware that Bootstrap requires HTML5, but I'd imagine that's with respect to the HTML5 features utilized, not how the DOCTYPE renders CSS styles