Welcome to WebmasterWorld Guest from 54.163.23.73

Forum Moderators: incrediBILL

Message Too Old, No Replies

a href not working inside li tag

a href not working inside li tag

     

abidshahzad4u

7:05 pm on Mar 14, 2011 (gmt 0)

5+ Year Member



Hi All

I'm stuck in a strange problem and unable to figure it out. The a href="" is not working in FireFox and Chrome but working properly in IE6, IE7, IE8 and Opera. Following is my code

<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li>|</li>
<li><a href="account.php" title="Account">My Account</a></li>
<li>|</li>
<li><a href="#" title="Contact">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="Why Us?">Why Us?</a></li>
<li>|</li>
<li><a href="#" title="News">Watch News</a></li>
<li>|</li>
<li><a href="#" title="Reviews">Watch Reviews</a></li>
<li>|</li>
<li><a href="#" title="Checkout">Checkout</a></li>
</ul>


here is CSS
ul li a { text-decoration:none; color:#000000; cursor:auto;}


Please help?

g1smd

7:27 pm on Mar 14, 2011 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



No idea about the CSS problem, but don't link to "index.php" for the Home URL. Link to "www.example.com/" with a trailing slash instead.

webprutser

7:58 pm on Mar 14, 2011 (gmt 0)



When you change ul li a in your CSS into ul, it is working in Firefox.

webprutser

8:01 pm on Mar 14, 2011 (gmt 0)



Forgot to mention: ul li is used, once you have a second level in your menu, a nested list. Since you have only one (main)level, your style rules should be put in ul.

alt131

9:32 pm on Mar 14, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi abidshahzad4u, I found the links did work, but in FF the cursor is changed to a bar (I), not the "hand" expected when a user hovers over a link.

If that is what you meant by "not working", try removing
cursor:auto;
so the cursor displays the default "hand" when the links are hovered.

[edit] If that isn't what you meant by "not working", there may be something else in the code that is affecting the links - check to confirm the <a> isn't inheriting styles from elsewhere [/edit]

@webprutser
When you change ul li a in your CSS into ul, it is working in Firefox.
Trick for new players ;) - that is because setting the styles on the ul removes cursor:auto from the a - where it is causing the troubles.

webprutser

11:44 pm on Mar 14, 2011 (gmt 0)



$%$##@ I thought this was an easy fix for me, since I have a well working menu based on a list.
I always check if a linked file name appears in the bottom-toolbar, but obviously didn't this time.
Nice fix I offered. "My car-radio is making an odd sound ..... removing car-radio .... I fixed it, no odd sounds any more".
Pfff, I think it's better to stop posting, I cause more confusion than solve problems.

abidshahzad4u

4:14 pm on Mar 15, 2011 (gmt 0)

5+ Year Member



Thanks all for reply.

@alt131

I have checked all the solutions before posting here, even deleted and recreated all of them, but nothing happened. I'm surprised with fact that links are not working in FF and Chrome. With other browsers, they are fine.

tedster

4:44 pm on Mar 15, 2011 (gmt 0)

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



Have you checked the html and css with a validator?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

Fotiman

5:05 pm on Mar 15, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@abidshahzad4u, you still haven't specified what you mean by "not working". Can you clarify that please?

htmlbasictutor

6:59 pm on Mar 17, 2011 (gmt 0)

5+ Year Member



The idea of taking out cursor:auto works if the missing hand cursor is the problem. You don't need to specify auto, it's there by default.

jennyj

12:44 pm on May 6, 2011 (gmt 0)

5+ Year Member



if you do need a hand cursor (for example on a tag that is *not* an <a> tag), the correct implementation is cursor:pointer;

(old versions of IE may need cursor:auto; but this should be hidden from standards compliant browsers, either using a css hack, or in a conditional comment)

londrum

12:47 pm on May 6, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



i bet you 10p that i know what it is.

you've got a div, or some kind of block level element overlapping the link. it's acting like a 'mask' over the top of the link, so you cant click it.

try and give all the block level elements near the link a background colour, to see which one is overlapping.

finlander

4:33 am on May 29, 2011 (gmt 0)



I am experiencing a similar problem, and it DOES appear to be overlapping elements. In my case, I have links within both elements, and I want the elements to overlap a little, in order to position some facebook and twitter buttons in a specific place on the page, but any overlap of the other element, even though it's still visible, causes the link(s) of the other element to become disabled. I am seeing this behavior in FF and maybe it also occurs in Chrome, though I haven't tested the issue with Chrome. However, IE handles the overlap fine and does not disable the links of the other element -- everything works as planned. Sure wish I could think of a way to make it work in FF..

Pixelcoreinteractive

11:18 pm on Jun 2, 2011 (gmt 0)



This issue can be caused by many things. If it works in some browsers but not all browsers you can point the cause to invalid code.

-if you havent already, USE A DIV to contain your ul.
-give your DIV a css class! "this will protect your html from the browsers default css"
-style your ul under the class you gave your DIV

HTML
<div class="menu">
<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li>|</li>
<li><a href="account.php" title="Account">My Account</a></li>
<li>|</li>
<li><a href="#" title="Contact">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="Why Us?">Why Us?</a></li>
<li>|</li>
<li><a href="#" title="News">Watch News</a></li>
<li>|</li>
<li><a href="#" title="Reviews">Watch Reviews</a></li>
<li>|</li>
<li><a href="#" title="Checkout">Checkout</a></li>
</ul></div>

CSS "define all ul elements used"

.menu ul {
(style the "UNORDERED LIST" containing your menu}
examples: Padding, Margin, border, backgrounds effecting the whole menu.

}


.menu ul li {

(Here you style your "LIST ITEMS" within your "UNORDERED LIST")
example: display:block; <--(used with background img to create buttons), padding or margin effecting each separate list item...

}
.menu ul li a {
(style the "anchor" containing your text)

}

.menu ul li a:hover {
(style the "anchor" for when it is hovered by a mouse)
example: color:#fff; <--(changes anchor text color to white when hovered)
}

Its also good practice when styling to give as descriptive styles as possible. even when not necessary... it can serve as something to fall back on.

I hope this helps.

- @webprutser -

second level menu's would validate using
<ul>
<li> first level item
<ul>second level item</ul>
</li>
<li> first level item 2</li>
</ul>

virtualemployeeonlin

10:23 am on Jun 15, 2011 (gmt 0)



Add following between head tag:-

<style type="text/css">
ul {list-style:none;}

ul li {float:left;}

ul li a { text-decoration:none; color:#000000; cursor:auto;}

</style>

Add following between Body tag:-

<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li>|</li>
<li><a href="account.php" title="Account">My Account</a></li>
<li>|</li>
<li><a href="#" title="Contact">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="Why Us?">Why Us?</a></li>
<li>|</li>
<li><a href="#" title="News">Watch News</a></li>
<li>|</li>
<li><a href="#" title="Reviews">Watch Reviews</a></li>
<li>|</li>
<li><a href="#" title="Checkout">Checkout</a></li>
</ul>


This working fine in both chrome and FF. Please let us know if you are still having any problem.

pokra

9:27 am on Jun 21, 2011 (gmt 0)



I agree with what @londrum said - "you've got a div, or some kind of block level element overlapping the link. it's acting like a 'mask' over the top of the link, so you cant click it."

I have encountered this problem before and found out divs really caused the error. It might also be caused by scripts.