Line-height and DOCTYPE

HTML & CSS
1

Hello, I’m working on changing a site’s DOCTYPE from XHTML Transitional to HTML5. Problem: after DOCTYPE change, line height of anchor tag text increases.

Has anyone run into this before? The immediate solution that comes to mind is declaring CSS “line-height” properties on all affected elements. However, I’m wondering if there is a more universal way to address the problem. i.e. Can the cascade somehow be taken advantage of, therefore only requiring one CSS rule?

I’ve noticed this issue in FF6/Mac, Chrome/Mac, Safari/Mac, and IE8. (IE7 is fine and I didn’t test IE6.)

Observe:

XHTML Transitional DOCTYPE:

HTML5 DOCTYPE (nothing else changed):

HTML

<p>Quisque arcu odio, tincidunt at egestas eget, sollicitudin quis purus. Duis est metus, eleifend id placerat consectetur, mattis ac velit. Nam eu lectus sem. Ut blandit nunc a neque luctus at convallis sem consequat. Pellentesque accumsan consectetur risus, quis facilisis velit gravida in.</p>
		
<p><a href="#">Nulla tortor diam, vestibulum et lacinia a, porttitor nec lectus. Cras feugiat, nunc vitae lacinia pretium, nisi tortor porttitor enim, vitae vestibulum lorem erat sagittis lorem. Vivamus non placerat nisi. Ut non suscipit tellus. Vestibulum auctor lacinia augue facilisis commodo. Mauris varius felis id dolor auctor vehicula. Aenean nunc enim, iaculis vitae luctus non, eleifend in ligula. Suspendisse vel nunc velit, ut fermentum elit.</a></p>

CSS

body {
			font-family: arial,sans-serif;
			font-size: 100%;
		}

		a {
    		font-size: 12px;
		}
2

It could be because you’re setting a font size on a { … }, which I would generally say is a bad thing to do. <a> is an inline element, and you don’t want inline elements appearing at a different font size from their surrounding text. A better solution may be to give the <p> a class if you want to change the size of all of it. Also, I’m wary about setting any text size in px, but especially when you’re using % elsewhere. Just stick with % throughout! I’m not sure if that’s what’s causing the bug, but it could well be.

If neither of those problems solves it, can you post a link to a page that’s showing the problem?

3

Moving the font size from the anchor element to the paragraph tag did the trick! Thanks!

Strange that this issue occurs in the first place, though.

4

Possibly because the “XHTML” doctype was transitional, which allows all sorts of garbage in.

The “HTML5” doctype doesn’t allow the browser to make some of the assumptions it is allowed to make with a transitional doctype (even though browsers in general do not bother looking at doctypes at all, there are minor CSS differences between “standards mode” and “almost standards mode” for some elements in some browsers… some browsers may go into the almost-standards mode if you have something goofed up in your tranny doctype).

You can test my hypothesis by going back to the old code and switching the tranny doctype to a Strict one:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">