Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Image Link not working in Mozilla/Opera but ok in IE

Status
Not open for further replies.
bud4fun

bud4fun

IS-IT--Management
Sep 1, 2003
1
US
I've tried and tried to make the image link work and for some reason it is not clickable in either Mozilla nor Opera-but works fine in IE.
Any Suggestions?


Link in question is outlined in **asterisks**

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;<html xmlns=&quot;<head>
<title>CSS</title>
<style type=&quot;text/css&quot;>
<!--
body {background-color: black; background-image: url(images/bgindex2.jpg); background-repeat:
no-repeat; background-attachment: fixed; font-family : Geneva, arial, helvetica, sans-serif; font-size : 14px; text-align:center;}


div#leftcontent {
position: absolute;
width: 160px;
height: 100%;
padding-top: 325px;
left: 0;
}
.bordered a {
background: #FFFFFF; /* sample value */
}

.bordered a:hover {
background: #FEFEFE; /* 1 greyscale lower than sample value */
}

.bordered a img {
border: 1px solid #0000FF; /* blue border */
}

.bordered a:hover img {
border: 1px solid #FF0000; /* red border when hover */
}

div#links {position: absolute; top: 75px; left: 0; width: 170px; height: 600px; font: 14px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 2px 5px; margin: 0 0 4px; border-width: 0;
text-decoration: none; color: #cccc99; background: #333333;
}
div#links a:hover {color: #333333; background: #FFcc33;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: -60px; left: 60px; height: 50px; width: 64px;}

div#content {
position: absolute;
width: 485px;
top: 75px;
left: 190px;
right: 20px;
color: #BAA;
background: #cccccc;
font: 13px Verdana, sans-serif;
padding: 10px;
border: solid 3px #444;
background-color: #333333;
}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h3 {position: absolute; top: 5px; left: 270px; right: 50px; font: 25px Arial, sans-serif; color: #ffcc33; letter-spacing: .5em; background-color: #333333; margin-bottom: 0.05em; margin-top: 0.05em; border-color: #000000; border-width: 3px; border-style:dashed; padding: .2em; }

h2 { font-size: 20px; color: #CCCCCC; margin: 10px 4% -4px; letter-spacing: .4em; border-bottom: 2px solid #999999; }

p
{
text-indent: 2em;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
blockquote { width: 75%; background: #333333; font-style : none; font-weight : normal; font-family: Verdana, Arial, Helvetica, sans-serif; color : #CCCC99; font-size : 12px; border-width: 1px; border-style:solid; padding: 1em; }

-->
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<table width=&quot;710&quot; border=&quot;0&quot; align=&quot;left&quot;>
<tr>
<td>
<div id=&quot;links&quot;>

<a href=&quot; title=&quot;Members Only&quot;><font face=&quot;Webdings&quot;>4 </font>Member
Log-In<img src=&quot;home.gif&quot;></a>

<a href=&quot; title=&quot;Preview 'yFRONT' - Our Members Only Section&quot;><font face=&quot;Webdings&quot;>4 </font>Join | Preview Members Only Area<img src=&quot;animfile.gif&quot;></a>

<a href=&quot; face=&quot;Webdings&quot;>4 </font>Shop Now<img src=&quot;shop.gif&quot;></a>

<a href=&quot; face=&quot;Webdings&quot;>4 </font>View Art Gallery<img src=&quot;galleries.gif&quot;></a>

<a href=&quot; title=&quot;Shipping questions, customer service, general FAQ's&quot;><font face=&quot;Webdings&quot;>4 </font>FAQs | Customer Service<img src=&quot;faq.gif&quot;></a>

</div>
<br>

*************************************************
<div id=&quot;leftcontent&quot;>
<span class=&quot;bordered&quot;>
<a href=&quot; target=&quot;_blank&quot;><img src=&quot;images/3rdprty/new.jpg&quot; width=&quot;118&quot; height=&quot;176&quot; border=&quot;0&quot; lowsrc=&quot;images/3rdprty/new.jpg&quot;></a>
</span>
</div>
*************************************************


<!-- Beginning of main content -->
<div id=&quot;content&quot;>
<p>
<a href=&quot; target=&quot;_blank&quot;>art sample 1</a>
</p>
<p>art deux</p>
<p>art 3 filler</p>
<p>filler content contressssssa lareuafiller content contressssssa lareuafiller lareuafiller content contressssssa lareuafiller content contressssssa lareuafiller content contressssssa lareuafiller content contressssssa lareuafiller content contressssssa lareuafiller content contressssssa lareuafiller content contressssssa
</p>
</div>

</td>
</tr>
</table>

</body>
</html>
 
Sort by date Sort by votes
The &quot;hot&quot; part got truncated in the post!

Try to post the **'ed part of your code again, but like this:

[ignore]
Code: 
[/ignore] your code [ignore][[/ignore]/code[ignore]][/ignore][/b]

[u]ONLY[/u] the [COLOR=red]** red **[/color] please  §;O)

Regards


Jakob
 
Upvote 0 Downvote
bud4fun,

The problem is your #links DIV. The height is 600 pixels, which is overwriting the image (even though you can still see the image).

If you change the height of div#links from 600px to 120px, it works fine.

Hope this helps!

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
787
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top