[SOLVED] Image links disappear after clicked

finalfantasyfanatic · #1 (**permalink**) Dec 4th, 2007, 11:22

i've been having trouble with my image links. I have a top nav bar and a left hand side nave bar, they were interfering with each other but I've managed to fix that. Although now my image links which change on hover disappear after I click them. They're designed as one image which moves position when it's hovered over. here's the code:

CSS

Code: Select all

body,td,th {
    margin:0px;
    text-align: center;
    font-size:17px;
    font:Verdana, Arial, Helvetica, sans-serif;
    }

body {
    background-image:url(images/bgpattern.jpg);
    }
    
#container {
    width: 852px;
    height:auto;
    color:#000000;
    margin-left:auto;
    margin-right:auto;
    }
    
#banner {
    background-image:url(images/Banner.jpg);
    width:852px;
    height:220px;
    clear:both;
    }
    
#topnav{
    background-color:#000000;
    width:852px;
    height:22px;
    text-align:left;
    }
    
#topnav a:link, #topnav a:link, #topnav a:visited, #topnav a:hover, #topnav a:active, #topnav a:link:active, #topnav a:visited:active {
    margin-left:10px;
    margin-right:10px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bolder;
    font-size:20px;
    }
    
#nav {
    background-color:#000000;
    width:260px;
    height:870px;
    float:left;
    text-align:center;
    }
    
#nav a:link, #nav a:visited {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:top;
    }
    
#nav a:hover, #nav a:visited:hover, #nav a:link:active, #nav a:visited:active, #nav a:active {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:bottom;
    }    
    
#content {
    background-color:#000000;
    width:592px;
    height:870px;
    float:right;
    text-align:left;
    overflow:scroll;
    overflow-x:hidden;
    }
    
#foot {
    background-image:url(images/Footer.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
#header {
    background-image:url(images/header.jpg);
    width:852px;
    height:27px;
    clear:both;
    }
    
p.seriesbyline {
    color:#FFFF33;
    font-size:20px;
    font-style:italic;
    text-align:center;
    margin:6px;
    margin-top:4px;
    margin-bottom:4px;
    }
    
p {
    color:#FFFFFF;
    text-indent:12px;
    margin:6px;
    margin-top:26px;
    margin-bottom:26px;
    }
    
a#exkaiser:link {
    background-image:url(images/braveexkaiser.jpg);
    }
    
a#Fighbird:link {
    background-image:url(images/bravesunfighbird.jpg);
    }

a#Da-Garn:link {
    background-image:url(images/bravefighterlegendDa-Garn.jpg);
    }

a#mightgaine:link {
    background-image:url(images/braveexpressmightgaine.jpg);
    }

a#Jdecker:link {
    background-image:url(images/bravepolicejdecker.jpg);
    }

a#Goldran:link {
    background-image:url(images/braveofgoldgoldran.jpg);
    }

a#Dagwon:link {
    background-image:url(images/bravecommanddagwon.jpg);
    }

a#GaoGaiGar:link {
    background-image:url(images/bravekingGaoGaiGar.jpg);
    }

a#gurrenlagann:link {
    background-image:url(images/TTGL.jpg);
    }

a#Gunbuster:link {
    background-image:url(images/aimforthetopgunbuster.jpg);
    }
    
a#msn:link {
    background-image:url(images/MSN.jpg);
    }

a#macross:link {
    background-image:url(images/SDFM.jpg);
    }


a#srw:link {
    background-image:url(images/SRW.jpg);
    }

a#fmp:link {
    background-image:url(images/FMP.jpg);
    }
    
a#Gravion:link {
    background-image:url(images/gravion.jpg);
    }
    
a#MAD:link {
    background-image:url(images/MAD.jpg);
    }

Page

Code: Select all

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>The Ultimate Gattai! Because Robots are a man's passion!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="mystylesheet.css" rel="stylesheet" type="text/css"></link>

</head>
<body>

    <div id="container">

        <div id="header"></div>

        <div id="topnav">
        
                <a href="index.htm" alt="home">HOME</a><a href="#" alt="forums">FORUMS</a><a href="faq.htm" alt="FAQ">FAQ</a>
                
        </div>        
        
        <div id="banner"></div>        
        
        <div id="nav">
                
                <a id="exkaiser" href="index.htm" alt="Brave Exkaiser"></a>
                <a id="Fighbird" href="index.htm" alt="The Brave Fighter of the Sun Fighbird"></a>
                <a id="Da-Garn" href="index.htm" alt="The Brave Fighter of Legend Da-Garn"></a>
                <a id="mightgaine" href="index.htm" alt="The Brave Express  Might Gaine"></a>
                <a id="Jdecker" href="index.htm" alt="Brave Police J-Decker"></a>
                <a id="Goldran" href="index.htm" alt="The Brave of Gold Goldran"></a>
                <a id="Dagwon" href="index.htm" alt="Brave Command Dagwon"></a>
                <a id="GaoGaiGar" href="index.htm" alt="The King of Braves GaoGaiGar"></a>
                <a id="gurrenlagann" href="index.htm" alt="Tengen Toppa Gurren Lagann"></a>
                <a id="Gunbuster" href="index.htm" alt="Aim For the Top! Gunbuster!"></a>
                <a id="msn" href="index.htm" alt="Martian Sucessor Nadesico"></a>
                <a id="macross" href="index.htm" alt="Super Demension Fortress Macross"></a>
                <a id="srw" href="index.htm" alt="Super Robot Wars"></a>
                <a id="fmp" href="index.htm" alt="Full Metal Panic!"></a>
                <a id="MAD" href="index.htm" alt="metal armour dragonar"></a>
                <a id="Gravion" href="index.htm" alt="Gravion"></a>
                        
        </div>
        
            <div id="content">
            
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus diam, sodales at, luctus a, eleifend vitae, nibh. Ut tortor sem, facilisis ac, ullamcorper vitae, pulvinar non, erat. Sed ultricies mattis mi. Duis vitae mi nec purus sodales dapibus. Suspendisse aliquam pharetra tellus. Ut pede nibh, adipiscing eu, mollis id, porttitor consectetuer, nulla. Fusce nisl est, adipiscing at, consequat vitae, placerat quis, purus. Sed urna odio, tempor id, dapibus et, venenatis nec, urna. Ut lacus lorem, suscipit a, sollicitudin nec, congue non, lorem. Nulla elementum metus ac tortor. Mauris id lectus. Praesent dolor diam, commodo id, sollicitudin et, elementum non, urna. Mauris volutpat, turpis non nonummy nonummy, mi magna porttitor diam, a cursus ante massa at libero. Maecenas lorem. Cras purus. Suspendisse pharetra turpis eget urna. Sed elementum nulla nec tellus. Curabitur mi enim, dapibus quis, ornare sed, nonummy sit amet, nisi. Etiam et purus. Phasellus massa orci, malesuada a, ultrices pellentesque, volutpat eget, diam.</p>
                
                <p>Aliquam erat volutpat. Donec placerat tortor quis enim. Ut iaculis. Duis egestas feugiat dui. Donec erat diam, congue rutrum, dignissim at, nonummy rutrum, arcu. Pellentesque non risus. Proin mauris. Aenean porta. Aenean et sapien. Mauris rutrum nisi at justo. In vel nunc.</p>
                
                <p>Cras lobortis odio et nulla. Fusce commodo justo non lacus. Nullam rutrum. Nulla ultricies pede ac leo. Donec tincidunt tempor dui. Suspendisse rhoncus placerat pede. Etiam vulputate, nisl vestibulum fringilla sagittis, elit tellus porta arcu, in pretium diam nisl ac mauris. Morbi sodales fermentum mauris. Praesent tempus risus semper tortor. In at eros.</p>
                
                <p>Nunc tempus tellus eget quam. Praesent neque risus, vehicula et, elementum et, aliquam a, tellus. Sed arcu mi, aliquam at, condimentum eu, interdum et, nisi. In faucibus eros vel ligula. Duis porta dolor ac justo dictum auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur facilisis quam non sapien. Cras nec augue. Vestibulum ligula nunc, euismod at, lobortis quis, porttitor quis, justo. In purus nulla, porttitor vitae, dignissim id, tincidunt at, lorem.</p>
                
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris a velit et massa suscipit tincidunt. Proin ornare sollicitudin turpis. Maecenas eleifend. Duis posuere sem sit amet dui. Nulla et eros sed nisl pulvinar pellentesque. Nulla porta adipiscing diam. In in mauris. Morbi laoreet vulputate nulla. Sed tellus lacus, viverra ac, adipiscing vitae, laoreet quis, libero. Mauris sed sem nec tellus tristique bibendum. Mauris sed dui quis libero suscipit elementum. Aenean sed justo. Donec at felis. Morbi ipsum mauris, lacinia et, ornare sed, accumsan eu, dolor. Sed sit amet arcu vitae urna iaculis tristique. Vivamus convallis arcu eleifend turpis.</p>
                
                <p>Nulla lacus augue, sagittis ut, vehicula vel, lobortis semper, pede. Nunc molestie diam. Curabitur dictum consectetuer pede. Quisque vitae dolor feugiat est congue facilisis. Aliquam id nunc. Proin at arcu eget tellus venenatis sagittis. Phasellus vitae elit. Suspendisse sed neque. Ut rutrum accumsan erat. Morbi eu sem. Nunc arcu leo, adipiscing vel, volutpat eu, dignissim id, est. Donec tincidunt mauris vel dui. Integer tempor rhoncus dui.</p>
                
                <p>Sed dignissim turpis id ligula. Integer velit sapien, faucibus non, pulvinar nec, adipiscing a, arcu. Praesent molestie, est ac pharetra mattis, libero felis placerat tellus, at semper ligula est vel pede. Morbi nibh. Cras scelerisque. Praesent adipiscing. Etiam ornare ornare sem. Duis pellentesque ante id libero. Nullam pharetra dui at est. Nullam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Morbi quis nisl. Donec tempus tellus a elit.</p>
                
                <p>Donec lacus nisl, imperdiet lobortis, adipiscing id, convallis ut, turpis. Vestibulum nibh. Aenean porttitor est vitae est. Mauris eleifend sem quis odio. Mauris pulvinar cursus sapien. Nam ac velit. Sed nec ligula. Aliquam erat volutpat. Cras vulputate tempus ipsum. Nulla massa.</p>
                
            </div>
        
            <div id="foot"></div>

    </div>

</body>
</html>

Here is the webpage link: http://ultimategattai.tripod.com/.

dab42pat · #2 (**permalink**) Dec 4th, 2007, 12:44

This appears to be an ie issue as it works ok in ff.

Try changing.

HTML: Select all

<link href="mystylesheet.css" rel="stylesheet" type="text/css"></link>

to

HTML: Select all

<link rel="stylesheet" type="text/css" href="mystyylesheet.css">

welshstew · #3 (**permalink**) Dec 4th, 2007, 12:48

it's not working for me in FF. How weird.

Once I have clicked on a link it applies the following style: #nav a:link, #nav a:visited

Which doesn't have a image associated with it. It is not applying the associated id to the nav item. Start looking there, nad see what you can find.

Stew

Marc · #4 (**permalink**) Dec 4th, 2007, 12:49

Me neither.

Stuart · #5 (**permalink**) Dec 4th, 2007, 12:52

Nor for me... Try taking the </link> away. The link tag is a self closing tag, and does not require you to close it with </link>.

karinne · #6 (**permalink**) Dec 4th, 2007, 12:54

less than 10 lines of code and it's all messed up

HTML: Select all

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>The Ultimate Gattai! Because Robots are a man's passion!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="mystylesheet.css" rel="stylesheet" type="text/css"></link>

</head>

The DOCTYPE declaration should be the VERY FIRST line of you HTML document

Since you are using an HTML doctype, you don't close empty elements />

The link tag doesn't have a closing tag

dab42pat · #7 (**permalink**) Dec 4th, 2007, 12:55

Am I missing something here?
In ff when you hover the image on the link changes, when you click the link the page just reloads as they are all linked to index, the images and links dont dissapear except in ie6.

karinne · #8 (**permalink**) Dec 4th, 2007, 12:57

They disappear in FF for me.

Marc · #9 (**permalink**) Dec 4th, 2007, 12:57

The images on the left (nav) aren't even showing up for me.

welshstew · #10 (**permalink**) Dec 4th, 2007, 13:11

Can you rename:
#nav a:link, #nav a:visited
#nav a:hover, #nav a:visited:hover, #nav a:link:active, #nav a:visited:active, #nav a:active

to just be
#nav a:link,
#nav a:hover,

just for now and then rehost to see the result

dab42pat · #11 (**permalink**) Dec 4th, 2007, 13:15

Honest its working in ff for me (I must have a bizzare ff setup, it did update yesterday)

karinne · #12 (**permalink**) Dec 4th, 2007, 13:24

And all these are non-existent pseudo-

#nav a:visited:hover, #nav a:link:active, #nav a:visited:active

A perfect example of why a site should be validated first before asking questions. 11 replies and still everyone is scratching there heads around crappy invalid code!

welshstew · #13 (**permalink**) Dec 4th, 2007, 13:35

I think I have got it. No not that the answer.

Can you please remove :link from all the a#<idname>:link css code;

i.e. a#mightgaine:link should be a#mightgaine

and that should do it.

I hope.

P.S validate you code.

Edit - for some reason the visited is not working in FF but is in IE7, not sure why

finalfantasyfanatic · #14 (**permalink**) Dec 5th, 2007, 11:16

Thanks everyone for the replies and yes the problem occurred in both IE and FF, the links could be brought back by emptying your browser's cache and refreshing the page for those who hadn't realized that. Also none of the links linked to anyone page except for a few of them because I used href="#". Sorry karinne, I should validate my page more often when I make changes, although the validator I was using didn't pick up the mistake I made with the doc type, that was my bad. alot of the suggestions you made didn't fix the problem but did improve the page but the last two posts gave me an idea, so I tried this:

Code: Select all

#nav {
    background-color:#000000;
    width:260px;
    height:870px;
    float:left;
    text-align:center;
    }
    
#nav a:link {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:top;
    }
    
#nav a:visited {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:top;
    }
    
#nav a:hover {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:bottom;
    }
    
#nav a:active {
    width:250px;
    height:50px;
    display:block;
    text-align:center;
    margin:4px;
    padding:0px;
    clear:both;
    background-position:top;
    }

Which unsuprisingly did work.

So far out of the 3 forums I have tried this is the best help i've recieved and thank you very much for the suggestions.

karinne · #15 (**permalink**) Dec 5th, 2007, 12:14

Quote:

Originally Posted by finalfantasyfanatic

TSorry karinne, I should validate my page more often when I make changes, although the validator I was using didn't pick up the mistake I made with the doc type, that was my bad.

That was probably because you confused the heck out of it by putting it after the <html> tag

Glad to see you sorted it out

Welcome to the forumz BTW

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Java - Change image when the title is clicked	Graisbeck	Other Programming Languages	4	Nov 20th, 2007 16:43
How can I get image links?	Kwabena	Website Planning	5	May 31st, 2007 00:54
Faux Columns Problem - scolling up / down causes part of background image 2 disappear	brianwilson71	Web Page Design	17	Apr 25th, 2007 00:34
Rollover image with links on new image	stoob	JavaScript Forum	2	Feb 8th, 2007 22:05
Blured Links (image links)	bruno89	Web Page Design	2	Jul 25th, 2006 14:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Image links disappear after clicked