2 replies [Last post]
gp_330
gp_330's picture
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-07-24
Posts: 4
Points: 0

Firstly my page is set to render as follows and can be found at safe2u.co.za (the page code can be found at the bottom of this post):

Hi guys, I am making use of the drop down code found of http://www.xs4all.nl/~peterned/csshover.html, but for some reason I cannot get the drop downs to work in IE7. I have made sure that I am using the latest version of his csshover.htc but it still is not working!

I have been searching online, and I have tried various things: Updating the csshover.htc file, change the page's Render Type, trying to make use of Dean Edwards work arounds (http://dean.edwards.name/IE7/usage/) but still nothing!

The CSShover.htc file code looks like follows:

/**
* Whatever:hover - V2.02.060206 - hover, active & focus
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("http://www.safe2u.co.za/csshover.htc"); }
* ------------------------------------------------------------
*/

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'},
onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i

And my CSS code looks like as follows:

.nav { POSITION: relative; float:left; }

.nav UL {
padding:0px;
margin:0px;
list-style-type:none;
}
.nav LI {
padding:0px;
margin: 0px;
list-style-type:none;
}

.button {
FLOAT: left;
WIDTH: 130px;
}
.parent {
POSITION:relative;
}
.floatfix {
MARGIN-RIGHT: -3px
}

/* First Level Drop Down */
.dropdown {
LEFT:-3000px;
WIDTH:130px;
POSITION: absolute;
TOP: auto;
TEXT-ALIGN: left
}

/* Second Level Drop Down */
.dropdown div {
LEFT:-3000px;
WIDTH:130px;
POSITION:absolute;
TOP: 0px;
TEXT-ALIGN:left
}
.dropdown UL {
BORDER-RIGHT:1px solid #888;
BORDER-TOP:1px solid #888;
MARGIN:0px 30px 30px;
BORDER-LEFT:1px solid #888;
WIDTH: 130px;
BORDER-BOTTOM:0px solid #888;
}
.dropdown div UL {
MARGIN:30px 30px 30px 0px
}
.four .dropdown UL {
WIDTH:130px
}
.four .dropdown div UL {
MARGIN:30px 0px 30px 0px;
POSITION:relative
}
.nav LI {TEXT-ALIGN:center;}

.nav A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT:0px;
FONT-WEIGHT:bold;
FONT-SIZE:0.9em;
PADDING-BOTTOM: 5px;
COLOR: #800;
PADDING-TOP:6px;
TEXT-DECORATION: none
}
.four A {BORDER-RIGHT-WIDTH: 0px}

.nav UL UL A {
COLOR: #fff;
BORDER-BOTTOM:1px solid #888;
BORDER-RIGHT-WIDTH: 0px
}
.dropdown LI {
VERTICAL-ALIGN: bottom;
POSITION: relative
}
.parent:hover {}
.parent:hover div.dropdown {LEFT: -31px}

.dropdown LI:hover div {
LEFT: 130px;
TOP: -26px
}
.four LI:hover div {
LEFT: 130px;
TOP: -26px
}
.nav div.mini-zone {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 1px;
LEFT: -3000px;
PADDING-BOTTOM: 0px;
WIDTH: 15px;
BOTTOM: -15px;
PADDING-TOP: 0px;
TOP: auto;
HEIGHT: 15px
}
.nav .dropdown LI:hover div.mini-zone {
RIGHT:8px;
LEFT:auto;
TOP:auto
}
.nav .four LI:hover div.mini-zone {
LEFT: 8px
}

.dropdown LI:hover {BACKGROUND:#235}
.dropdown div LI:hover {BACKGROUND:#ff7}
.one UL {BACKGROUND:#d79b00}
.two UL {BACKGROUND:#459}
.three UL {BACKGROUND:#4a3}
.four UL {BACKGROUND:#790000}
.dropdown div UL {BACKGROUND:#eda}
.dropdown div UL A {COLOR:#400}

.one {Z-INDEX: 10}
.two {Z-INDEX: 20}
.three {Z-INDEX: 30}
.four {Z-INDEX: 40}
.four:hover {Z-INDEX: 20}

HTML .button .dropdown LI {MARGIN-LEFT: 0px; HEIGHT: 1%}
HTML .nav A {HEIGHT: 1%}

And finally I do have an additional conditional statement on my page, but this only seems to display in IE6 any way, which is working fine:

.button .dropdown li, .nav a {{zoom: 1;}

BODY {
BEHAVIOR: url(http://www.safe2u.co.za/csshover.htc)
}

.nav .dropdown {
WIDTH:130px
}
.nav .dropdown DIV {
WIDTH: 130px
}
.nav .button .dropdown UL {
MARGIN: 0px
}
.nav .dropdown {
POSITION: static
}
.nav .dropdown DIV {
POSITION: static
}
.nav .dropdown UL {
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px
}
.mini-zone {
DISPLAY: none
}

And help would be invaluable, as this site is basically ready to go, I am just fighting with IE7 at this stage!

mod edit/<code> tags added/tph

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

You should use valid

You should use valid code.
Try
.dropdown ul{min-height:1%;}

gp_330
gp_330's picture
Offline
newbie
Last seen: 14 years 23 weeks ago
Joined: 2007-07-24
Posts: 4
Points: 0

Dan the Man!

Dear DanA, Thanks for the quick response. I added your code and everything is working!
I agree with you on the valid code front, I copied this code from the original website, and it seems to look very cumbersome!

I will attempt to go through it to make it clearer and more valid. Thanks for your help, it was invaluable - I don't think I would have realised to add that tag in.