PDA

View Full Version : dropdown menu not working in internet explorer 6


silverglade
01-20-2009, 01:01 PM
hi, in internet explorer, my dropdown navigation menu only works on the home page, not the others. any help greatly appreciated. it looks like my code is ok, but there must be a problem. . thank you. derek

here is a link to one of the pages where the navigation doesnt work. i didnt change the text yet.

http://derekvanderven.com/flower_events/bouquets/cascading.html


here is the css for one of the pages where navigation dropdown doesnt dropdown. and the html.

@charset "utf-8";
/* CSS Document */


/* fixed floats for internet explorer 6*/

#footer, #scrolltextblock, #flashblock, #contentblock, #img_container, #textblock{display: inline;}



body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #ffffff;
}

#container {
background-image: url(compressed_background.gif);
background-repeat: no-repeat;
margin:20px auto 0 auto;
width: 750px;
height: 576px;
}

#navigation {
margin: 0 auto 0 auto;
width: 750px;
height: 27px;
}

#homelink {
margin: 20px auto 0 auto;
width: 281px;
height: 60px;
}

#contentblock {
float: left;
width: 280px;
height: 325px;
margin-top: 65px;
margin-left: 65px;

}

#flashblock {
float: right;
width: 280px;
height: 325px;
margin-top: 65px;
margin-right: 65px;

}


#textblock {
float: right;
width: 280px;
height: 325px;
margin-top: 65px;
margin-right: 65px;

}

#scrolltextblock {
float: right;
width: 280px;
height: 325px;
margin-top: 65px;
margin-right: 65px;
overflow: scroll;

}
#footer {
float: left;
margin-top: 45px;
margin-left: 140px;
width: 400px;
height: 25px;
text-align: center;
color: #333333;
font-weight: bold;
}
/************************************************** ***********************/
/*****************************************DROPDOWN MENU CODE********/

/*
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/
Article: http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
*/

body {
behavior: url(csshover.htc);
}

p a {
color: #887388; /* made the link text red again */
text-decoration:none;!important;
font-size:20px; /*change size of nav and dropdown text*/
font-family:Arial, Helvetica, sans-serif;
}

a{
color:#fff;
text-decoration:none; /* text color */
}
p a:hover{ text-decoration: none!important;
}

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}


ul#nav li a {
display: block;
font-weight: bold; /*background color */
padding: 2px 4px;
background-color: #887388;

}

ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #887388;
}

ul#nav li {
float: left;
position: relative;
width: 105px; /* change width of boxes */
text-align: center;
margin-right:0px;
border:1px solid #ccc;
background-color: #887388;

}

ul#nav li.current a{
background-color: #887388; /* fixed the home red button to gray */
}

ul#nav li.current a:hover{
background:#887388; /* background hover */
}

li ul {
display: none;
position: absolute;
width:120px; /* width of dropdown menu */
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}

ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
}

ul.sub { /* got rid of bullets in firefox */

list-style: none ;
}

/************************************************** ************************************************** **/
/************************************************** ************************************************** */
/********************IMAGE GALLERY STYLE CODE********************************************** **/

div.img
{
margin: 2px;
/*border: 1px solid #0000ff;*/
height: 65px;
width: 65px;
float: left;
text-align: center;

}

div.img img
{
width= 65px;
height= 65px;
display: inline;
margin: 3px;
/*border: 1px solid #ffffff;*/
}

div.img a:hover img
{
border: 1px solid #ffffff;
}

div.desc
{
float:left;
margin-left: 0px;
text-align: center;
font-style: italic;
font-weight: bold;
width: 150px;

}


#img_container {
float: left;
margin-top: 60px;
margin-left: 130px;
width: 160px;
height: 325px;

}


and here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link rel="stylesheet" type="text/css" href="../flowers.css" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flower events Cascading</title>
<style>
.style1 {font-style: italic}
</style>

</head>

<body>

<div id= "container">
<div id= "navigation">

<!-- START OF DROPDOWN MENU -->

<ul id="nav">
<li class="current"><a href="#" title="bouquets">Bouquets</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="cascading.html" title="cascading">Cascading</a></li>
<li><a href="presentation.html" title="presentation">Presentation</a></li>
<li><a href="blue_white.html" title="blue & white ">Round-blue &amp; white</a></li>
<li><a href="fall.html" title="fall">Fall</a></li>
<li><a href="green_white.html" title="green_white">Green and White</a></li>
<li><a href="lavender_purple.html" title="lavender and purple">Lavender &amp; Purple</a></li>
<li><a href="mixed.html" title="mixed">Mixed</a></li>
<li><a href="pastel.html" title="pastel">Pastel</a></li>
<li><a href="pink.html" title="pink">Pink</a></li>
<li><a href="red.html" title="red">Red</a></li>
<li><a href="red_white.html" title="red & white">Red &amp; White</a></li>
<li><a href="white.html" title="white">White</a></li>
<li><a href="yellow.html" title="yellow">Yellow</a></li>
</ul>
</li>

<li class="current"><a href="#" title="personal flowers">Personal</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="../personal/boutonnieres.html" title="boutonnieres">Boutonnieres</a></li>
<li><a href="../personal/corsages.html" title="corsages">Corsages</a></li>
<li><a href="../personal/pomanders.html" title="pomanders ">Pomanders</a></li>
<li><a href="../personal/tussie_mussies.html" title="tussie-mussies">Tussie_Mussies</a></li>
<li><a href="../personal/flower_girl.html" title="flower girl and ring bearer">Flower Girl and Ring Bearer</a></li>
</ul>
</li>


<li class="current"><a href="#" title="ceremony">Ceremony</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="../ceremony/ceremony_decor.html" title="ceremony decor">Ceremony Decor</a></li>
<li><a href="../ceremony/arches.html" title="arches">Arches</a></li>
<li><a href="../ceremony/huppas.html" title="huppas ">Huppas</a></li>
<li><a href="../ceremony/gazebos.html" title="gazebos">Gazebos</a></li>
<li><a href="../ceremony/church_decor.html" title="church decor">Church Decor</a></li>
<li><a href="../ceremony/chairs_pews.html" title="Chairs and Pews">Chairs &amp; Pews</a></li>
</ul>
</li>


<li class="current"><a href="#" title="reception">Reception</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="../reception/centerpieces.html" title="centerpieces">Centerpieces</a></li>
<li><a href="../reception/high.html" title="high">High</a></li>
<li><a href="../reception/low.html" title="low">Low</a></li>
<li><a href="../reception/cocktail_hour.html" title="cocktail hour">Cocktail Hour</a></li>
<li><a href="../reception/place_card_table.html" title="place card table">Place Card Table</a></li>
<li><a href="../reception/sweetheart_table.html" title="sweetheart table">Sweetheart Table</a></li>
<li><a href="../reception/cake_decor.html" title="cake decor">Cake Decor</a></li>
</ul>
</li>


<li class="current"><a href="#" title="rentals">Rentals</a> <!-- navigation headers -->

<ul class="sub">
<li><a href="../rentals/arches.html" title="arches">Arches</a></li>
<li><a href="../rentals/huppas.html" title="huppas">Huppas</a></li>
<li><a href="../rentals/candelabras_stands.html" title="candelabras & Stands">Candelabras &amp; Stands</a></li>
<li><a href="../rentals/columns_colonnades.html" title="columns & colonnades">Columns &amp; Colonnades</a></li>
</ul>
</li>

<li class="current"><a href="../testimonials.html" title="testimonials">Testimonials</a> <!-- navigation headers -->
</li>

<li class="current"><a href="../contact.html" title="contact us">Contact Us</a> <!-- navigation headers -->
</li>
</ul> <!--end of nav--><!-- END OF DROPDOWN MENU-->
</div> <!--end of navigation-->


<div id="homelink"><a href="../home.html"><img src="../home_link.gif" border="0" /></a> </div>



<!--<div id= "contentblock"> -->
<div id="img_container">
<div class="img"><a href="cascading/images/1a.JPG"><img src="cascading/images/1a_t.jpg" width="65" height="65" border="0" /></a></div>

<div class="img">
<a target="_blank" href="cascading/images/2a.JPG">
<img src="cascading/images/2a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img">
<a target="_blank" href="cascading/images/3a.JPG">
<img src="cascading/images/3a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img">
<a target="_blank" href="cascading/images/4a.JPG">
<img src="cascading/images/4a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img"><a target="_blank" href="cascading/images/5a.JPG"><img src="cascading/images/5a_t.jpg" width="65" height="65" border="0"/></a></div>

<div class="img">
<a target="_blank" href="cascading/images/6a.gif">
<img src="cascading/images/6a_t.jpg" width="65"
height="65" border="0"/> </a></div>

<div class="img"><a href="cascading/images/7a.gif"><img src="cascading/images/7a_t.jpg" width="65" height="65" border="0" /></a> </div>

<div class="img"><a href="cascading/images/4a.JPG"><img src="cascading/images/4a_t.jpg" width="65" height="65" border="0" /></a></div>

<div class="desc"> Cascading</div>
</div>
<!-- end img_container-->
<!-- </div> end contentblock-->


<div id="textblock" >
<p><strong><em>
Let History Inspire You....</em></strong></p>
<p align="justify">The custom of enhancing the wedding ceremony with flowers and the tradition of asking your closest girlfriends to be your bridesmaids dates back to ancient times. Maids would typically dress in fashion similar to the bride to confuse evil spirits trying to kidnap her. Today, bridesmaids are chosen for their loyalty and supportiveness to the bride and their dresses compliment the bride and her wedding theme. </p>
<p align="justify">&nbsp; </p>
<p>&nbsp;</p>
</div>
<!-- end flashblock div -->
<div class="style1" id="footer"> Website Design by Derekvanderven.com &copy; 2009</div>
</div>
<!--end of container-->
</body>
</html>

silverglade
01-20-2009, 01:46 PM
nevermind i fixed it by moving "csshover.htc" into the proper directories. anyway though, could someone please look at my pages in internet explorer 7 and see if they look ok? or is there a way to have both ie6 and ie7 on the same computer?
please.

http://derekvanderven.com/flower_events/home.html

Corrosive
01-20-2009, 04:15 PM
nevermind i fixed it by moving "csshover.htc" into the proper directories. anyway though, could someone please look at my pages in internet explorer 7 and see if they look ok? or is there a way to have both ie6 and ie7 on the same computer?
please.

http://derekvanderven.com/flower_events/home.html

Looks the same in IE7 as it does on Chrome. If in doubt use this...

www.browsershots.org

You can have both on one machine but I have no idea how as I run two machines and keep IE6 on one and IE7 on the other...not an option for everyone I know :wink: One of the others will help I'm sure.

d a v e
01-20-2009, 08:46 PM
IE tester
http://www.my-debugbar.com/wiki/IETester/HomePage

domedia
01-21-2009, 12:59 AM
I still stubbornly think that browser testing has to be done in a real environment, not through hacks or browser shots ;)

silverglade
01-21-2009, 10:16 AM
thank you very much everyone for helping me. could anyone please help me with my post on my "div layout problem", i looked all over the net and i cant find an answer im stuck. any help GREATLY appreciated a lot. thank you. derek

silverglade
01-21-2009, 11:32 AM
nevermind i fixed the div layout problem , but does anyone know why my "testimonial" header wont stay centered in ie6 in my "div layout problems" post"?

silverglade
01-21-2009, 12:54 PM
nevermind i fixed it with margin:auto. thank you for the help and suggestions. derek.