CSS Forum

**Brian07002** · 03-05-2011, 11:26 PM

Hi all,

I am having this issue with the navbar on a site I am working on...The navbar happens to display on top of the border of the background gradient. I know gradients are not easy to work with (as a background), but I think it's just something in the css that I am having a problem with. Can someone help fix this?

The page in question is:

Code:

http://www.reunitemysite.com/main.html

Here's the html

HTML Code:

<!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> <title>Reunite My Site is Currently Work in Progress... </title>

<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/menu.css" media="screen" />

<script type="text/javascript" src="http://www.reunitemysite.com/scripts/webstat/track.php?mode=js"></script>

</head>

<body>

<noscript><img src="http://www.reunitemysite.com/scripts/webstat/track.php?mode=img" border="0" alt="" width="1" height="1"></noscript>

<div class="gradient">

<table class="header">

<tr>

<td align="left"><img src="images/small-logo.png" alt="Reunite My Site - More Traffic. More Profit." title="Reunite My Site - More Traffic. More Profit."></td>


<td align="right"><iframe name="stat_counter" src="http://www.reunitemysite.com/scripts/webstat/counter.php" style="width: 136px; height: 147px;" frameborder="0" scrolling="no">Sorry but your browser does not support iframes</iframe>

</td>
</tr>

</table>

<div id="navBar1" align="center">

<ul>
<li class="headerList1"><a href="#"> Premium Banner Ads</a></li>
<li class="headerList1"><a href="#">Premium Text Ads</a>
<li class="headerList1"><a href="#"> Free Ads</a>
<li class="headerList1"><a href="#">Order Ad Space</a>
<li class="headerList1"><a href="#">Frequently Asked Questions</a>
<li><span><a href="#">Customer Service</a>
</li>
</ul>

</div>




<br />

</body>
</html>

Here's the Navbar css:

Code:

#navBar1{
float:left;
border:solid 2px #000;
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
background:-moz-linear-gradient(bottom,#596a63, #829a90);
background:-webkit-gradient(linear,left bottom, left top, from(#596a63), to(#829a90));
-moz-box-shadow: 2px 5px 7px #161617;

box-shadow: 2px 5px 7px #161617;
}

#navBar1 ul ul{
display:none;
}

#navBar1 ul {
padding:0;
margin:0;
list-style:none;
position:relative;
}

#navBar1 ul li{
display:block;
float:left;
padding-top:9px;
padding-bottom:9px;
}

#navBar1 ul li span a{
border-left:solid #8cab9e thin;
}

.headerList1 a{
border-right:solid #505e58 thin;
}

#navBar1 ul li a{
display:block;
padding:4px;
padding-left:13px;
padding-right:13px;
color:#d1d1d1;
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:80%;
}

#navBar1 ul li a:hover{
color:#ffffff;
text-decoration:underline;
}

#navBar1 ul ul{
position:absolute;
top:42px;
background:url(../images/menuDropBG.png);
width:310px;
border:thin solid #849c92;
font-size:70%;
display:none;
}

#navBar1 ul li:hover ul{
position:absolute;
left:60px;
display:block;
}

#navBar1 ul ul li{
padding:0;
padding-top:3px;
padding-bottom:2px;
}

#navBar1 ul ul li a{
border:none;
color:white;
}

I appreciate the help.

Thank you
-Brian

**JeremyMiller** · 03-06-2011, 06:09 AM

Looks like you haven't assigned an IE-specific gradient command to #navBar1 in http://www.reunitemysite.com/css/menu.css .

**Brian07002** · 03-06-2011, 06:49 AM

Ok, I think I have fixed it...I've added

Code:

text-align: center;

Now my next problem. I want to align the whole nav bar to the center, but I am having a problem doing that. I've tried the <div align="center"> to the html. I am currently using the margin-left to the css but I wish I could be a bit more direct as in aligning the actual div because I have to adjust the padding and the margin in the nav bar, and it's getting quite tight (the text in the navbar) against the edge of the navbar.

Any ideas?

Thanks again!
-Brian

**JeremyMiller** · 03-06-2011, 06:55 AM

I wouldn't use align as an attribute: it's styling.

While others are far better than I at CSS, I usually surround the element to be centered by a div with style="text-align:center" and then make the element itself style="text-align:left;margin 0 auto;" -- it usually gives me the most cross-compatibility. (IE uses the text-align:center and others use the margins.)

**Brian07002** · 10:24 AM

I *still* can't figure this one out...I'm stumped! Anyone else have an idea?

**Brian07002** · 03-07-2011, 09:25 PM

I figured this one out to acceptable, but I am still trying to perfect it.