CODEWITHSUNDEEP
htmlxhtmlcss
TurdPile
TurdPile

Reputation: 1036

line-height not working after change from XHTML1 Trans to HTML5 doctype

A website that I've been working on was originally created using XHTML 1.0 Transitional - however, since I dislike it, I switched over to the HTML5 doctype.

When I refreshed the page, for some reason there is a subtle shift in the text on the page.

The line-height stops working when it goes under a certain pixel (usually the font-size). This throws off the visual-alignment of the menu I have set up for logged in users. For example, if the font-size is set to 14 pixels, line-height:14px; will display the same exact thing as line-height:1px; when you know 1px should have overlapping text with any font-size over 1px.

You can view a demonstration at [removed, out of date] -> Test login is: TestPile/test. The menu shows up where you login (after you login that is).

Any thoughts on how to get line-height to react as it normally should?

Upvotes: 1

Views: 640

Answers (2)

MrJ
MrJ

Reputation: 143

I had a similiar issue. In quirks mode <span> (and other inline elements) can have a smaller line-height than their parent. In HTML5 mode, that does not work the same way. I switched to <div> there which will handle the line-height as before. Or you change your inline elements to use display:inline-block.

Upvotes: 0

Alohci
Alohci

Reputation: 83051

The HTML5 doctype, being the more modern doctype, causes standards mode in browsers. The XHTML 1.0 Transitional doctype causes limited-quirks mode. The behaviour you get with the HTML5 doctype is the correct one, so you are really asking "How do I make line-height behave like it shouldn't?". That's going to be difficult.

Here's a description of the differences in line-height calculations between limited-quirks(aka almost standards) and standards modes: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

You will need to embrace the standards mode behaviour and adjust your layouts accordingly.

Upvotes: 1

Related Questions