Hi,
I'm trying to get a situation where I have one general rule for all bottom corners, and then a different more specific rule for some of these bottom corners. I'm currently using the code 

$("#main").corner("round bottom 15px");
$(".node-cart #main").corner("notch bottom 10px");

but this is just creating notched bottom corners on ALL of my main sections (not just the ones covered by .node-cart), and I can't figure out why.

Can you help?

Thanks,
Laurence.

Comments

JStarcher’s picture

JStarcher commented

Just a shot in the dark, are you trying to theme a Ubercart site?

laurencemercer’s picture

laurencemercer
Primary language English
commented

Yes, part of the site is ubercart - does this make a difference?

JStarcher’s picture

JStarcher commented
Assigned: Unassigned » JStarcher
Status: Active » Closed (fixed)

I believe the problem lies in your second selector.

$(".node-cart #main").corner("notch bottom 10px");

".node-cart #main" is invalid. You must do it like this:

$("#main").corner("round bottom 15px");
$(".node-cart").corner("notch bottom 10px");

I am not sure why you would want to use ".node-cart #main" anyways, it's overriding the first #main selector and throwing things off.

Remember, for more flexibility you can use the html tag. It goes something like this:

$("div.node-cart").corner("notch bottom 10px");

Review the jQuery Selectors Documentation for more information.