best method? CSS and a series of buttons.....

[pelsar]

I'm looking for the best method:

I have a series of buttons (images with rollovers), that follow one after the other.

usually i simple go with tables
example: http://www.correlix.com/about.html (top left)
________________

is there a better method using DIVs? if i have simple one pict after the other, won't various browsers screw that up?

[&Ingonyama]

Start with a basic unordered list:


<ul class="side_nav">
<li class="current"><a href="#">List element 1</a></li>
<li><a href="#">List element 2</a></li>
<li><a href="#">List element 3</a></li>
</ul>


Then just style the links like this:


ul.side_nav
{
margin: 0 0 20px 0; /* bottom margin */
list-style: none; /* remove default bullets */
}

/* take off the default margin/padding */

ul.side_nav li
{
margin: 0;
padding: 0;
}

ul.side_nav li a
{
padding: 0 0 0 10px; /* add 10px to the right side of the a link so theres room for the arrow to fit */
}

/* apply background arrow to hovered list and current class */

ul.side_nav li a:hover, ul.side_nav li.current a
{
background: url("arrow.gif") no-repeat 0 3px;
}



Also see:
http://www.w3schools.com/css/default.asp
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

[pelsar]

figuring there was a method that never occurred to me, that gets around IE (I'm really growing to hate IE more and more as i've started doing a bit of javascripting along with the CSS stuff)