Styling ordered lists?....but want a fancy styling on the list numbers themselves?
Try this:
[CSS]
ol { font: italic 1em Trebuchet MS, Times, serif; color: #000000; }
ol span { font: normal .75em Arial, Helvetica, sans-serif; color: #7e7e7e; }
[HTML]
<ol>
<li>
<span>First, check out the great purple sun its awesome</span>
</li>
<li>
<span>Secondly, its purple</span>
</li>
<li>
<span>Thirdly, it tastes like grapes</span>
</li>
</ol>
ol {
font: italic 1em Trebuchet MS, Times, serif;
color: #000000;
}
ol span {
font: normal .75em Arial, Helvetica, sans-serif;
color: #7e7e7
I came across a little issue with a project I've been working on for the past week and a bit now. It's an ASP.Net web app that launches in a separate window(1024x768). The second step(the guts) of the app, required that it not scroll. I said "easy, no problem!", opened up the main CSS and added;
body.step2 { overflow: hidden; }
.... done, right?!
Well in FireFox yes, but IE didn't want to take it. I played with it a bit and found that FireFox applies scroll bars to just the <body> tag of your html where as IE applies them to the <html> tag.
A Solution:
I used a bit for jQuery(already in use in this app) to fix this, ONLY in step 2.
$(document).ready(function() {
$("body.step2").parent().css("overflow", "hidden");
};
This bit of script finds the parent element of the body which is the <html> tag.
I could have done some in-line CSS on step2 but I try and stay away from in-line styles. This solution though seemed appropriate and simple enough.
Cheers,
Sean M
