|
CSS - Links Not Clickable But Link Exists
hi, whenever i hover over the images on my navigation bar, the links do appear to be there but when i click on them..it wont click :S
URL this is the navigation, when you click on an item and i presume its that blue line with jquery that is causing it, maybe in the css... Html: Code: <ul class="lavaLampBottomStyle" id="3">
<li class="navibg" style="width:80px;">
<a href="#">Home
<br style="padding-bottom:5px;">
<span class="navidescription">
welcome to cw
</span>
</a>
</li>
<li class="navibg" style="width:110px;">
<a href="http://citywater.uk.com/contact-us/">Contact Us
<br style="padding-bottom:5px;">
<span class="navidescription">
how to reach us
</span>
</a>
</li>
<li class="navibg" style="width:95px;">
<a href="http://citywater.uk.com/about-us/">About us
<br style="padding-bottom:5px;">
<span class="navidescription">
read about us
</span>
</a>
</li>
<li class="navibg">
<a href="http://citywater.uk.com/latest-news/">Latest News
<br style="padding-bottom:5px;">
<span class="navidescription">
water treatment news
</span>
</a>
</li>
</ul>
CSS: Code: .lavaLampBottomStyle {
float :right;
list-style :none;
margin-top :20px;
padding :0;
margin-bottom:24px;
}
.lavaLampBottomStyle li {
border-bottom : 5px solid white;
float : left;
list-style : none;
padding-bottom :30px;
padding-left :25px;
padding-top :10px;
position :relative;
vertical-align :top;
}
.lavaLampBottomStyle li.back {
border-bottom : 5px solid #88B8E8;
height : 1px;
position : absolute;
margin-top:39px;
width : 9px;
z-index : 8;
}
.lavaLampBottomStyle li a {
color : white;
float : left;
font : bold 15px arial;
height : 40px;
letter-spacing : 0;
outline : none;
padding-right :5px;
position : relative;
text-align : center;
text-decoration : none;
text-transform : uppercase;
top : 7px;
z-index :10;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border : none;
}
Similar TutorialsI have a page that displays a bunch of products for my site and when viewed in FireFox and Chrome everything is great. When viewed in IE or Opera however, the products are displayed correctly but are not clickable. I can't seem to figure out why IE and Opera don't see the anchor tag. I had set it to display as block and set height and width to 100% so that the entire square that the products are displayed is clickable (the product images are all different sizes). Since IE didn't see it I set some conditional stuff to simply add the link to the product images themselves and that does seem to work (although not how I'd like it to) but this solution doesn't really work since Opera doesn't work and doesn't recognize the IE conditional statements. Here's the code for the individual products, obviously it's being repeated a bunch of times when the page is actually viewed. Also, yes I used a table in there but I was having a bitch of a time getting the image to center both horzontally and vertically so I broke down and just used the table cell for it. If somebody feels up to helping me re-write it to center using just divs, I'm all for it. Code: <div class="product_cell"> <table width="187px" height="190px" style="position:absolute; top:0; left:0;"><tr> <td height="100%" width="100%" align="center" valign="middle"> <!-- FOR NON-IE BROWSERS--> <![if !IE]> <div class="product_link"> <a href="proddisp.php?id=<?=$row['id']; ?>" style="display:block;width:100%;height:100%;"></a> </div> <![endif]> <!-- END FOR NON-IE BROWSERS--> <!-- FOR IE Part1--><!--[if IE]><a href="proddisp.php?id=<?=$row['id']; ?>"><![endif]--> <img src="http://www.skullcrow.com/images/products/<?=$row['id'].'_m.gif'; ?>" alt="<?=$row['name']; ?> - <?=$row['subname']; ?> - t-shirt" border="0" /> <!-- FOR IE Part2--><!--[if IE]></a><![endif]--> </td></tr></table> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_left_<?=$row['bgcolor']; ?>.jpg" width="11px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_center_<?=$row['bgcolor']; ?>.jpg" width="162px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_right_<?=$row['bgcolor']; ?>.jpg" width="14px" height="190px" style="float:left; border:0;" /> </div> <!-- END PRODUCT_CELL --> And from the stylesheet... Code: .product_cell {height:190px;width:187px;padding:0;margin:0;border:0;position:relative;overflow:hidden;}
.product_link {position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
The page I'm working on is located he http://www.skullcrow.com/index_imp.php Thanks for any help. Hello all. I have the following code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #c0c0c0; } /* end #base */
#main_block {
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content, #main_content_2c, #main_content_3c {
background: #ffffff;
border-left: 1px solid #575757;
border-right: 1px solid #575757; }
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
padding: 0;
margin: 0;
list-style-type: none;
border-top: 1px solid #f1f1f1; } /* end #top_main_content ul */
#top_main_content ul li {
text-align: right;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { margin-right: 1.5em; }
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1; } /* end #top_main_content img */
#top_main_content #rotating p, #top_main_content #rotating h1 { margin: 2em 0 0 2em; }
#sidemenu12,
#sidemenu11,
#sidemenu13,
#sidemenu14,
#sidemenu15,
#sidemenu16,
#sidemenu17,
#sidemenu18,
#sidemenu22 {
width: 687px;
height: 242px;
font-weight: bold;
overflow: hidden;
position: absolute;
visibility: visible; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a id="sidemenu11_link" href="#"><span class="indent">Link 1</span></a></li>
<li><a id="sidemenu22_link" href="#"><span class="indent">Link 2</span></a></li>
<li><a id="sidemenu12_link" href="#"><span class="indent">Link 3</span></a></li>
<li><a id="sidemenu13_link" href="#"><span class="indent">Link 4</span></a></li>
<li><a id="sidemenu14_link" href="#"><span class="indent">Link 5</span></a></li>
<li><a id="sidemenu15_link" href="#"><span class="indent">Link 6</span></a></li>
<li><a id="sidemenu16_link" href="#"><span class="indent">Link 7</span></a></li>
<li><a id="sidemenu18_link" href="#"><span class="indent">Link 8</span></a></li>
<li><a id="sidemenu17_link" href="#"><span class="indent">Link 9</span></a></li>
</ul>
<div id="rotating">
<div id="default_div"><p>Default</p></div>
<div id="sidemenu11"><p>Section 1</p></div>
<div id="sidemenu12"><p>Section 2</p></div>
<div id="sidemenu13"><p>Section 3</p></div>
<div id="sidemenu14"><p>Section 4</p></div>
<div id="sidemenu15"><p>Section 5</p></div>
<div id="sidemenu16"><p>Section 6</p></div>
<div id="sidemenu17">
<p>Section 7 - A<br />
<a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p>Section 7 - B<br />
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a></p>
</div>
<div id="sidemenu18"><p>Section 8</p></div>
<div id="sidemenu22"><p>Section 9</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Which if you look at it in a browser looks rather messy but I have javascript that hides and shows things. But my question is why aren't the links clickable in Firefox. They are in IE7, IE6, and Opera but not Firefox or Safari. I know that if I remove position: absolute from the last set of styles that it will work but then everything isn't stacked on top of each other. I've spent a few hours researching this and I sure hope I'm not out of luck, because I'm not finding a solution. Here's my site (just a template): http://kris.dreamhosters.com/mhw/ As the subject line says, the links at the bottom are not clickable in IE6 or IE7 and I know exactly what is causing it. In order to have those curved graphics on the bottom, I have them attached to separate divs and I need to use a negative margin on one to pull it up so they align. That div covers the div that the links are in making them unclickable in IE. I've tried to move the links to the the other div, but that caused other problems in my template. I read through this article: http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php Tried positioning, Z-index, nothing. Does anyone have any suggestions for me? So I have a picture gallery/menu thing and I'm TRYING to make the list item actually clickable but I don't know how. It's probably easier to show you so on this page, I want the graphic that says 'click me!' to actually be a working link like you would expect from a menu item. http://www.thespinzone.com/temp/devcss.php Of course you can view the source to see the code but... The relevant css is: Code:
#container {position:relative; width:204px; height:530px; margin:0px auto 0 auto; border:0px solid #aaa;
background-image:url(portmenubg1.jpg) left no-repeat;}
#container ul {width:204px; height:530px; padding:0; margin:0px; list-style-type:none; float:right;}
#container li {float:left;}
#container a.gallery span {position:absolute; width:1px; height:1px; top:1px; left:5px; overflow:hidden;
background:#4C697B;}
container a.slideb, #container a.slideb:visited {background:url(pb.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:34px 0px 24px 42px; text-align:left; cursor:default;}
#container a.slidec, #container a.slidec:visited {background:url(pc.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:20px 2px 22px 4px; text-align:left; cursor:default;}
#container a.slided, #container a.slided:visited {background:url(pd.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 80px; text-align:left; cursor:default;}
#container a.slidee, #container a.slidee:visited {background:url(pe.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 8px; text-align:left; cursor:default;}
#container a.slidef, #container a.slidef:visited {background:url(pf.jpg); display:block; color:#000; text-decoration:none; border:0px solid #000; margin:22px 0px 22px 46px; text-align:left; cursor:default;}
#container a.gallery,slideb:hover {height:54px; width:120px;}
#container a.slideb:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidec:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slided:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidee:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.slidef:hover {background:url(pclickme.jpg); border:0px solid #fff;}
#container a.gallery:hover span {position:absolute; width:300px; height:200px; top:10px; left:204px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #000; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
and the html is: Code: <div id="container"> <ul> <li><a class="gallery slideb" href="#nogo"><span><img src="pb1.jpg" alt="clickme" title="B" /></span></a></li> <li><a class="gallery slidec" href="#nogo"><span><img src="pc2.jpg" alt="clickme" title="C" /></span></a></li> <li><a class="gallery slided" href="#nogo"><span><img src="pd1.jpg" alt="clickme" title="D" /></span></a></li> <li><a class="gallery slidee" href="#nogo"><span><img src="pe1.jpg" alt="clickme" title="E" /></span></a></li> <li><a class="gallery slidef" href="#nogo"><span><img src="pf1.jpg" alt="clickme" title="F" /></span></a></li> </ul> </div> Hey guys, I need help. The thing is, I am working with webdesign A and it really is a simple course, but I have a problem in the CSS part. The thing is, we are supposed to create a website, and then divide the site into different columns. I have created 2 columns, the LEFTcolumn and RIGHTcolumn. Basically the LEftcolumn contains a meny with links to other documents(exercises), and WHAT I want is that when I click on the links, that my exercise documents show up in the same website, but in the RIGHTcolumn. I cant get this to work, because when I click on the links, the exercises open up in a new window instead of the rightcolumn where I am sure I have linked them to. We are using boxes and such, colcontainer. HELP please? thx Is it possible to set link styles that are defined inside of a heading tag... for example, h1 a:link{bleh} h1 a:visited{bleh} h1 a:hover{bleh} I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution Alrite, I am trying to use a CSS to change the hover, visited, active, elements on a link. This works, however it does not seem to work when I use "#" links. I am tryin to use a dud link so that JavaScript can open another window. Any ideas??? Thanks Hi - i have forgotten how to assign different link "effects" to different links, so if someone could remind me i would be extreeeeemely greatfull !!! Cheers Jackson Hi I have the following div code for a linked-image <div id="banner"> <a href="/"><img src="/images/header1.jpg"></a> </div> the css for banner is as follow #banner {width : 960px; height : 100px; left : 0; top : 0; position:absolute} but this image is not clickable. I checked the source code for this page and it does show the linked image but the image is not clickable. can anybody shed some light on this? I have coded an image to be clickable, but its not clickable. Code: <div class="quicknav"> <div class="wrapper"> <div class="livesupport"> <a href="http://google.com"><img src="images/phone.png"></a> </div></div></div> CSS code Code:
.livesupport {
position: absolute;
top:15px;
right:-5px;
padding:1px 0 0 0;}
.quicknav {
width: 100%;
height: 0px;
background: #fff;
border-bottom: 1px solid #c8c8c8; }
.quicknav a { color:#9a9a9a; }
.quicknav a:hover { color:#343434; }
.wrapper {
position: relative;
width:977px;
margin: 0 auto; }
Thanks in advance!! Is there a common cause of non-clickable text? I mean that on the suckerfish style menus I can't click on text in the link items. I thought it was a z-indexing issue but apparently not. I have encountered this problem many times now and am not sure how to fix it. This seems so simple, yet my hour of searching has yeilded nothing!! I simply want to make the numbers that appear for each <li> to be clickable. I tried moving the ,a> tags outside the <li>, but that doesn't work. I tried (to no avail) in CSS: li a {list-style-position:inside; } ans: ol li a {list-style-position:inside; } also i added a property that enabled me to click anwhere to the right of the number across the whole page, but I forgot now what that was. In the simplest illustration, I would like to be able to click on the no. 1 from the HTML code below. <ol> <li><a href="#a1" /></li> </ol> Hi, Here is my website: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 I noticed that when I moved my thumbnail box at the bottom up by 40px, I could no longer click on the thumbnails until I clicked on the very bottom. It seems the thumbnails are on a layer below the main image, and when I hover over the website, you can see the box that appears to sit on top of thumbnails that stop them from being clicked. Code: http://i46.tinypic.com/2z7o2hg.jpg Can someone explain to me how I can get my thumbnails to be clickable again? Hi, I have an image slider made by another coder. The arrows on the image slider work fine in every browser except chrome and safari where the button isnt clickable (even though you can see it). Here is a link: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the CSS for the buttons: Code: span#prevBtn{
float:left;
margin-top:-100px;
margin-left:10px;
*margin-left:0px;
background: url(images/previousarrow.gif) no-repeat;
z-index:10000;
}
span#nextBtn{
float:right;
margin-right:-15px;
*margin-right:0px;
margin-top:-100px;
background: url(images/nextarrow.gif) no-repeat;
Could anyone help shed some light on why this may be happening? I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica;
padding: 30px;
}
.box {
width: 250px;
height: 75px;
padding: 40px 10px 10px 25px;
background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
border-radius: 5px;
border: 1px solid #E8A935;
}
.box h3 {
font-size: 19px;
color: #333;
padding-bottom: 5px;
}
.box p {
font-size: 14px;
color: #CC0000;
font-style: italic;
}
a .box {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">
<div class="box">
<h3>Main text goes right here.</h3>
<p>Smaller italicized text goes here.</p>
</div>
</a>
</body>
</html>
I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> On the home page of my site (http://awsmiedev06.awecomm.com), there is a large clickable area for Life Insurance, Health Insurance & Disability Insurance. However, when you get into the internal pages of the site, the clickable area is much smaller, making it harder to click on the 3 Insurance Navigation items. You have to almost click on top of the words to get the arrow to turn into a hand so you can click on it. Why is this? Why is the clickable area large (and perfect) on the home page but not on the internal pages? This is the code for the navigation items: Code: .cl2a /*disability*/
{
background-image:url('images/awh-hover.png');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
margin-left:-24px;
}
.cl2d /*disability*/
{
background-image:url('images/cl_2.jpg');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
margin-left:-4px;
}
a.cl2:hover /*disability*/
{
width:346px;
height:42px;
float:right;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color :#163752;
padding-top:9px;
display:block;
margin-left:-2px;
}
.cl3a /*life*/
{
background-image:url('images/aws-hover.png');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl3d /*life*/
{
background-image:url('images/cl_3.jpg');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl3:hover /*life*/
{
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
.cl4a /*health*/
{
background:url('images/awd-hover.png') no-repeat top left;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl4d /*health*/
{
background-image:url('images/cl_4.jpg');
background-repeat:no-repeat;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl4:hover /*health*/
{
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
Any help will be greatly appreciated!!! Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Here's my situation... I have a div, that's a child to a div. I want the child to be behind the parent, but a part of it sticking out from the side and people can click on the child. Because of the cms\framework I'm working with, the div i want to click needs to stay a child of this particular parent. I can get it working in IE, but that's it. Also, the parent div MUST be set to overflow:visible, for other misc reasons. Take a look at the attached image for a visual of what I mean. I'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? |
|||||||