• Hi

    I have searched the forum but cannot find a thread that address my issue. I am not an advanced WP coder hence if I am repeating something which is covered before I do beg your pardon.

    In the twentyeleven theme I can see that the gradient property is not consistently defined for all browsers. Look at the two exaples from the styles.css file.

    .featured-post .feature-text:after,
    .featured-post .feature-image.small:after {
    	content: ' ';
    	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
    	width: 100%;
    	height: 45px;
    	position: absolute;
    	top: 230px;
    }
    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }

    featured-* properties includes the IE specific properties, whereas #access does not. Is there a reason for that, or is that an omission?

    Many thanks

    Riz

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter sarumbear

    (@sarumbear)

    Out of the 2 Million WP blogs no one encountered this issue?

    I also have the same problem I just did this rather –>
    #access {
    background: -moz-linear-gradient(center top , #8D2022, #B13134 1px, #972A2C 25px) repeat scroll 0 0 transparent;
    background-color: #8D2022;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Discrepancy in CSS gradient property in twentyeleven’ is closed to new replies.