css triangle not working

Question

Visit http://onecraftyshop.com

You will see the grey box on the first section with a star. If you look at the html it will be under #av_section_2 as .arrow-down.

I'm inserting the .arrow-down class using jQuery.

jQuery('#av_section_2').prepend(jQuery('<div class="arrow-down"></div>'));

And here is my css for the styling:

.arrow-down {
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}

So i'm sure that the jquery is fine as it is displaying on the page, but for some reason I can't get the css to make a triangle.

How can I fix this? the corrected css would be great!

If you need any other info let me know!

Thanks

Answer 1

You need to be more specific because some other rules in your style sheet are over-riding it.

.avia-section .arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #eeeeee;
  position: absolute;
  top: 0px;
  left: 50%;
}