|
|
Posted by Jonathan N. Little on 01/31/07 15:59
vunet.us@gmail.com wrote:
> What is the best way to show border-less menu with CSS? I use table
> but have problems avoiding paddings and margins with different
> browsers. Is there a perfect border-free cross-browser example of
> table or I should use other tags for my menu, like ul-li?
>
Well, yes different browsers have different defaults for padding,
margins, etc on many elements not just TABLEs. If you want cross-browser
consistency explicitly set the elements properties (i.e., margin,
border, padding)
Now to address your links, if you think about it what is your menu? Rows
and columns of day or a *list* of links? I would use a list, because
that it what it is. You can style it anyway you want!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Simple example</title>
<style type="text/css">
BODY { color: #000; background-color: #cfa; }
UL.menu{
margin: 0; padding: .25em; border: 3px outset #050;
width: 10em; list-style: none; background-color: #050;
font-family: arial, helvetica, sans-serif;
}
UL.menu LI { margin: 0 .5em 0 0; padding: 0; }
UL.menu LI A { padding: .25em; border: 2px solid #050;
display: block; width: 100%; font-weight: bold;
text-decoration: none; color: #ff0; }
UL.menu LI A:hover {
color: #fff; border: 2px inset #050;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|