/    Sign up×
Community /Pin to ProfileBookmark

Cross-browser issues with DHTML dropdowns

Copy linkTweet thisAlerts:
Jul 12.2005

I have been developing some dropdown menus loosely based on Patrick Griffiths “Suckerfish” example (see [url]http://www.alistapart.com/articles/dropdowns/[/url]) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can’t sort out.

First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it’s fine. I can’t figure out why — any ideas? I want it right underneath, not offset.

Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery …

Thanks for any comments / thoughts.

Tom

========================================================

[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<head>
<title>Test</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<style type=”text/css”>

body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}

.mainlist {
list-style: none;
padding: 0;
margin: 0;
}

.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}

.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}

.mainitemlast {
border-right: 1px solid green;
}

.mainlist li:hover ul {
display: block;
left: 0;
}

li.over ul {
display: block;
left: 0;
}

.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}

.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}

.subitemlast {
border-bottom: 1px solid blue;
}

.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}

.subitem a:hover {
background-color: #EEEEFF;
}

</style>

<script type=”text/javascript”><!–//–><![CDATA[//><!–

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==”LI”) {
node.onmouseover=function() {
this.className+=” over”;
}
node.onmouseout=function() {
this.className=this.className.replace(” over”, “”);
}
}
}
}
}
window.onload=startList;

//–><!]]></script>

</head>

<body>

<div id=”content”>
<br>

<ul class=”mainlist” id=”nav”>
<li class=”mainitem”>
<div><a href=””>Option 1</a></div>
<ul class=”sublist”>
<li class=”subitem”><a href=””>Subitem 1</a></li>
<li class=”subitem”><a href=””>Subitem 2</a></li>
<li class=”subitem”><a href=””>Subitem 3 is longer</a></li>
<li class=”subitem subitemlast”><a href=””>Subitem 4</a></li>
</ul>
</li>

<li class=”mainitem”>
<div><a href=””>Option 2</a></div>
<ul class=”sublist”>
<li class=”subitem”><a href=””>Subitem 1</a></li>
<li class=”subitem”><a href=””>Subitem 2</a></li>
<li class=”subitem”><a href=””>Subitem 3 is longer</a></li>
<li class=”subitem subitemlast”><a href=””>Subitem 4</a></li>
</ul>
</li>

<li class=”mainitem mainitemlast”>
<div><a href=””>Option 3</a></div>
<ul class=”sublist”>
<li class=”subitem”><a href=””>Subitem 1</a></li>
<li class=”subitem”><a href=””>Subitem 2</a></li>
<li class=”subitem”><a href=””>Subitem 3 is longer</a></li>
<li class=”subitem subitemlast”><a href=””>Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
[/CODE]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 13.2005 — i wonder if it works in Mozilla, as you have

if ([color=red]document.all&&[/color]document.getElementById)

that means the function will work [b]only[/b] in IE. Remove the red coloured above


Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ...
[/quote]
Mozilla considers the border outside the cell, while IE considers it inside the cell
Copy linkTweet thisAlerts:
@trawsonauthorJul 13.2005 — i wonder if it works in Mozilla, as you have

if ([color=red]document.all&&[/color]document.getElementById)

that means the function will work [b]only[/b] in IE. Remove the red coloured above

Mozilla considers the border outside the cell, while IE considers it inside the cell[/QUOTE]

The JS is only supposed to work in IE, it simulates :hover. Mozilla doesn't need it as it supports :hover on any element.

Thanks for the tips on the border. According to the spec it sounds like IE is wrong on that.
Copy linkTweet thisAlerts:
@KorJul 13.2005 — The JS is only supposed to work in IE, it simulates :hover. Mozilla doesn't need it as it supports :hover on any element.[/quote]

? I am sure you could have avoid a javascript code only for that... You could have build a proper CSS pseudo-classes to make it cross-browser
Copy linkTweet thisAlerts:
@trawsonauthorJul 13.2005 — ? I am sure you could have avoid a javascript code only for that... You could have build a proper CSS pseudo-classes to make it cross-browser[/QUOTE]

Read the Suckerfish info at [URL]http://www.alistapart.com/articles/dropdowns/[/URL] and [URL]http://www.htmldog.com/articles/suckerfish/dropdowns/[/URL]. They claim the JS is needed. Do you know of a way to make IE handle :hover on a non-link element without using JS? If so, how about an example?

Thanks,

Tom
Copy linkTweet thisAlerts:
@KorJul 13.2005 — but you [b]have[/b] a elements in your code. And if you want to do a rollover efect upon the parent node of your href, you could simply use simple crossbrowser javascript code to do that. Something like
[code=php]
onload =function(){
var lis = document.getElementById('nav').getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){this.className='rollonclass'}
lis[i].onmouseout=function(){this.className='rolloffclass'}
}
}
[/code]
Copy linkTweet thisAlerts:
@trawsonauthorJul 13.2005 — but you [b]have[/b] a elements in your code. And if you want to do a rollover efect upon the parent node of your href, you could simply use simple crossbrowser javascript code to do that.[/QUOTE]
Yes I do have those. But for a list-based dropdown you want the UL element below an upper-level LI to switch from display:none to display:block on a rollover of the upper-level LI. As I understand it this is accomplished with something like:

[CODE]
#menu li:hover ul {
display: block;
left: 0;
background-color: #CCCCFF;
}
[/CODE]

No A element is required. The upper-level LI may also be an A element but I didn't want to assume this.

As for the JS, why make it cross-browser when it is needed for IE only, and Mozilla can be done with CSS? I agree that the JS code is cleaner if it is not for IE only, but the overall design seems cleaner using JS only where required.
Copy linkTweet thisAlerts:
@KorJul 13.2005 — 
why make it cross-browser when it is needed for IE only, and Mozilla can be done with CSS?
[/quote]
Anyway u need a javascript... Ok, it is ok your way, it is just a matter of "style" :-)
×

Success!

Help @trawson spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...