CSS arrow not repeating on all elements ... HELP!

I’ve tried everything I can think of and nothing is working. So something somewhere in my css I think is preventing my arrow from repeating on every element.

Here’s the link to the page I’m having trouble with: http://www.ministrybooks.org/new-design/alternate/categories-test.html

Here are links to all the css pages I’ve got linked to my page in this order:


This is what I’m using to create the arrow, but not sure if something else is affecting it somewhere because it’s just not working and I cannot figure out why on earth it isn’t. So I provided links to all my css, but here is what I know directly relates to what I’m trying to do.


<div class="section-container accordion" data-section="accordion" data-options="one_up: false;">
          <h5 class="title" data-section-title><a href="#">Item One</a></h5>
          <div class="content" data-section-content>
               <p>Content for Item One here.</p>
          <h5 class="title" data-section-title><a href="#">Item Two</a></h5>
          <div class="content" data-section-content>
               <p>Content for Item Two here.</p>
          <h5 class="title" data-section-title><a href="#">Item Three</a></h5>
          <div class="content" data-section-content>
                <p>Content for Item Three here.</p>


section > h5 > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 6px;
      border-color: rgba(127,106,89,0.5) transparent transparent transparent;
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 26px;
      right: 0; }

Just try adding this to your styles:

section > h5 > a {position: relative;}

That gives a reliable positioning context to the absolutely placed arrows.

Thank you so much ralph.m that worked. I kinda get about the relative positioning giving it context for the absolute positioned arrows. But how come it worked for the first one then? I don’t quite understand that.

Yes, when you are positioning something absolutely, it looks for the nearest positioned parent element for its positioning context. So, for example, if you tell it to sit left: 20px, the element asks “20px left of what?” It will sit 20px left of the nearest positioned parent—that is, the nearest element around it with position: relative, position:absolute etc.

There was so much CSS code in there that I couldn’t quite work out what was going wrong, although it might have been the negative left martin on the H5 text. Anyhow, position: relative on the <a> was useful for all of them, and shouldn’t have affected the one where it was (by chance) already working.

Yes, I’m working with the Foundation framework. That’s the only thing I don’t like about working with a framework is all the unnecessary css that comes with it. Hopefully I can downsize it a bit after my project is done.

Thanks so much for the explanation and your help on this it makes more sense now.

You’re welcome. Glad I could help. :slight_smile:

Yes, that’s one of the reasons I won’t touch frameworks. More trouble than they are worth to me.

ralph.m do you know how I could make those arrows look half-way decent in IE8? Right now they look like blocks in IE8. I’m not trying to make it look identical just somewhat decent in IE8.


I’m afraid you’ll have to use background images instead of CSS3 styles that IE8 does not understand.

Ok thanks.