Jump to content

text-align problem in Firefox


king arthur

Recommended Posts

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!
Link to comment
Share on other sites

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

[code]
p {
text-align: right;
margin-left: auto;
}
[/code]

...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).
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.