Hi,
I am pulling my hair out trying to fix this problem and cannot figure it
out.
In one of my websites, the header graphic is in a blue box with a 1px
white border. Just underneath and a little left of that blue box is a
light blue box with a 1px white border (almost like a drop shadow.) The
problem is with the navigation. I thought it would be cool to make a
small graphic of the light blue box and place it just behind the
navigation to mimic the header graphic. It looked fine in IE, but
disappeared in FF and when it looked good in FF, it was too low in IE.
I searched and searched and eventually made a floating div 15px high,
with the light blue color and the 1px white border and got it positioned
behind the navigation, but I am still getting the same problem. I tried
every conceivable hack I could find but nothing helped. If anyone could
help me figure this out I would be very grateful. Below is the code.
TIA,
Riva
#backer {
width: 110px;
background-color: #9aa5cc;
border-bottom: 1px solid white;
border-left: 1px solid white;
position: relative;
float: right;
top: 300px;
top: 280px;
height: 20px;
}
#navcontainer {
color: white;
width: 130px;
display: inline;
border: 0px solid white;
margin: 0;
height: 180px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
text-transform: uppercase;
position: relative;
float: right;
right: -1px;
}
ul#navlist {
padding: 0;
margin-left: 0;
width: 130px;
text-align: left;
border: 0px solid white;
background-color: #2f4d9a;
}
ul#navlist li {
list-style: none;
color: white;
line-height: 1em;
display: block;
margin: 0;
padding: 0;
border-top:1px solid white;
border-left: 1px solid white;
}
and
<div id="topContainer">
<div id="backer"></div>
<img src="images/new_blue_header.gif" align="center" border="0"
alt="" style="position:relative;float:left;left: -1px;">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html"
id="current">Home</a></li>
<li><a href="firmprofile.htm">Firm Profile</a></li>
<li><a href="practiceareas.htm">Practice Areas</a></li>
<li><a href="lawyers.htm">Lawyers</a></li>
<li><a href="contactus.htm">Contact Us</a></li>
<li style="border-bottom: 1px solid white;"><a
href="articles.htm">Articles</a></li>
</ul>
</div>
</div>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
