homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
a href not working inside li tag
a href not working inside li tag
abidshahzad4u




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

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




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

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




msg:4281605
 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




msg:4281607
 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




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

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




msg:4281687
 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




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

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




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

Have you checked the html and css with a validator?

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

Fotiman




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

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

htmlbasictutor




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

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




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

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




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

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




msg:4319197
 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




msg:4321350
 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




msg:4326338
 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




msg:4328660
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved