CODEWITHSUNDEEP
csstwitter-bootstrap
JakeP
JakeP

Reputation: 757

Odd behavior with multiple class names on an element?

I have the following CSS: 

   .side-study-box {
    background-color: white;
    color: black;
    border: 3px solid #0072A6;
    text-align: center;
    height: 220px;
    margin-bottom: 15px;
    margin-top: 15px;
    display: table;

    -webkit-box-shadow: 3px 3px 3px #888888;
    -moz-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
    .side-study-box p {
        position: relative;
        width: 100%;
        margin: auto;
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
    }

And the following HTML: 

<div class="side-study-box span6 ">
     <p>SIDE 1</p>
</div>

However the text isn't being centered vertically or horizontally. If I either remove the span6 class from the div or target the span6 as opposed to side-study-box in my css, it works. I do need both classes though... what am I doing wrong?

Upvotes: 0

Views: 74

Answers (1)

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

Sounds to me like another rule which is targeting the span6 class name is affecting things. Try increasing the specificity. Add an #id selector, or prefix them with body. Something like:

body .side-study-box { /*...*/ }
body .side-study-box p {/*...*/ }

Upvotes: 2

Related Questions