Link does not show in Firefox in my website

HTML & CSS
1

http://pandagardenhilltown.com/

^ That is my website…all the links work fine except for the one that leads to the Facebook page. The facebook url is stored under a .htm file in the root directory just like the other links are…but I don’t understand why that link just won’t do anything!

PS. It’s not the image…text link or image link, both don’t do anything.

The codes I used for the index page. v

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<meta name=“generator” content=“HTML Tidy for Linux (vers 6 November 2007), see www.w3.org”>
<title>Panda Garden</title>
<link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
<link href=“panda.css” media=“screen” rel=“stylesheet” type=“text/css”>
<style type=“text/css”>
body {
background-image: url(images/bg.png);
}
div.c5 {height: 300px; left: 200px; overflow: hidden; position: absolute; text-align: center; top: 232px; width: 600px}
div.c4 {height: 300px; left: 200px; overflow: hidden; position: absolute; text-align: center; top: 155px; width: 600px}
div.c3 {height: 400px; left: 240px; link-color: black; overflow: hidden; position: absolute; text-align: center; top: 400px; width: 400px}
div.c2 {height: 300px; left: -20px; overflow: hidden; position: absolute; text-align: center; top: 149px; width: 600px}
div.c1 {height: 300px; left: 30px; overflow: hidden; position: absolute; text-align: center; top: -70px; width: 600px}
</style>
</head>
<body>
<div class=“content c1”><img src=“images/beeps.png” alt=“Panda Garden” /></div>
<div class=“content c2”><img src=“images/schedulepg.png” alt=“Schedule” /><br /></div>
<div class=“content c3”><a target=“_self” title=“click here” href=“http://pandagardenhilltown.com/pandagarden.htm”><img src=“images/fbpage.png” /></a></div>
<div class=“content c4”><a href=“http://pandagardenhilltown.com/lunch_menu.html”><img src=“images/lunch.png” alt=“Lunch Menu” /></a></div>
<div class=“content c5”><a href=“http://pandagardenhilltown.com/dinner_menu.html”><img src=“images/dinner.png” alt=“Dinner Menu” border=“0” /></a></div>
</body>
</html>

2

Hi sapphyblue, welcome to SitePoint! :slight_smile:

Huh, I’ve never seen anyone try to do a link like that. I don’t want to depress you, but that’s not very good web page code.

Anyhow, the standard way to link to another page is like this:


<div class="content c3">[COLOR="Red"]<a title="click here" href="http://www.facebook.com/pages/Panda-Garden-Chinese-Buffet/107989765894999"><img src="images/fbpage.png" /></a>[/COLOR]</div>

Just replace the code you have with this code and you should be fine. :slight_smile:

3

^ Hello ralph.m :slight_smile:
I am aware it’s not good, but it’s really all I’ve been learning and known since forever.

Unfortunately…your advice didn’t really help me. The link still doesn’t work. :frowning:

4

You haven’t changed the code in the link you posted above. I tested the code and it works fine. where are you testing this?

5

^ Yes I did…I tested the code and reversed it back to its original because it wasn’t working.
Godaddy.

6

O, I see what the problem is. Because you are using absolute position (bad idea) and your divs are taller than needed, they are overlapping the link botton so that you can’t click on it.

You could either adjust the heights of those divs something like so:

div.c5 {height: 100px; left: 200px; overflow: hidden; position: absolute; text-align: center; top: 232px; width: 600px}
 div.c4 {height: 200px; left: 200px; overflow: hidden; position: absolute; text-align: center; top: 155px; width: 600px}
 div.c3 {height: 400px; left: 240px; link-color: black; overflow: hidden; position: absolute; text-align: center; top: 400px; width: 400px}
 div.c2 {height: 200px; left: -20px; overflow: hidden; position: absolute; text-align: center; top: 149px; width: 600px}
 div.c1 {height: 300px; left: 30px; overflow: hidden; position: absolute; text-align: center; top: -70px; width: 600px}

or just add a z-index to the link div:

div.c3 {[COLOR="Red"]z-index:20; [/COLOR]height: 400px; left: 240px; link-color: black; overflow: hidden; position: absolute; text-align: center; top: 400px; width: 400px; }

I recommend you go back to the code I gave for the div. Here it is in action:
http://pageaffairs.com/sp/panda.html

7

thank you; you’re a life savior!! ;_;