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

Posted on 2008-10-21
Medium Priority
Last Modified: 2012-05-05
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?


Question by:djfenom
  • 4
  • 2
LVL 16

Expert Comment

ID: 22765565
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.

Author Comment

ID: 22765587
It seems ok at this end in IE7? Any idea of how to fix it?
LVL 16

Expert Comment

ID: 22765617
var image1 = new RoundedCorners('.prod_img', {overlay: true, radius: 20, cls: 'image'});
change overlay: true to overlay: false
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 16

Expert Comment

ID: 22765670
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>

Open in new window


Author Comment

ID: 22766261
Is that good practice though, putting a <div> in an <a>?
LVL 16

Accepted Solution

sh0e earned 2000 total points
ID: 22770063
No, it won't validate, which from your well-formed source seems important to you.

I was able to quickly reproduce rounded corners that won't overlay the entire box, so it's possible, but the rounded corners script you are using would need to be rewritten (most of it at least).

z-index: 3 needs to be removed from the main rounded corner div.
The corner divs would each need to be given absolute positioning in the right positions, instead of stacking them, and z-index: 3 to each.
.imageBottomRight {
position: absolute; top: 82px; left: 182px; width: 20; height: 20; z-index: 3

This seems to be a common problem in all of the implementations of rounded corners.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question