hasLayout.net

Diagnosis

Affected browsers:

All versions of Internet Explorer.

Visual appearance:

Block-level elements are misplaced on horizontal (and possibly vertical) axis. For example, left-aligned block-level elements get centered.

Triggers:

No triggers, broken text-align property implementation.

back to top

Overview

Here is the bug that might ring a bell right away or may completely leave you clueless, especially if you didn't "just write" the code.

Some of you may recall how you would use text-align property to center block-level elements in IEs below version 6 due to the broken auto value handling with . The reason it worked is because was also broken and instead of aligning only inline-level content it affected block-level elements as well.

The margin bug was fixed in IE6, however text-align bug was left forgotten and still lives in IE7.

back to top

Demo

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

HTML Code:

skip to CSS code

<div id="container1">
	Give me the aligns!
	<p>Oh noes!</p>
</div>

<div id="container2">
	Give me the aligns!
	<p>Oh noes!</p>
</div>

CSS Code:

skip to content

#container1 { text-align: center; }
#container2 { text-align: right; }
	p { width: 50%; }

Our demo consists of two containers #container1 and #container2, both of which have text-align applied to them: #container1 { text-align: center; } #container2 { text-align: right; }; both of which have plain text (inline-level content) and a paragraph (block-level content) inside.

In standards compliant browsers everything looks fine, all of text is either centered or right aligned. For those wondering why text inside paragraphs (<p> element) is also affected I'd like to remind you that text-align property is inherited.

What you will note in all current version of Internet Explorer is that our paragraphs are aligned themselves; text-align on our containers affected block-level elements, which it shouldn't.

back to top

Solution (CS)

If you are not perfectly sure that you have semantic markup, chances are that you would want to read the Clean Markup Solution instead.

This fix uses only two rules (possibly even one) in your main stylesheet and is suitable for rare cases when you have a text node as a sibling of a block-level element and you want to apply text-align to that text. Let's take a look:

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

HTML Code:

skip to CSS code

<div id="container1">
	Give me the aligns!
	<p>Oh noes!</p>
</div>

<div id="container2">
	Give me the aligns!
	<p>Oh noes!</p>
</div>

CSS Code:

skip to content

/* contain float 
	- irrelevant to the bug, but something you might need to do */
div {
	overflow: hidden; 
	display: inline-block;
}
div { display: block; } /* restore original display, IE hasLayout method */

/* END of float containing */

#container1 { text-align: center; }
#container2 { text-align: right; }
	p {
		width: 50%;
		float: left;
	}

Let me explain the idea of the fix, since the code has some extra bits that are not exactly relevant. What fixes the bug is the float, simple as that. Yes, this fix is not always possible to implement, if that's the case you may want to try the Clean Markup solution for this bug instead.

Besides p { float: left; } and the rest of the code from the demo you will notice a block of CSS code marked with float containing Microsoft, it is there because we are floating the descendants (<p>s), thus we need to contain them in the parent elements. The technique is known as float containment and is outside the scope of this tutorial. I may note that the div { display: inline-block; } div { display: block; } is a method to give "layout" in IE which may be not suitable or not needed in your situation.

back to top

Solution (CMS)

I can't think of too many cases where you would have plain text with a block-level sibling element. Thus, this solution might not only fix the Text-Align bug but also improve the semantic structure of your document. The idea of the solution is to encapsulate your plain text, or rather your inline-level content which text-align should affect, inside an appropriate element. If you don't know HTML as the back of your hand I suggest you familiarize yourself with HTML elements. The HTML Elements Best Practice Sheet might come in handy as well.

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

HTML Code:

skip to CSS code

<div id="container1">
	<p id="fixed1">Give me the aligns!</p>
	<p>Oh noes!</p>
</div>

<div id="container2">
	<p id="fixed2">Give me the aligns!</p>
	<p>Oh noes!</p>
</div>

CSS Code:

skip to content

p { width: 50%; }

#fixed1,
#fixed2 {
	width: auto;
	text-align: center;
}
#fixed2 { text-align: right; }

We chose <p> element for our text that we want to align, I will not argue about semantics, this is just an example so <p> will do just fine.

Regarding CSS code, note that we no longer have text-align neither on #container1 nor on #container2, we moved those to #fixed1 and #fixed2 which are the extra elements we have added. If you don't understand why #fixed1 gets text-align: center and #fixed2 gets text-align: right I suggest you read up on cascade; same goes for width: auto declaration which is needed in our example because we have p { width: 50%; } already.

Since we have localized the effect of text-align property the bug does not appear anymore because neither #fixed1 nor #fixed2 have any block-level elements in them.

back to top

Recommended Reading

• skip list
• margin property
• float property
• text-align property
• IE haslayout
• CSS Cascade
• Semantic Markup
• HTML Elements Best Practice Sheet

back to top

Comments

There are currently no comments for this article.

Feel free to post your comment. Only Comment field is required. Your e-mail will not be shown; specify it if you wish to be contacted.

Your comment

Your name:

Your e-mail:

Comment (required):

back to top

Advocacy

skip to copyright notice

Browsers

Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"

XHTML

Don't use it unless you understand it. Please take some time to read these articles:

• skip list
• WebDevout - Beware of XHTML
• WebDevout - Validity and well-formedness
• Ian Hickson - Sending XHTML as text/html Considered Harmful

CSS and Internet Explorer

Use Conditional comments

back to top