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?
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.