Hi
Is it possible to display a unordered list inline, have a hyperlink fill the
full size of the LI element and force the LI element to have a fixed dimension
using XHTML? It works if I just let it fall back to QUIRKSMODE but obviously I
don't want that =)
I'm trying to make six LI elements horizontally line up and have a dimension of
150x80 pixels and have the entire LI be covered by a hyperlink element. I've
tried these two doctypes with the same outcome. Its only been tested on IE7 so
far... IE7, FF, Safari would be nice to have it work in
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<!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=iso-8859-1"
/><title>Test</title>
<style type="text/css">
* { border: 0; margin: 0; padding: 0; } body { font-family:
Verdana, Helvetica, Sans-Serif; font-size: .75em; } #menu {
background-color: #0f0; width: 900px; } #menu ul { padding: 2px;
position: relative; text-align: left; }
#menu ul li { display: inline; background-color: #000; list-style:
none; width: 150px;
height: 80px;; }
#menu ul li a { color: #aaa; font-weight: bold; line-height:
2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
height: 100%; }
#menu ul li a:hover { color: #fff; text-decoration: none; }
#menu ul li a:active { background-color: #a6e2a6; text-decoration:
none; }
#menu ul li.selected a { background-color: #FFF; color: #000; }
</style>
</head><body>
<div id="menu"> <ul> <li><a href="#">Home Page</a></li> <li><a
href="#">New Product</a></li> <li><a href="#">Specials</a></li> <li><a
href="#">My Account</a></li> <li><a href="#">Contact Us</a></li> </ul> </div>
</body></html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
