Welcome to WebmasterWorld Guest from 54.224.158.39

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS

Forum Moderators: not2easy

Message Too Old, No Replies

links in inline list. hotspots only registering on outer-most links

set of 5 links... 3 in the middle are not registering as links

     

Don_Hoagie

8:53 pm on Dec 29, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2005
posts:386
votes: 0


Seems like the more i learn, the stupider i get...

I've got an inline ul with 5 links in it... the li's are margined out at 3% for the right side, and otherwise, everything is zeroed out. What i can't figure out is why this code renders the inside 3 links unclickable. I set background colors to check out the scene and everything seems fine... i removed the margin and still, only the outer areas of the list are hot-spotted. Seems to be that the hot spots for links here have unravelled from the text they're supposed to match up with. Doesn't seem to jive with this super-simple code... any help would be great.

#nav {z-index: 89; position: absolute; top: 144px; left: 0; height: 26px; width: 97%; padding: 17px 0 0 3%; text-align: center;}
#nav ul{padding: 0; margin: 0; display: inline;}
#nav li{list-style: none; display: inline; padding: 0; margin: 0 3% 0 0}
#nav li a{color: #c00;}

<div id="nav">
<ul>
<li><a href="12">Test Link</a></li>
<li><a href="34">Test Link</a></li>
<li><a href="56">Test Link</a></li>
<li><a href="78">Test Link</a></li>
<li><a href="90">Test Link</a></li>
</ul>
</div>

cmarshall

5:53 pm on Dec 30, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


These all work fine for me when I slap them into a test file (below).

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* <![CDATA[ */
#nav {z-index: 89; position: absolute; top: 144px; left: 0; height: 26px; width: 97%; padding: 17px 0 0 3%; text-align: center;}
#nav ul{padding: 0; margin: 0; display: inline;}
#nav li{list-style: none; display: inline; padding: 0; margin: 0 3% 0 0}
#nav li a{color: #c00;}
/* ]]> */
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="12">Test Link</a></li>
<li><a href="34">Test Link</a></li>
<li><a href="56">Test Link</a></li>
<li><a href="78">Test Link</a></li>
<li><a href="90">Test Link</a></li>
</ul>
</div>
</body>
</html>

londrum

9:07 pm on Dec 30, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
posts:2623
votes: 78


...maybe you've just got another block overlapping it.
try changing the z:index to bring it right to the front and see if that works. or colour all of the other blocks around it to see which one is overlapping.

Don_Hoagie

2:32 pm on Jan 2, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 11, 2005
posts:386
votes: 0


>> ...maybe you've just got another block overlapping it.
try changing the z:index to bring it right to the front and see if that works. or colour all of the other blocks around it to see which one is overlapping.


Ugh.

Thanks. That did it. I don't usually use abs-pos, so it's also rare that I use z-index... but, more accurately, I'm just an idiot. At any rate, thanks both for your help!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS