asked on

Using Mootools rounded corners and slide-in divs - can't click links

I'm using Mootools to create a sliding div effect overlaying an image, this can be viewed here - http://www.ceramic.arrivalpreview.co.uk/test/products.asp.

I'm also using a rounded corners script again using Mootools.

The problem I'm having is I'm using these buttons to link to different pages and in Firefox it's simply not working at all, whereas in IE it's fine?

I've tried making the image the link, but once the div has overlayed it, it doesn't work?

Any ideas?

Thanks

Chris

sh0e

The rounded corners divs are overlaying your content div, covering it.
IE doesn't actually work properly, if you look closely at the rounded corner.

djfenom

ASKER

It seems ok at this end in IE7? Any idea of how to fix it?

sh0e

var image1 = new RoundedCorners('.prod_img', {overlay: true, radius: 20, cls: 'image'});
change overlay: true to overlay: false

sh0e

The above will make the rounded corners stop working.
If you are ok with making the entire thing a link, not just when the text pops up:

Put overlay: true back.
Make the link enclose the entire prod_img

        <div class="prod_item">
		<a href="product-list.asp?id=3">
          <div class="prod_img"> <img src="/images/designer-wall-icon.jpg" alt="" width="202" height="102" />
            <div class="prod_desc">
              <p><a><span>Urban Inspirations</span>Velit esse cillum dolore ut aliquip ex ea commodo consequat.</a></p>
            </div>
          </div>
		</a>

Open in new window

djfenom

ASKER

Is that good practice though, putting a <div> in an <a>?

ASKER CERTIFIED SOLUTION

sh0e

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial