1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

positioning inline text within div

         

blueman2

3:23 am on Nov 6, 2008 (gmt 0)

10+ Year Member



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

@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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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/wwwroot/newguitarstorage/Templates/sax2-template.dwt#"></a>
<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 &amp; S Crafted Products</div>
</div>
</body>
</html>

blueman2

5:09 pm on Nov 8, 2008 (gmt 0)

10+ Year Member



I almost have it working pretty well except for viewing it in IE.

*When viewing the inline text in "bot-nav" in IE, it does not follow the padding I used in "bot-nav" to push the text down in the div. It looks fine in firefox. I see a bunch of fixes for other IE bugs but can't find one to fix this

*Running into the same situation (I think)with "rck_feature". I have padding in there to position the text (UL). Again. this works fine with FF but not in IE

If this has something to do with Zeroing out the margins and padding, I thought I had done this by applying 0 to margin and padding in the "Body". Obviously I'm missing something. Any help would be appreciated. Thanks

Here is the present code:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/sax-template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<link href="sax-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="clrflt" id="wrapper">
<div id="header"></div>
<!-- InstanceBeginEditable name="main" -->
<div id="maincontent"> <div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Rackssssnnnns </div>
</div>
<div class="fltrt" id="feature">
<div id="rck_feature">
<ul>
<li>Ideal storage solution for up to 4 - 5 saxophone cases, depending on <br />
width of cases</li>
<li>Minimize required storage space and eliminates<br />
crowded closets</li>
<li>Easily store and access each of your saxes without accidentally toppling<br />
other cases</li>
<li>Adjustable for different size and shaped baritone, tenor, alto, and soprano sax cases</li>
<li>More stable and attractive than typical sax stands</li>
</ul>
</div>
</div>
<br clear="all" />
<div id="copy-3"></div></div>
<!-- InstanceEndEditable -->
<div id="bot-nav">
<ul>
<li><a href="#">Order a Rack</a></li>
<li><a href="#">Guitarstorage.com</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#" class="last">Saxes &amp; Other Products</a></li>
</ul>
</div>
<div id="foot-bot">A &amp; S Crafted Products - Copyright 2008</div>
<br class="clrflt" />
</div>
</body>
<!-- InstanceEnd --></html>

CSS:

@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 {
margin: 0px;
padding: 0px;
}
#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: 272px;
width: 215px;
margin-top: 80px;
margin-left: 30px;
font: normal 9pt Verdana, Arial, Helvetica, sans-serif;
padding-top: 5px;
}
#buttons3 {
height: 361px;
width: 193px;
background: url(images/slices/buttons3.gif) no-repeat;
position: relative;
}
#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: 38px;
width: 900px;
padding: 3px 0px 0px 5px;
float: left;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
}
#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.last {
border-right: none;
}
#bot-nav li a:link,
#bot-nav li a:visited {
text-decoration: none;
float: left;
margin: 0px;
}
#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: #F5D564;
clear: none;
float: left;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 6px 0px 0px;
}
#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;
margin: 0px;

[edited by: eelixduppy at 6:43 pm (utc) on Nov. 8, 2008]
[edit reason] removed URL [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026