Styling Ordered Lists
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>
Print Preview shortcut in most browsers
In creating the print style screen for Knorr.ca I found a very useful tip for anyone working on print styles:
alt+F, then V - will start up print preview.
I haven't tested this trick in browsers other than FF 3.5, IE6, IE7, IE8. I will get back to you though.
Good luck 
Your friendly neighbourhood,
Smccullough
Wacky margins in IE6?
IE6 messing up margins on your elements after you float them?... try this!
div#myHtmlElement { float: left; margin: 10px 20px; display: inline; }
For some reason IE6 seems to like doubling floating element's margins. By using display: inline; it eliminates this effect, and doesn't effect other browsers render of that element.
I'll update this post if I figure out what technically goes on under IE6's hood.
Good luck 
Your friendly neighbourhood,
Smccullough
.clearfix
Ever have a <div/> or another HTML element that WILL NOT listen to a set height? Does this parent element have floating children elements in it?...try this!
[CSS] html .clearfix {height: 1%;} .clearfix:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; }
[HTML] <div id="contentContainer" class="clearfix"> <div id="columnOne"></div> <div id="columnTwo"></div> </div>
The reason why the set height for the containing isn't working is because once you float a(ny) child element that is inside a containing parent element it breaks free of the parent element.
Full validate example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearfix example</title>
<style type="text/css">
html .clearfix {height:1%;}
.clearfix:after {clear: both; content:".";display:block;height:0;visibility:hidden;}
div#contentContainer { width: 400px; height: auto; }
div#columnOne, div#columnTwo { float: left; width: 200px; height: auto; }
</style>
</head>
<body>
<div id="contentContainer" class="clearfix">
<div id="columnOne">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>
</div>
<div id="columnTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>
</div>
</div>
</body>
</html>
Good luck
Your friendly neighbourhood,
Smccullough
jQuery’s curvycorners issue with the IE’s
Hey readers,
I've recently started diving into jQuery plug-ins over at work and came across a bug this afternoon.
Using jQuery 1.3(.1/.2/.3) and a plug-in I found from blue-anvil.com that rounds corners on HTML elements... it's pretty handy.
Anyways I was using jQuery minified 1.3.2 and blue anvil's latest version of curvycorners ver. 1.8.1 (here is a link)
I kept getting an error in IE6 & 7, but not FF3, Safari, Opera, Chrome. A little digging around in the issues logs for that plug-in on the jQuery site found me this. http://plugins.jquery.com/node/5756
(bottom of the comments)
After looking at that I tried to find:
$($$ +" *").css("zoom","normal");
and couldn’t, I then did a search for:
" *"
in the jquery.curvycorners.packed.js (ver. 1.8.1) and found this:
$(c+" *").css("zoom","normal")
instead.
I then just switch to this:
$("*", c).css("zoom","normal")
and it fixed the error I was getting in IE6 & 7.
Tested in IE6 (Stand alone from Multiple IE) & IE7 with
jquery-1.3.min.js
Good luck
Your friendly neighbourhood,
Smccullough
