Same CSS give different output although it is not overrided

HTML & CSS
1

I am using the the same css for a button output. But it is giving different output for color (font color) in different pages. I checked with the developer toll, the code is not overriden (not line throughed in developmer tool chrome.
the css code i used

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #5566ca;
    border-radius: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#109bcd), to(#458c93));
    background: -moz-linear-gradient(top, #109bcd, #458c93);
    background: linear-gradient(to bottom, #109bcd, #458c93);
    -webkit-box-shadow: #7f9aff 0px 0px 40px 0px;
    -moz-box-shadow: #7f9aff 0px 0px 40px 0px;
    box-shadow: #7f9aff 0px 0px 40px 0px;
    text-shadow: #35407f 1px 1px 1px;
    font: normal normal bold 20px comic sans ms;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #6a80fd;
    background: #fff;
    color: #109bcd;
    text-decoration: none;
		text-shadow:none;
}
.button:active {
    background: #5566ca;
    background: -webkit-gradient(linear, left top, left bottom, from(#5566ca), to(#5566ca));
    background: -moz-linear-gradient(top, #5566ca, #5566ca);
    background: linear-gradient(to bottom, #5566ca, #5566ca);
}
.button:before{
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: 0px;
    background: no-repeat left center transparent;
    background-size: 100% 100%;
}

The pages are
Correct display
Incorrect Display

2

Hi there sayakxda,

and a warm welcome to these forums. :winky:

Your “Incorrect Display” link, unfortunately show this…

Parse error: 
syntax error, 
unexpected 'endif' (T_ENDIF) in 
/home/mt7x3y1l27lf/public_html/wp-content/themes/rowling-child/single.php on line 66

coothead

4

But you are not applying it to the same elements.

In one page you have the button class on the ‘a’ element but on the other page you have the button class on a parent div which leaves the anchor styles still in place.

If you want the same result then do the same things:)

6 Likes
5

Yep that was it. thanks a lot.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.