Welcome to WebmasterWorld Guest from 54.242.94.72

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)

5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



...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)

5+ Year Member



>> ...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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month