0

It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2

Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)

.ballacolla
{
      float:left;
      position:relative;
      width:200px;
      height:200px;
      margin-right:40px;
      margin-bottom:46px;
}

.ballacolla a
{
     position:absolute;
     width:100%;
     height:100%; 
     top:0; 
     left:0; 
     text-decoration:none; /* Makes sure the link   doesn't get underlined */ 
     z-index:10; /* raises anchor tag above everything else in div */ 
     background-color:white; /*workaround to make clickable in IE */ 
     opacity: 0; /*workaround to make clickable in IE */ <br>
     filter: alpha(opacity=1); /*workaround to make clickable in IE */
}

.innerbox
{
      position: absolute; 
      bottom: 0;
      width:180px;
      height:30px;
      background-color:#000;
      opacity:0.75;
      filter: alpha(opacity=40);
      padding-left:20px;
      padding-top:10px;
      z-index: +1;
}

p.boxtag
{
color:#fff;
}

HTML:

<div class="ballacolla"><a href="www.google.com" target="blank"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></a></div>

.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox

My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?

user2144813
  • 1
  • using jquery you can stop propagation [event.stopPropagation()](http://api.jquery.com/event.stoppropagation/) – Shah Rukh Jul 23 '14 at 11:29
  • possible duplicate of [Is putting a div inside an anchor ever correct?](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct) – Phlume Jul 23 '14 at 11:39
  • `.innerbox` doesn't disappear. The parent anchor actually disappears because you've set `opacity: 0;` on it, taking the child elements with it. I'm not sure what you're trying to achieve with `opacity: 0`? – JoeJ Jul 23 '14 at 11:42
  • My opacity is set to 0.75 on the innerbox, to make it slightly see through, it's not set to 0... it's set to 0 in the .class a fields... to make the link clickable – user2144813 Jul 24 '14 at 13:09

3 Answers3

0

Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.

I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor

you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.

Community
  • 1
  • 1
Phlume
  • 3,075
  • 2
  • 19
  • 38
0

In your styles, it says opacity:0 for a tags. Add a class a below.

.field-items a{
    background:none;
    opacity:1;
}
Jithin
  • 2,594
  • 1
  • 22
  • 42
0

Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><a href ="www.google.com"></a><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>

the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help

user2144813
  • 1