PDA

Click to See Complete Forum and Search --> : Marker formatting without CSS3

Timmer
11-13-2006, 02:01 AM
I just inherited the job of converting a site of outdated code to current standards compliance. As a result, I'm getting thrown into some pretty advanced and ugly layout tables that need to be converted. This page (http://iu-che-3rivers.uits.iupui.edu/istart/dashboard/graphFilterForm.cfm) is giving me the most trouble.

I can't think of a good way to deal with the graphic next to the menu items. The most reasonable way I thought of to do this was as a list, using the graphic as a marker, but marker formatting is part of the as yet unfinished (and unsupported) CSS3 specs. Is there a better way to write this layout?
NogDog
11-13-2006, 02:47 AM
I'd probably do it something like this (zip of the graphics I used attached):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<style type="text/css">
<!--
.list {
list-style: none;
margin: 0;
padding: 0;
font: small arial, helvetica, sans-serif;
color: #666;
background-color: white;
font-weight: bold;
}
.list li {
margin: 0;
padding: 3px 0 3px 13px;
background: transparent url(mid.gif) no-repeat 0 50%;
}
.list li.top {
background-image: url(top.gif);
}
.list li.bot {
background-image: url(bot.gif);
}
-->
</style>
</head>
<body>
<ul class="list">
<li class="top">First item</li>
<li>The 2nd item</li>
<li>Item number three</li>
<li class="bot">The last item</li>
</ul>
</body>
</html>