promotion image of download ymail app
Promoted

HTML links aren't clickable?

Here's the code for the links:

<div id="navbar">

<a href="default.html" title="Página Principal" alt="Página Principal">Página Principal</a><br />

<a href="aparatos.html" title="Aparatos y Electrónica" alt="Aparatos y Electrónica">Electrónica</a><br />

<a href="libros.html" title="Libros y Películas" alt="Libros y Películas">Libros y Películas</a><br />

<a href="mascotas.html" title="Mascotas" alt="Mascotas">Mascotas</a><br />

<a href="muebles.html" title="Muebles y Accesorios" alt="Muebles y Accesorios">Muebles</a><br />

<a href="ropa.html" title="Ropa y Calzado" alt="Ropa y Calzado">Ropa y Calzado</a><br />

<a href="servicios.html" title="Servicios" alt="Servicios">Servicios</a><br />

<a href="contact.html" title="Contáctenos" alt="Contáctenos">Contáctenos</a><br />

<br />

</div>

Most of them work fine, but the top two aren't clickable in Chrome (in IE it's only the first one), and they don't glow when moused over like the others. They've kept all the formatting I specified for the <a> tag, however.

What's up? Please help >_< I need to finish this soon...

Oh, and the CSS for the navbar <a>:

#navbar a, a:hover; a:active; a:focus, a:clicked {text-decoration: none;

color: #ccff99;

text-shadow: none;

-webkit-transition:

500ms linear 0s;

-moz-transition: 1000ms linear 0s;

-o-transition: 1000ms linear 0s;

transition: 1000ms linear 0s; outline: 0 none;}

#navbar a:hover {color: #fff;

text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;}

Update:

#navbar a {text-align: center;

font-family: Trebuchet MS, Arial Rounded MT Bold, Arial Black, Arial, Helvetica, sans serif;

font-size: 15pt;

font-weight: bold;

text-decoration: none;

color: #ccff99;

line-height: 200%;

background-image:url("navbar_bg.png");

background-size: 193px 41px;

display: block;

background-repeat: no-repeat;}

#navbar a:hover {color: #ffffd6}

#navbar a:active {color: #ffffd6}

#navbar a:clicked {color: #ccff99}

#navbar a:focus {color: #ffffd6}

Update 2:

I put a <br */> tag between each <a>, but Yahoo apparently decided to render it instead of showing the tag...

Update 3:

Oh, and I don't know if this helps. I have a custom cursor set, and it's supposed to turn a different color image when mousing over links. It works perfectly on all links except the aforementioned ones.

The code def shows links, so why does Chrome not see the top two as links? And why does IE not see the top one?

The top link was working perfectly until I added the two links that are below it.

Update 4:

I have none of the pages made yet. I do have the default.html page though, it's this one...

All the links are clickable despite leading to as yet inexistent pages...The top one leads to this same page, but isn't clickable... :?

Update 5:

@Franco: Removing the title and alt attributes did nothing :( Thank you for trying though!

3 Answers

Relevance
  • Chris
    Lv 7
    6 years ago
    Favorite Answer

    The clue to the cause is the fact that the first two links don't react to hovering.

    The cause is simple: some other element is on top of the first two links.

    We'd have to see more of your code to help you with that though.

    What I would do is open the page in Firefox or Chrome, move the mouse on top of a link that isn't reacting, then right-click and select "inspect element".

    That way you'll quickly find out what's happening.

    • Commenter avatarLogin to reply the answers
  • 6 years ago

    your HTML tags are fine with CSS (update1); links are clickable even if the pages are not yet created

    you can keep title attribute, but remove the alt attribute: "Attribute alt not allowed on element a"

    your code has no mistake (check it here http://validator.w3.org/#validate_by_upload) => should work in IE and Chrome too !

    video demo a element:

    http://w3-video.com/Web_Technologies/HTML5/html5_a...

    since you're creating a navigation menu, see the nav element (instead of using <div id="navbar"> use the nav element):

    http://w3-video.com/Web_Technologies/HTML5/html5_n...

    and the header tag:

    http://w3-video.com/Web_Technologies/HTML5/html5_h...

    • Commenter avatarLogin to reply the answers
  • Franco
    Lv 6
    6 years ago

    Hello

    My concern is your fourth update.

    Please make all the web pages, and put all the web pages in same folder. Maybe this might make a difference.

    Regarding the default web page. The default web page should be used as a home page. If your home page is saved as index.html, then make sure you use index.html.

    Below is an example.

    <a href="index.html" title="Página Principal" alt="Página Principal">Página Principal</a>

    If your on the default web page, and you click on the default.html hyperlink, then nothing should happen. Because you are clicking on the web page you are already on.

    If you don't have the following two web pages, then you have a problem.

    1. default.html

    2. aparatos.html

    PS

    A link will not be clickable if it's dead.

    Try to remove the title, and alt attributes from your a href element.

    The alt attribute is used with the img element, and the title should be used between the two head tags.

    For example:

    <html>

    <head>

    <title>example</title>

    </head>

    <body>

    <img src="smiley.gif" alt="Smiley face" width="42" height="42">

    </body>

    </html>

    Please see below.

    Hyperlink: <a href="mascotas.html">mascotas</a>

    Try to remove #navbar from your css.

    Below I am showing you where you should remove #navbar from your css.

    a:hover {color: #ffffd6}

    a:active {color: #ffffd6}

    a:clicked {color: #ccff99}

    a:focus {color: #ffffd6}

    • Commenter avatarLogin to reply the answers
Still have questions? Get your answers by asking now.