The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> need help making my menu work with IE(6,7)
KevinM
post Dec 4 2009, 10:48 AM
Post #1





Group: Members
Posts: 3
Joined: 4-December 09
Member No.: 10,499



I can't get the menu on the left on this site to work with IE6. I'm not much of a web designer; most of what I've learned has been thru trial and error, digging thru other peoples sites to see how they've done things, etc. (no formal training is what I'm saying) so I'm not very good at the art of hacking the css or using embedded js to make IE6 behave as I want it to. If you look at the page with Firefox you'll see how each item in the menu cascades open (sometimes 3-4 layers deep) as you hover over certain items. Well, that doesn't happen with IE6 (and with IE7 as you get down into deeper layers of the menu the item becomes disconnected from it's parent menu and then you can't click on it). Can somebody tell me what I need to do to get this working?

Thanks.

Kevin
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2009, 03:13 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



IE6 only supports :hover for links.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KevinM
post Dec 4 2009, 10:32 PM
Post #3





Group: Members
Posts: 3
Joined: 4-December 09
Member No.: 10,499




Pandy,

Thanks for the reply. I think I must have some competing css. I have this in a file called template.css (that pertains to col1 "stuff"):

/*------------------ Content ------------------*/

#col1 {
width: 200px;
height: 100%;
position: absolute;
border-top: 1px solid #000;
background-color: #6D9AC8;
left: 0;
padding-top: 5px;
z-index: 1000;
}


#col1 ul.mainmenu,
#col1 ul.mainmenu ul {
width: 187px; /* sets the size of the menu blocks */
/* puts a black border around the menu blocks */
/*background-color: #ffffdf;*/ /* makes the menu blocks white - a bg-color MUST be included for IE to work properly! */
padding-left: 0px; /* stops the usual indent from ul */
cursor: default; /* gives an arrow cursor */
/*margin-left: 12px;*/ /* Opera 7 final's margin and margin-box model cause problems */
}


#col1 ul.mainmenu li,
#col1 ul.mainmenu li a {
width: 187px;
/*z-index: 2000;*/
list-style-type: none; /* removes the bullet points */
margin: 0; /* Opera 7 puts large spacings between li elements */
position: relative; /* makes the menu blocks be positioned relative to their parent menu item
the lack of offset makes these appear normal, but it will make a difference
to the absolutely positioned child blocks */
color: #000000; /* sets the default font colour to black */
padding: 0 0 0 2px;
font-size: 14px;
font-weight: normal;
font-style: normal;
/*text-decoration: underline;*/
/*border-top: 1px solid #000;*/
/*border-bottom: 1px solid #000; */
}



#col1 ul.mainmenu li>ul { /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */
display: none; /* hides child menu blocks - one of the most important declarations */
position: absolute; /* make child blocks hover without leaving space for them */
top: 0px; /* position slightly lower than the parent menu item */
margin-left: 185px; /* this must not be more than the width of the parent block, or the mouse will have to move off the element to move between blocks, and the menu will close */
background-color: red;
/*z-index: 3000;*/
}

#col1 ul.mainmenu li:hover,
#col1 ul.mainmenu li.CSStoHighlight {
background-color: #ffa; /* gives the active menu items a yellow background */
color: #000; /* makes the active menu item text black */
}

#col1 ul.mainmenu ul.CSStoShow { /* must not be combined with the next rule or IE gets confused */
display: block; /* specially to go with the className changes in the behaviour file */
}

#col1 ul.mainmenu li:hover>ul { /* one of the most important declarations - the browser must detect hovering over arbitrary elements the > targets only the child ul, not any child uls of that child ul */
display: block; /* makes the child block visible - one of the most important declarations */
}

/* and some link styles */
#col1 ul.mainmenu li a {
display: block;
width: 100%; /*text-decoration: underline;*/
}

#col1 ul.mainmenu li a:hover, #col1 ul.mainmenu li a.CSStoHighLight {
color: #000;
}

#col1 ul.mainmenu li:hover>a {
color: #000;
} /* supports links in branch headings - should not be display: block; */

#col1 table {
left: 0;
}


Then in the col1.shtml file I have this:

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/magic_menu_six.html
Copyright © 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.mainmenu, .mainmenu ul {list-style-type:none; padding:0; margin:0;}

/* for IE7 to position the tables correctly */
.mainmenu {position:relative;}

/* for IE5.5 and IE6 to position the tables corectly */
* html .mainmenu {position:static;}

/* Set up the size of the list items and float left to place inline */
.mainmenu li {float:left; background:#e5ded8; width:185px; height:24px; margin:2px 2px 0 0; border:1px solid #000;}

/* Give the sub level list item a diffent background color to make it 'stand out'. */
.mainmenu li ul.submenu {background:red;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5
.mainmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; font-size:1em;} */

/* Default link styling */
.mainmenu li a {display:block; color:#433; font-size:11px; line-height:24px; width:185px; text-decoration:none; text-align:center;}

/* Style the list OR link hover. Depends on which browser is used */
.mainmenu :hover {color:#fff;background:#b9aa93;}

/* Give the link OR list a relative position. Depends on which browser is used */
.mainmenu li ul.submenu:hover,
.mainmenu li ul.submenu a:hover {position:relative;}

/* Give the link OR list a relative position. Depends on which browser is used */
.mainmenu li ul.submenu li ul.subsubmenu:hover,
.mainmenu li ul.submenu li ul.subsubmenu a:hover {position:relative;}

/* For all browsers except IE5.5 and IE6 to keep the hover state through the menu cascade. */
.mainmenu li:hover > a {color:#fff; background:#b9aa93;}

/* keep the 'next' level invisible by placing it off screen. */
.mainmenu ul,
.mainmenu :hover ul ul,
.mainmenu :hover ul :hover ul ul,
.mainmenu :hover ul :hover ul ul.left {position:absolute;left:-9999px; width:186px;}

/* Position the drop-down first sub level beneath the top level list item when hovering over the top level list OR link. The transparent image is for IE7 to render this correctly. The image does not have to exist smile.gif */
.mainmenu :hover ul{left:-1px; top:24px; background:transparent url(transparent.gif); padding-top:8px; }

/* Position the flyout sub levels to the right or left when hovering over the sub level list OR link. */
.mainmenu :hover ul :hover ul {padding:9px 3px;left:-1px;top:0;}
.mainmenu :hover ul :hover ul.left {left:-106px;}
.mainmenu :hover ul :hover ul :hover ul {padding:9px 3px;left:100px;top:0;}
.mainmenu :hover ul :hover ul :hover ul.left {left:-106px;}


</style>


And here's the first few rows from the menu in col1.shtml:

<div id="col1">
<div>
<ul class="mainmenu">
<li><a href="/">Home</a></li>
<li> PTO Business
<ul class="submenu">
<li><a href="/ptobusiness/newcomersinformation.shtml">Newcomers Information</a></li>
<li>Forms:
<ul class="subsubmenu">
<LI><a href="/ptobusiness/FIELD_SCHOOL_Check_Requisition_2009_10.pdf" target="_blank">Check Requisition Form</a></li>
<LI><a href="/ptobusiness/grants/FieldPTO2008_Grant_application.pdf" target="_blank">Grant Request Form</a></li>
</ul>
</li>
<li><a href="/ptobusiness/meetingschedule.shtml">Meeting Schedule</a></li>
<li><a href="/ptobusiness/meetingminutes.shtml" class="tertiary" target="_self">Meeting Minutes</a></li>
<li><a href="/ptobusiness/finance/finance.shtml" class="tertiary" target="_self">Financials</a></li>
<li><a href="/ptobusiness/grants.shtml" class="tertiary" target="_self">Grants</a></li>
<li><a href="/ptobusiness/boardcontactinformation.shtml" class="tertiary" target="_self">Board Contact Information</a></li>
<li><a href="/ptobusiness/publicity.shtml" class="tertiary" target="_self">Publicity</a></li>
<li><a href="/ptobusiness/bylaws.shtml" class="tertiary" target="_self">By-Laws</a></li>
<li><a href="/pastcommitteereports/pastcommitteereports.shtml" class="tertiary" target="_self">Past Committee Reports</a></li>
<li><a href="/boardmemberlogin/boardmemberlogin.shtml" class="tertiary" target="_self">Board Member Login</a></li>
<li><a href="/legaldocuments/legaldocuments.shtml" class="tertiary" target="_self">Legal Documents</a></li>
<li><a href="/ptodirectory/ptodirectory.shtml" class="tertiary" target="_self">PTO Directory</a></li>
</ul>
</li>
<li>PTO Committees
<ul class="submenu">
<li><a href="/ptocommittees.shtml" class="tertiary" target="_self">PTO Committees</a></li>
<li>Forms:
<ul class="subsubmenu">
<LI><a href="/ptocommittees/FieldSchoolPTOCommitteeReports2008_09.doc" target="_blank">Report Form 08/09(doc format)</a></li>
<LI><a href="/ptocommittees/FieldSchoolPTOCommitteeReports2008_09.pdf" target="_blank">Report Form 08/09(pdf format)</a></li>
</ul>
</li>
</ul>
</li>
<li>FundRaising
<ul class="submenu">
<li><a href="/fundraising/harvestball.shtml" class="tertiary" target="_self">Harvest Ball</a></li>
<li><a href="/fundraising/noodles_and_co.shtml" class="tertiary" target="_self">Noodles and Company</a></li>
<li><a href="/fundraising/halloweenparty.shtml" class="tertiary" target="_self">Halloween Party</a></li>
<li><a href="/fundraising/vshow2010.shtml" class="tertiary" target="_self">VShow</a></li>
<li><a href="/fundraising/spirit_wear.shtml" class="tertiary" target="_self">Spirit Wear 2009</a></li>
<li><a href="/fundraising/innisbrook.shtml" class="tertiary" target="_self">Innisbrook</a></li>
<li><a href="/fundraising/box_tops.shtml" class="tertiary" target="_self">Box Tops/Soup Labels</a></li>
<li><a href="/fundraising/school_supplies.shtml" class="tertiary" target="_self">School Supplies</a></li>
<li><a href="/fundraising/gift_cards.shtml" class="tertiary" target="_self">Gift Cards</a></li>
<li><a href="/fundraising/winter_carnival.shtml" class="tertiary" target="_self">Winter Carnival</a></li>
<li><a href="/fundraising/landscape_beautification.shtml" class="tertiary" target="_self">Landscape Beautification</a></li>
<li><a href="/fundraising/pizza_day.shtml" class="tertiary" target="_self">Pizza Day</a></li>
<li><a href="/fundraising/book_fair.shtml" class="tertiary" target="_self">Book Fair</a></li>
<li><a href="/fundraising/cookbook.shtml" class="tertiary" target="_self">CookBook</a></li>
</ul>
</li>


So I'm not sure where I'm missing the :hover pseudo-class that should make this work in IE6 or if the css from template.css and the built-in css in the col1.shtml are stepping on each other.

Thanks.

Kevin
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2009, 10:49 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



Oh crap. I should have looked closer. Sorry, but it would take me hours to get to the bottom of that.

I noticed something though. The copyright notice refers to this page http://www.cssplay.co.uk/menus/magic_menu_six.html . "No javascript, no conditional comments, no behaviors, no .htc file, just html and css". Is that the menu you've got? Because in one of the comments in the CSS you posted above it says "specially to go with the className changes in the behaviour file".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KevinM
post Dec 5 2009, 11:12 AM
Post #5





Group: Members
Posts: 3
Joined: 4-December 09
Member No.: 10,499



I tried to use that cssplay menu as the basis for this. Maybe what I should do is try to embed the col1 css from the template.css file with the cssplay css embedded in col1.shtml and try to remove any duplication that may be there. I'll give that a try and let you know the results.

Thanks.

Kevin
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th August 2019 - 05:55 PM