|
CSS - Why Arnt These Thumbnails Clickable?
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? Similar TutorialsI am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3. I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column. Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html... Anyone know how Ican get the thumbnails to level with the top of the main images please? Link below. Ta. bajor.servers.rbl-mer.misp.co.uk/~sunridge/photo2.htm [http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php You see? I want the thumbnails to pile up underneath the full sized image. I'm using: Code: div#iselDiv li {
margin: 5px;
padding: 5px;
display: block;
border: 1px solid #cccccc;
float: left;
}
and: Code: <div id="iselDiv">
<ul>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
. . .
</ul>
</div>
to draw thumbnails of images in block style, the problem is they will not align to the left, there is allways extra space larger then margin, like in this image: (when I set float: right, it floats to the right OK, but float: left; has a problem ). Help? Hi all, I came across a function on a website http://www.cnn.com/2004/WORLD/europe/09/03/russia.school/index.html that I would like to use. I tried looking at the source code this is sucker is spread out all over the place in multiple files. What I want is the Previous / Next image rotator thingy, thats at the top righthand side of the page. I'd also like to do the following: URL If I click on A,B or C the image refreshes in the main picture. ? I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS: Code: #thumbcontainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
padding: 10px 10px 0px 0px;
width: 840px;
background-color: #000000;
}
a img {
border: none;
margin: 4px 4px 10px 4px;
}
a img: link {
border: 1px solid #000000;
}
a img: visited {
border: 1px solid #000000;
}
a img:hover {
border: 1px solid #e5cb43;
}
a img: active {
border: 1px solid #000000;
}
ul.content {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #000000;
width: 850px;
text-align: center;
}
li.content {
margin: 0px;
padding: 0px;
list-style-type:none;
}
What are my options? Thanks in advance! 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. I 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. 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> 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, 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;
}
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>
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? 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 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> 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? 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!!! 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. |
|||||||