Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

Problem

I'm currently working on creating a subnavigation that calls for 7 individual icons to display in a column on the left hand side of the page. When you mouseover any one of these items the jQuery function slideToggle() is triggered and a div slides down underneath the icon. This div has a border with a small arrow pointing up at the icon that you are currently moused-over.

Here is the working version of this: http://vetriscience.com/development/newlook/index2.html

If you look at this in Firefox on both Windows and Mac, there is no issue. The arrow pointing up displays properly. If you look at this in any other browser the arrow does NOT show. This arrow is created with the CSS border :before and :after trick. Here's the code I'm working with:

HTML:

Condition Specific

In addition to Glyco-Flex products, VetriScience offers formulations with single and multi-source glucosamine, hyaluronic acid and MSM.
This is In addition to Glyco-Flex products, VetriScience offers formulations with single and multi-source glucosamine, hyaluronic acid and MSM.

This is the text for Everyday Health. w0ot!
This is the text for Digestive health. Yum Yum!

This is the text for System Health. Sorry I'm not actually sure what this covers.
This is the text for Immune Health. Hooray for no cough cough or sneeze sneeze!

This is the text for System Health. Sorry I'm not actually sure what this covers.

And the CSS:

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
#conditions {
    position: relative;
    display: block;
    width: 250px;
    min-height: 400px;
    float: left;
    overflow: hidden;
    z-index: 4;
}
#conditions .box {
    position: relative;
    display: block;
    width: 100px;
    margin: 10px;
    text-align: center;
}
#conditions .left {
    float: left;
}
#conditions .right {
    float: right;
}
#conditions .box a {
    margin: 0px auto;
    text-align: center;
}
#conditions .expand {
    position: relative;
    display: block;
    float: left;
    font-family: AvenirLight, sans-serif;
    font-size: 10px;
    padding: 5px;
    z-index: 999;
}
#conditions .expand.EXleft {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
#conditions .expand.EXleft:before {
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top: -28px;
    left: 40px;
    border-width: 1px;
    border-style: solid;
    content: '';
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXleft:after {
    content: '';
    position: absolute;
    top: -27px;
    left: 40px;
    border-color: transparent transparent white transparent;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXright {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
#conditions .expand.EXright:before {
    content: '';
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top: -28px;
    left: 175px;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXright:after {
    content: '';
    border-color: transparent transparent white transparent;
    position: absolute;
    top: -27px;
    left: 175px;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
/* Condition Specific Icons */
#conditions .expand.EXleft.joint {  /*Left*/ 
    border-color: #FF6B0B;
    z-index: 999;
}
#conditions .expand.EXleft.joint:before {
    border-color: transparent transparent #FF6B0B transparent;
}
#conditions .expand.EXleft.joint:after {
    position: absolute;
    top: -27px;
    left: 40px;
}
#conditions .expand.EXright.behavioral {  
    border-color: #FCB424;
}
#conditions .expand.EXright.behavioral:before {
    border-color: transparent transparent #FCB424 transparent;
    position: absolute;
    top: -28px;
    left: 175px;
}
#conditions .expand.EXright.behavioral:after {
    position: absolute;
    top: -27px;
    left: 175px;
}

I've been playing around with the z-index values of the parent and target elements trying to see if that would change anything, but alas all are essentially getting ignored. Any ideas or help will be greatly appreciated!

JSFiddle Demo

Problem courtesy of: Jon Gallup

Solution

Annnnd I managed to see what my issue was, so I'm posting as a future reference to all as to the issue. If you go back through the code you'll notice this piece at the top of the CSS:

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

As you may know, this is a CSS trick to make dealing with box widths easier to understand while developing a site. It renders a block level element's Width such that if you set width: someNumber; it will then render the box width to always be that regardless of padding and border width. If you go without the reset rule above you have to set widths factoring in the width of the pad and border. (e.g. with reset: width = width + pad + borderWidth, without reset: width = width - (pad - borderWidth) Read More: http://css-tricks.com/box-sizing/

Evidently, this does not work in any browser but Firefox when a blanket rule of box-sizing: border-box is set - hence it will make this fail to work as the width of the box is bound by this box-sizing rule. To counter act this it either must be overridden in all applicable styles, or the blanket style must be taken down in favor of only applying it to the elements that you want to apply it to.

So in this instance, I removed the blanket style in favor of putting it only on the elements that I wanted rather than having it on everything. Problem fixed! And it even works in IE8!

Solution courtesy of: Jon Gallup

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×