homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
positioning inline text within div
blueman2




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

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




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

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved