Numbered list with large number on the side?

[Novelish]

How would I make a cross-browser numbered list with a [large] number on the side, and the top of the number aligned with the top of the first line of [smaller] text?

After doing an extensive search, this is the only thing remotely like what I'm looking for that I found:
<snip>

...except that code didn't work for me in any browser, not even Firefox.

Using above code as a starting point, however, I came up with this. It shows up perfectly in Firefox, but Opera and Safari mutilate it, and I'm guessing IE would as well:

ol li {
list-style-type:decimal;
list-style-position: outside;
font-size:50pt;
margin: 10 0 0 40px;
position: relative;
top: 50;
line-height:normal;
color:#ccc;
font-family: Arial;
}
.content {
font-size: 14px;
color: #333;
position: relative;
top: -36;
left: -20;
background: #eee;
padding: 10;
}
h3 {
color: #ff3399;
padding: 0;
margin: 0;
font-size: 16px;
}

<ol>
<li>
<div class="content"><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
Donec erat dolor, suscipit vel, bibendum a, posuere vitae, leo. Mauris pellentesque libero. Curabitur malesuada. Sed nec nibh. Praesent consequat felis at lorem. Phasellus eleifend tortor eu tortor. Sed elementum. Vestibulum sed lorem a enim suscipit tempus. Etiam fringilla, risus eget commodo vehicula, erat turpis dictum ante, quis placerat erat massa eget erat.</div>
</li>
<li>
<div class="content"><h3>Nulla facilisi. Nunc vel velit. Vivamus orci.</h3>
Curabitur tincidunt, augue at ullamcorper fermentum, ligula justo commodo enim, in rhoncus lacus odio at ipsum.</div>
</li>
<li>
<div class="content"><h3>Vivamus libero mi, porttitor ac, viverra eget, euismod in, sapien.</h3>
Integer turpis enim, commodo sit amet, aliquet at, tempor at, tellus. Duis ac nibh. Fusce porta tristique magna.</div>
</li>
<li>
<div class="content"><h3>Curabitur blandit justo id enim.</h3>
Sed congue aliquet nulla. Fusce sed metus eget enim lobortis rhoncus. Sed neque ligula, viverra vel, feugiat at, eleifend sed, nunc. Vivamus erat metus, nonummy sed, pellentesque vestibulum, vestibulum eu, turpis. Nam tincidunt lobortis nunc.</div>
</li>
</ol>

Is what I'm trying to do even possible?

[edited by: Robin_reala at 6:54 pm (utc) on April 13, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[Fotiman]

I tried starting from scratch, but was not able to achieve what you're looking for. The problem I'm having is that the text of the giant number is on the same baseline as the text within the list item, which makes it hard to manipulate the inner text to where you want it. If you find a solution, please post it here. Good luck.