Jump to content


Photo

text-align problem in Firefox


  • Please log in to reply
2 replies to this topic

#1 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 23 August 2006 - 01:11 AM

Does anyone ever get heartily sick of trying to make CSS work the same across browsers? It's enough to make you scream sometimes.

Anyway, here it is:

I have four DIVs all relatively positioned one above the other.

First DIV is width:100%, height:auto, text-align:left. It contains a paragraph which is 768 pixels wide and has some text in it.

Below this is a DIV containing an image. The image is slightly rotated to the left, about 10 degrees. In the DIV above, I have put line breaks to line up the text along the slanted edge of the image. It all works great, it even looks right when sizing the browser window down and everything.

Under this I have a DIV which is width:100%, height:auto, text-align:right. It again contains a paragraph 768 pixels wide with some text.

Under this is another DIV with another image. This time the image is rotated right about 5 degrees.  Again, I have formatted the text in the DIV above to sit along the diagonal top edge of the image.

This all works great in IE.

In Firefox the second paragraph, which is supposed to be aligned to the right, is not. It sits at the left side of the screen. The text within the paragraph is right-justified, but the paragraph itself refuses to go to the right of the page. I can't figure out how to get it to go there. I've tried putting text-align:right in the paragraph style, I've tried putting align="right" everywhere, it refuses to budge. Both the DIVS stretch across the screen, I can verify that in the DOM inspector. The paragraph is the right size too, but it is completely in the wrong side of the page!
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.

#2 johnnyk

johnnyk
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts

Posted 23 August 2006 - 06:33 PM

For the paragraph that you want to be at the right of the div and right-justified, use this CSS:

p {
text-align: right;
margin-left: auto;
}

...plus whatever CSS you already have for it. The above will make it work in Firefox (and pretty much all browsers except IE), to make sure it also works in IE, keep "text-align: right;" in the CSS of the p's container div.

Just so you know, if something works in IE but not Firefox, it usually means that it only works in IE because of a flaw in IE. The above CSS is the correct way to do it, but IE only do what you want it to do if the container div has "text-align: right;" in it (which, in IE world, is the "correct" way to do it).
Rediscover the Web:
<a href="http://www.spreadfir...;t=219"></a><br />

#3 king arthur

king arthur
  • Members
  • PipPipPip
  • Advanced Member
  • 335 posts
  • LocationUK HQ

Posted 24 August 2006 - 02:32 PM

Thanks. margin-left:auto, never would have thought of that one!
Sir Isaac Newton said "If I have seen farther, it is by standing on the shoulders of giants". But it is not recorded as to whether he said it before or after he was hit on the head by a falling apple.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users