Text align property causes CSS problems
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
We were working on a fairly complex stylesheet recently where the text-align property caused some problems with Internet Explorer.
The problem occurred with two adjacent floated left divs where a background image in the second div needed to be accurately aligned and positioned left. This was required to create a seamless ‘border’ between the two divs.
Whenever our page contained a long article, the ‘dividing’ background image was misaligned by a few pixels – causing a white gap. The problem only occured with longer articles. Shorter articles had background images correctly aligned.
Despite the creation of various Internet Explorer specific styles, we were unable to get rid of the problem…
...until we changed the paragraph style rule in the first div from “text-align: justify” to “text-align: left”.
p {text-align: justify;} – problems, problems…
p {text-align: left;} – OK!
Problem solved! The text justification was causing IE to ‘push out’ the margins of our first div, creating a background image misalignment and the problem gap.
Never come across this before. File for future reference.
Comments
03 Jul 2006 18:27:31
Did any tools such as FireFoxs’ Dev Toolbar give any indication as to whether it was margin, border or padding that was affected by this?
Very odd. Useful find though, cheers.
03 Jul 2006 18:54:17
Ed: We looked at the page with the Developer toolbar using ‘outline block elements’. This seemed to suggest that it was ok. By that stage, we had given the page a specific IE width rule (a 4 px reduction in one div) to avoid one of the divs dropping down because the margins were too ‘tight’.
The website was based on a template from one of the main suppliers and had a detailed CSS style sheet. But, the problem only arose when the content in one div was longer than the second div so I figured that this ‘problem’ would not otherwise have been noticeable during the template development.
I am not sure if there might be a better solution to the problem but setting text-align:left was a pragmatic solution
Comments are OFF for this post.