I'm trying to position an unordered list (#bot-nav li) "inline" within a div (#bot-nav). The text seems to sit inline along the top of the div. I thought because I have the display set to "inline" I could use "line height" to lower the text but it only does so within the design window of my program (Dreamweaver). When I preview the page inside a browser, the text still remains against the top of the div. I tried adding top padding to push it down but that added height to the block size and screwed up my background. Any help would be appreciated. Thanks
Code:
@charset "utf-8";
body {
margin: 0;
padding: 0;
background: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 708px;
width: 900px;
position: relative;
margin: 20px auto;
}
#maincontent {
}
#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 123px;
width: 900px;
}
#maincontent {
}
#feature {
height: 361px;
width: 707px;
background: url(images/slices/rack-feature.jpg) no-repeat;
text-align: left;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 80px;
margin-left: 30px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
padding-top: 13px;
}
#buttons3 {
height: 361px;
width: 193px;
background: url(images/slices/buttons3.gif) no-repeat;
position: relative;
}
.link_bullet {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
#copy-3 {
background: url(images/slices/3-copy.jpg) no-repeat;
height: 161px;
width: 900px;
}
#bot-nav {
background: url(images/slices/bot-nav.gif) no-repeat;
height: 41px;
width: 900px;
margin: 0px;
padding: 0px;
float: left;
text-align: left;
}
#bot-nav li {
display: inline;
margin: 0px;
padding: 0px;
list-style: none;
}
#bot-nav li a {
float: left;
font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
color: #F5D564;
text-decoration: none;
border-right: 3px solid #868765;
margin: 0px;
padding: 0px 20px 0px 10px;
}
#bot-nav li a:link,
#bot-nav li a:visited {
text-decoration: none;
float: left;
}
#bot-nav li a:hover, #bot-nav li a:active {
color: #FFF8B9;
background: #2E1916;
display: block;
}
#foot-bot {
background: url(images/slices/foot-bot.jpg) no-repeat;
height: 23px;
width: 900px;
margin: 0px;
color: #F6CE6E;
clear: none;
float: left;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 6px;
}
#bullet-1 {
height: 12px;
position: absolute;
top: 80px;
color: #0099CC;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 36px;
}
.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
height: 0px;
font-size: 1px;
line-height: 1px;
margin: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Saxstorage/Copy of sax-style.css" rel="stylesheet" type="text/css" />
</head>
</style>
<body>
<div class="clrflt" id="wrapper">
<div id="header"></div>
<!-- TemplateBeginEditable name="main" -->
<div id="maincontent"></div>
<!-- TemplateEndEditable --><a href="file:///C:/Inetpub/[URL unfurl="true"]wwwroot/newguitarstorage/Templates/sax2-template.dwt#"></a>[/URL]
<div id="bot-nav">
<ul>
<li><a href="#">Policies</a></li>
<li><a href="#">Guitarstorage</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="foot-bot">A & S Crafted Products</div>
</div>
</body>
</html>
