Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

div onclick help?

works on FF but not IE?



5:36 pm on Jul 25, 2010 (gmt 0)

5+ Year Member

ok ive been trying to get this code to work forawhile now and have done many searches and foru reading and tried many things to no avail. my div on click commands work on FF but not on IE and its absolutly killing me, I would be willing to make a small donation to someone by helping me to get it to work cause im tired of trying to get this work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<body background ="http://www.njirishfootball.com/new/nice/bb.png">

<div onclick="document.location = 'http://www.njirishfootball.com/home/roster' " style="cursor: pointer; width: 95px; height:

40px; position: absolute; top: 57px; left: 397px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/coachingstaff' " style="cursor: pointer; width: 145px;

height: 40px; position: absolute; top: 57px; left: 498px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/home/frontoffice' " style="cursor: pointer; width: 122px;

height: 40px; position: absolute; top: 57px; left: 650px;"></div>

<div onclick="document.location = 'http://www.njirishfootball.com/emeralds' " style="cursor: pointer; width: 172px; height:

40px; position: absolute; top: 57px; left: 779px;"></div>


5:57 pm on Jul 25, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome aboard realignorent, why don't you just use the natural object for this, an anchor, and set it's display to block to emulate the div rather than the other way around? Then your problem goes away, and you don't need to rely on javascript to make it work. You can now apply mouseover effects without JS too. You have the additional advantage of getting it indexed as a link, and the text doesn't need to display - note the negative text-indent. Last, you'll help reduce the heartbreak of div-itis. :-) Give this a try, it's tested code.

I wouldn't use absolute positioning for various reasons, but anyway . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
.some-link {
Assuming the divs that are now anchors
have a background image, apply it here.
Remove this border after testing.
border:1px solid #000;
display: block;

top: 57px;
.some-link:hover { background: #fefae0; } /* or image */
#first-link { width:95px;left:397px; }
#second-link { width:145px;left:498px; }
#third-link { width:122px;left:650px; }
#fourth-link { width:172px;left:779px; }
<a class="some-link" id="first-link"
<a class="some-link" id="second-link"
href="http://www.example.com/home/coachingstaff">Coaching Staff</a>
<a class="some-link" id="third-link"
href="http://www.example.com/home/frontoffice">Front Office</a>
<a class="some-link" id="fourth-link"

A truly semantic solution would be to put them in a <ul>, because what you have there is a list of links, and you could zero out the margins and either display the li's inline or float them. Then you'd just set the properties above as #list-id a instead.


9:48 am on Jul 26, 2010 (gmt 0)

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member

If you absolutely must use js, try window.location:




7:44 am on Jul 27, 2010 (gmt 0)

5+ Year Member

thank you for your help, actually someone else helped me by telling me to use a image mapping tool and that was the fix to my problem, but thank you for your response's

and im fairly new to html,css,js and other coding so alot of stuff still doesnt make sense to me but thats anyways

Featured Threads

Hot Threads This Week

Hot Threads This Month