MyBB Community Forums

Full Version: Same on all browsers
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
How can I make the code below appear the same on all browsers? Right now the gradient only works in Firefox but in IE and Chrome it only shows the border outline.


#homepageButtonsCont {
    background: -moz-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;
    border: 1px solid #555555;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    height: 117px;
    clear: both;
    padding: 6px 6px 6px 6px;
    width:572px
}
Copy paste the moz linear gradient and add the same thing but change moz to webkit and on another remove moz and just have -linear-gradient
Use this tool for cross browser support of css3 gradients:
http://www.colorzilla.com/gradient-editor/
(2011-08-21, 08:14 AM)Jordan L. Wrote: [ -> ]Copy paste the moz linear gradient and add the same thing but change moz to webkit and on another remove moz and just have -linear-gradient

Hmm, did exactly that and came up with the code below but it didn't work.


#homepageButtonsCont {
    background: -moz-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent; 
    background: -webkit-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;
    background: -linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;
    background: -o-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;
    background: -ms-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#030202 ', endColorstr='#4c4a4b',GradientType=0 ); 
    background: linear-gradient(top, #030202 8%, #4c4a4b 70%); 
    border: 1px solid #555555;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    height: 117px;
    clear: both;
    padding: 6px 6px 6px 6px;
    width:572px
}
Browsers use different code I think.

Use what I mentioned in my last post.
(2011-08-21, 09:51 AM)Sama34 Wrote: [ -> ]Browsers use different code I think.

Use what I mentioned in my last post.

Yeah the snippet I replied to Jordan's post with I got from the site you shared. I even copied and pasted the code exactly as that site gave it - But something strange happens when I save it. The CSS and everything below it disappears. I'm guessing MyBB doesn't like some parts of the code.
Sometimes that happens to me when using firefox, try using opera or any other.

And hard refresh (ctrl +f5), wait 5 minutes, restart your browser to see the new code in play.
(2011-08-21, 10:36 AM)Sama34 Wrote: [ -> ]Sometimes that happens to me when using firefox, try using opera or any other.

And hard refresh (ctrl +f5), wait 5 minutes, restart your browser to see the new code in play.

I'm going to give it a rest for now, I've been working on it all night and it's almost 7am here.