Hi folks,
I'm having problems and I'm hoping some of you geniuses can help... This
site I'm working on is under wraps, so I'm afraid I'm only able to show
you screenshots of the problem, along with css clippings.
Problem #1: The main menu.
IE: http://www.buyblue.org/images/test/primary_ie.jpg
FF: http://www.buyblue.org/images/test/primary_firefox.jpg
As you can see, the little wedge I am using to show the active link is
not showing up in IE.
Here's the CSS I'm using for that menu, and the way I've gotten the
wedge to display in Firefox:
.second ul#primary-nav {
position: absolute;
top: 90px;
left: 400px;
width: 340px;
margin: 0;
padding: 0;
font-size: .6875em; /* 11px */
line-height: 12px;
text-align: right;
border-right: 1px solid #7BAAD5;
}
.second ul#primary-nav li {
display: inline;
padding: 0 6px;
border-left: 1px solid #7BAAD5;
margin: 0;
}
.second ul#primary-nav a,
.second ul#primary-nav a:link,
.second ul#primary-nav a:visited {
color: #7BAAD5;
text-decoration: none;
padding: 0 0 17px 0;
}
.second ul#primary-nav a:hover {
color: #FFF;
text-decoration: underline;
}
.second ul#primary-nav li.active a {
color: #FFF;
background-image: url('images/sl-wedge.png');
background-position: center 13px;
background-repeat: no-repeat;
}
Problem #2: The subnav.
IE: http://www.buyblue.org/images/test/sec_ie.jpg
FF: http://www.buyblue.org/images/test/sec_firefox.jpg
I have the white background image for the active li extending all the
way to the left edge of the browser just fine in FF. In IE, it only
extends so far.
The CSS:
.second #secondary-nav {
position: absolute;
top: 187px;
left: 20px;
margin: 0;
padding: 0;
width: 120px;
font-size: .6875em; /* 11px */
}
.second #secondary-nav ul {
list-style: none;
}
.second #secondary-nav ul li {
list-style:none;
margin: 0 0 .5em -500px;
}
.second #secondary-nav ul a {
display: block;
text-align: right;
padding: 0 8px 0 0;
color: #394E81;
text-decoration: none;
line-height: 18px;
white-space: nowrap;
}
.second #secondary-nav a.active {
background-image: url('images/sl-whitebar.gif');
background-position: center right;
background-repeat: no-repeat;
margin: 0 0 0 -800px;
}
.second #secondary-nav a:hover {
text-decoration: underline;
}
I would really appreciate some help here, thanks in advance!
-John
--
----------------------------
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 12/29/2005
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
