jmac
27 Mar 2009, 01:27 PM
If anyone can please help me, my site is posted at
eden.rutgers.edu/~jmacbean/neil (http://eden.rutgers.edu/~jmacbean/neil)
I am having problems with IE not displaying the dropdown menu as firefox does. Firefox displays the dropdown right underneath the parent link and in IE it is shifted 50% over when parent link is hovered. I have pinpointed the code that affects this but I can not figure out why or how to fix it. The problem is in this section of css code:
#navbar li:hover ul {
display: block;
width: 10.90em;
position: absolute;
}
If I remove the absolute positioning altogether, IE displays fine. But I need this piece of code to assure that the page doesnt jump around when the navigation is hovered.
The rest of the CSS is:
* {
margin: 0;
padding: 0;
}
body {
background: url(gspopsBackground.jpg);
repeat: none;
margin-top: 10px;
margin-left: 10px;
}
img {
display: block;
}
#navbar {
width: 1200px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar a {
display: block;
width: 10.90em;
color: #fff;
text-decoration: none;
}
#navbar li {
float: left;
width: 10.90em;
background: #000;
font-family: georgia;
font-size: 1em;
font-weight: bold;
font-variant: small-caps;
border: 1px solid #666;
text-align: center;
}
#navbar li img {
border-right: 1px solid #666;
display: block;
}
#navbar ul li a:hover {
background: #00C;
}
#navbar li ul {
display: none;
margin: 0px;
}
#navbar li ul li {
background: #fff;
}
#navbar li ul li a {
color: #000;
padding: 4px 0;
font-family: arial;
font-weight: lighter;
font-variant: normal;
width: 10.90em
border-bottom: 1px solid #000;
text-align: left;
}
#navbar li ul li a:hover {
background: #00C;
color: #fff;
text-align: left;
}
#navbar li:hover ul {
display: block;
width: 10.90em;
position: absolute;
}
#content {
clear: left;
width: 1058px;
height: 400px;
}
#content img {
display: block;
}
Someone please help! Thank you.
HTML:
<body>
<img src="toplogo.gif" border="0" width="1058px" height="80" alt="Main Title Bar" usemap="#logomap" />
<map name="logomap" id="logohome">
<area shape="rect" coords="0,0,175,80" href="index.htm" alt="Home" title="HomeLink" /></map>
<div id="navbar">
<ul>
<li><a href="index.htm">HOME</a></li>
<li><a href="#">CLIENTS</a>
<ul>
<li><a href="/CLIENTS/clientinfo.html">Information</a></li>
<li><a href="/CLIENTS/management.html">Benefit Management</a></li>
<li><a href="/CLIENTS/search.html">Locate a Pharmacy</a></li>
<li><a href="https://www.ipsrx.com/">Mail Order</a></li>
<li><a href="/CLIENTS/reimbursement.html">Rx Reimbursement</a></li>
<li><a href="/CLIENTS/mission.html">Mission Statement</a></li>
<li><a href="/CLIENTS/privacy.html">Privacy</a></li>
</ul>
</li>
<li><a href="#">MEMBERS</a>
<ul>
<li><a href="/MEMBERS/memberinfo.html">Information</a></li>
<li><a href="/MEMBERS/customerservice.html">Customer Service</a></li>
<li><a href="/MEMBERS/search.html">Locate a Pharmacy</a></li>
<li><a href="/MEMBERS/reimbursement.html">Rx Reimbursement</a></li>
<li><a href="/MEMBERS/tier3.html">Tier Three</a></li>
<li><a href="https://www.ipsrx.com/">Mail Order</a></li>
<li><a href="/MEMBERS/mission.html">Mission Statement</a></li>
<li><a href="/MEMBERS/privacy.html">Privacy</a></li>
</ul>
</li>
<li><a href="#">DISCOUNT Rx</a>
<ul>
<li><a href="/CONSUMERS/customerinfo.html">Consumer Information</a></li>
<li><a href="/CONSUMERS/municipal.html">Municipal Programs</a></li>
<li><a href="/CONSUMERS/county.html">County Programs</a></li>
<li><a href="/GSPOPFIX/pdfs/GSPOPS-IND.pdf">Premium Vision / Dental</a></li>
<li><a href="/CONSUMERS/search.html">Locate a Pharmacy</a></li>
</ul>
</li>
<li><a href="#">ABOUT GSPOPS</a>
<ul>
<li><a href="/2009.html">Home</a></li>
<li><a href="/GSPOPS/generalinfo.html">Information</a></li>
<li><a href="/GSPOPS/contactus.html">Contact Us</a></li>
<li><a href="/GSPOPS/mission.html">Mission Statement</a></li>
</ul>
</li>
<li><img src="spacer.gif" width="175px" height="18" alt="spacer" /></li>
</ul>
</div>
<div id="content">
<img src="spacerbar.jpg" width="1058px" height="10px" alt="spacerbar" />
</div>
</body>
eden.rutgers.edu/~jmacbean/neil (http://eden.rutgers.edu/~jmacbean/neil)
I am having problems with IE not displaying the dropdown menu as firefox does. Firefox displays the dropdown right underneath the parent link and in IE it is shifted 50% over when parent link is hovered. I have pinpointed the code that affects this but I can not figure out why or how to fix it. The problem is in this section of css code:
#navbar li:hover ul {
display: block;
width: 10.90em;
position: absolute;
}
If I remove the absolute positioning altogether, IE displays fine. But I need this piece of code to assure that the page doesnt jump around when the navigation is hovered.
The rest of the CSS is:
* {
margin: 0;
padding: 0;
}
body {
background: url(gspopsBackground.jpg);
repeat: none;
margin-top: 10px;
margin-left: 10px;
}
img {
display: block;
}
#navbar {
width: 1200px;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar a {
display: block;
width: 10.90em;
color: #fff;
text-decoration: none;
}
#navbar li {
float: left;
width: 10.90em;
background: #000;
font-family: georgia;
font-size: 1em;
font-weight: bold;
font-variant: small-caps;
border: 1px solid #666;
text-align: center;
}
#navbar li img {
border-right: 1px solid #666;
display: block;
}
#navbar ul li a:hover {
background: #00C;
}
#navbar li ul {
display: none;
margin: 0px;
}
#navbar li ul li {
background: #fff;
}
#navbar li ul li a {
color: #000;
padding: 4px 0;
font-family: arial;
font-weight: lighter;
font-variant: normal;
width: 10.90em
border-bottom: 1px solid #000;
text-align: left;
}
#navbar li ul li a:hover {
background: #00C;
color: #fff;
text-align: left;
}
#navbar li:hover ul {
display: block;
width: 10.90em;
position: absolute;
}
#content {
clear: left;
width: 1058px;
height: 400px;
}
#content img {
display: block;
}
Someone please help! Thank you.
HTML:
<body>
<img src="toplogo.gif" border="0" width="1058px" height="80" alt="Main Title Bar" usemap="#logomap" />
<map name="logomap" id="logohome">
<area shape="rect" coords="0,0,175,80" href="index.htm" alt="Home" title="HomeLink" /></map>
<div id="navbar">
<ul>
<li><a href="index.htm">HOME</a></li>
<li><a href="#">CLIENTS</a>
<ul>
<li><a href="/CLIENTS/clientinfo.html">Information</a></li>
<li><a href="/CLIENTS/management.html">Benefit Management</a></li>
<li><a href="/CLIENTS/search.html">Locate a Pharmacy</a></li>
<li><a href="https://www.ipsrx.com/">Mail Order</a></li>
<li><a href="/CLIENTS/reimbursement.html">Rx Reimbursement</a></li>
<li><a href="/CLIENTS/mission.html">Mission Statement</a></li>
<li><a href="/CLIENTS/privacy.html">Privacy</a></li>
</ul>
</li>
<li><a href="#">MEMBERS</a>
<ul>
<li><a href="/MEMBERS/memberinfo.html">Information</a></li>
<li><a href="/MEMBERS/customerservice.html">Customer Service</a></li>
<li><a href="/MEMBERS/search.html">Locate a Pharmacy</a></li>
<li><a href="/MEMBERS/reimbursement.html">Rx Reimbursement</a></li>
<li><a href="/MEMBERS/tier3.html">Tier Three</a></li>
<li><a href="https://www.ipsrx.com/">Mail Order</a></li>
<li><a href="/MEMBERS/mission.html">Mission Statement</a></li>
<li><a href="/MEMBERS/privacy.html">Privacy</a></li>
</ul>
</li>
<li><a href="#">DISCOUNT Rx</a>
<ul>
<li><a href="/CONSUMERS/customerinfo.html">Consumer Information</a></li>
<li><a href="/CONSUMERS/municipal.html">Municipal Programs</a></li>
<li><a href="/CONSUMERS/county.html">County Programs</a></li>
<li><a href="/GSPOPFIX/pdfs/GSPOPS-IND.pdf">Premium Vision / Dental</a></li>
<li><a href="/CONSUMERS/search.html">Locate a Pharmacy</a></li>
</ul>
</li>
<li><a href="#">ABOUT GSPOPS</a>
<ul>
<li><a href="/2009.html">Home</a></li>
<li><a href="/GSPOPS/generalinfo.html">Information</a></li>
<li><a href="/GSPOPS/contactus.html">Contact Us</a></li>
<li><a href="/GSPOPS/mission.html">Mission Statement</a></li>
</ul>
</li>
<li><img src="spacer.gif" width="175px" height="18" alt="spacer" /></li>
</ul>
</div>
<div id="content">
<img src="spacerbar.jpg" width="1058px" height="10px" alt="spacerbar" />
</div>
</body>