Fri, 2009-11-06 22:07
First of all, I would like to introduce myself. This is my first post here as I'm fairly new to complete CSS layouts. My name is Tim and I'm from the Twin Cities area of Minnesota. I've done a few sites with strictly CSS and never had a problem but this one is driving me nuts. I'm having trouble with my Navigation ul completely vanishing in IE6 at random times. The site I'm referring to is currently live at DigitalTown.com if you would like to check it out. Here is the code.
HTML
<ul id="topnav"> <li class="current"><a href="index.php">Home</a></li> <li><a href="">About Us</a> <!-- Start Subnav --> <span> <a href="aboutus.php">History</a> <a href="management.php">Management</a> <a href="partners.php">Partners</a> <a href="portfolio.php">Domain Portfolio</a> </span> <!-- End Subnav --> </li> <li><a href="">Projects</a> <!-- Start Subnav --> <span> <a href="schoolSites.php">High School Sites</a> <a href="americasProdigy.php">America's Prodigy</a> </span> <!-- End Subnav --> </li> <li><a href="news.php">News</a></li> <li><a href="investors.php">Investors</a></li> <li><a href="contact.php">Contact</a></li> </ul>
CSS
ul#topnav { margin: 0; padding: 0; float: left; width: 900px; font-size: 20px; list-style: none; position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ background: url(topnav_stretch.gif) repeat-x; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; /*--Divider for each parent level links--*/ background: #958573 url(../images/navLinksBG.gif) repeat-x; } ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { /* background: #1376c9 url(topnav_active.gif) repeat-x; */ background-position: 0 -43px; } /*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/ /* SubNav Styles */ ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; /*--Hide by default--*/ width: 900px; font-size: 16px; background: #0076B5; color: #fff; /*--Top right rounded corner--*/ -moz-border-radius-topright: 5px; -khtml-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; /*--Top left rounded corner--*/ -moz-border-radius-topleft: 5px; -khtml-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; /*--Bottom right rounded corner--*/ -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/ -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ ul#topnav li span a:hover {text-decoration: underline;}
You won't see the problem occur often times until you click onto a different page. For example the management page... Does any know what may be causing this? Thanks for your help!
Mon, 2009-11-09 19:46
#1
Nobody that can help?
Nobody that can help?
Mon, 2009-11-09 21:35
#2
Randomness when in reference
Randomness when in reference to IE is generally a case of an element needing to have hasLayout triggered, explaining that this happens on some pages not others and then not linking to them or showing all of the pages code doesn't greatly help in pinning down the issue, I can't, off hand, see in your code any hasLayout=False issues. Try adding zoom:1; to various elements to see if the issue stabilises.