CSS - How Can I Make This A Clickable Link?

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.

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?

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.

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?

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

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.

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?

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

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.