CSS inline style different in all 3 browsers

[saiz66]

I need to create a class inline style. When I previewed it, all 3 browsers displayed it differently:

Here is the part of the code:

<div class="title">
	<p style="font-size:60pt; color:#990000; font-family:'Monotype Corsiva'; text-align:right; top:0px; right:10px ">The 78th Academy Awards</p>
</div>

And here is part of the stylesheet:

div.title{  
	position:absolute;
	background:white;
	top:40px;
	left:150px;
	right:0px;
	height:150px;
	}

Anybody can help me? I want the text to be aligned to the right and in the middle height wise. Basically opera got it right, but the others haven't. Thanks!

[+mrbester MVC]

How does:

<span style="float:right;margin-top:40px;padding-right:10px;color:#900;font:normal 60pt 'Monotype Corsiva';">The 78th Academy Awards</span>

look?

[saiz66]

thanks a lot. it works... 2 questions:

1) is this considered a class inline style?

2) what was wrong with my code?

Edited October 12, 2005 by saiz66

[+mrbester MVC]

1) Yes

2) You had positional styling in a block element. Unless the element has a width associated with it, its width is 100%, so "right: 10px" was ignored (and "top: 0px" is default as well)

As an extra, the div class can have the "right:0px" removed as you've got "left" in there. Positioning is done at a corner; top left, top right, bottom left, bottom right, making the opposite sides of the box mutually exclusive.