Ok, so here goes.
I created a test.html by putting in the required elements. The only issue now is that, in IE, the text between the li tags is about 1 or 2 px below the 9x9 png image that is being called instead of the default bullet point.
Some points to note. UL tag is not being used at all, except that it is declared in the css.
Here is the code:
<html>
<head>
<style>
body {
font:12px Arial, Helvetica, sans-serif; }
.col1, .col2, .col3 {
float: left;
margin: 6px 6px 0;
width: 300px;
}
a {text-decoration:none;}
ol,ul{list-style:none;margin:0px;padding:0px;}
.smallfeed {width:12px; height:12px; position:absolute; top:10px; right:10px;}
.box {border:1px solid #DFDFDF;padding:10px; margin-bottom:10px; position:relative; background:#FFF url(grad.png)
top repeat-x;}
.box h3 {line-height:18px;}
.box h2 {border-bottom:1px solid #DFDFDF; font-size:20px; margin-bottom:10px; padding-bottom:5px;}
.box li{ line-height:22px; list-style-image:url(4.gif); text-transform:capitalize;margin-left:20px;outline-style:none;}
.box li:hover { list-style:url(2.gif); }
.box li a:hover {text-decoration:underline;}
</style>
</head>
<body>
</body>
<div class="col1">
<div class="box">
<div class="smallfeed">
<a href="#"><img border="0" alt="RSS Feed!" src="smallfeed.png"></a>
</div>
<h2>Top Stories</h2>
<li><a href="#">This is the first LI tag. Some text here to make it into two lines.</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">And this is the last LI again, with two lines</a></li>
</div>
</div>
</body>
</html>
[edited by: alt131 at 7:09 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy [/edit]
