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

HTML & CSS
1

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:

http://www.ministrybooks.org/new-design/alternate/css/normalize.css
http://www.ministrybooks.org/new-design/alternate/css/foundation.css
http://www.ministrybooks.org/new-design/alternate/css/app.css

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.

HTML:


<div class="section-container accordion" data-section="accordion" data-options="one_up: false;">
     <section>
          <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>
          </div>
     </section>
     <section>
          <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>
          </div>
     </section>
     <section>
          <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>
          </div>
     </section>
</div>

CSS:


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; }
2

Just try adding this to your styles:

section > h5 > a {position: relative;}

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

3

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.

4

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.

5

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.

6

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.

7

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.

8

capescafe,

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

9

Ok thanks.