Home/ Questions/Q 8174295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:24:58+00:00

This one’s a head scratcher. I’ve created a commented jsFiddle to demonstrate the phenomenon

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 (&nbsp; for example), then line-height kicks in on Transitional DOCTYPEs and the button renders at the full height.

    • 0