Archived

This topic is now archived and is closed to further replies.

  • 0

Cross Browser Customizations - How Is It Done?


Question

Posted · Report post

Hi guys, how do I get these customizations to show up in Chrome and IE9?

.section-carousel .thecarousel {

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background-color: #5E8DC8;

background-image: -moz-linear-gradient(center top , #6E9ED2, #4574BB);

background-repeat: repeat-x;

border-bottom-color: #6E9ED2;

border-bottom-style: solid;

border-bottom-width: 1px;

border-image-outset: 0 0 0 0;

border-image-repeat: stretch stretch;

border-image-slice: 100% 100% 100% 100%;

border-image-source: none;

border-image-width: 1 1 1 1;

border-left-color-ltr-source: physical;

border-left-color-rtl-source: physical;

border-left-color-value: #6E9ED2;

border-left-style-ltr-source: physical;

border-left-style-rtl-source: physical;

border-left-style-value: solid;

border-left-width-ltr-source: physical;

border-left-width-rtl-source: physical;

border-left-width-value: 1px;

border-right-color-ltr-source: physical;

border-right-color-rtl-source: physical;

border-right-color-value: #6E9ED2;

border-right-style-ltr-source: physical;

border-right-style-rtl-source: physical;

border-right-style-value: solid;

border-right-width-ltr-source: physical;

border-right-width-rtl-source: physical;

border-right-width-value: 1px;

border-top-color: #4574BB;

border-top-style: solid;

border-top-width: 1px;

box-shadow: 1px 1px 0 #5E8DC8 inset;

display: none;

overflow-x: hidden;

overflow-y: hidden;

padding-bottom: 15px;

padding-left: 67px;

padding-right: 67px;

padding-top: 15px;

position: relative;

}

They show in Firefox perfectly!

Thanks in advance.

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Hi there

You can find an example of how this is added for different browsers here http://css-tricks.com/css3-gradients/ this gives you a good idea of how the different browser commands go together inside one block of css.

Share this post


Link to post
Share on other sites

Posted · Report post

Nice! Thank you James!! Got it working in Chrome and Opera, but not IE - does anything ever work in IE??

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately, not a lot of things work in IE (especially gradients and transparency). Have you already tried IE-specific CSS solutions? Also, are you using the latest version of IE?

Share this post


Link to post
Share on other sites

Posted · Report post

The declarations below are specifically for Firefox (so you'll need to find CSS that are compatible for the other browsers - for example, for the gradient CSS, you'll need to find a gradient solution for Chrome and another for IE):


  -moz-border-bottom-colors: none;

	-moz-border-left-colors: none;

	-moz-border-right-colors: none;

	-moz-border-top-colors: none;

   background-image: -moz-linear-gradient(center top , #6E9ED2, #4574BB);

Extra advice: This block is pretty long and some declarations can be put in shorthand. For example, padding can be written like this:
padding: 15px 67px 15px 67px;
The order of pixel values for each side of the padding is as follows:
padding: TOP RIGHT BOTTOM LEFT;

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for your help Catrina - I guess the question I should have asked is where do I find those gradient solutions for Chrome and IE?

Can I replace the -moz with -webkit and add it to my customize plugin?

BTW - those long declarations are taken directly from the pagelines code.

Share this post


Link to post
Share on other sites

Posted · Report post

Where and how would I add this? Do I create another block for each browser? Do I add this in the existing block. Please post an example so I can see how it's done.

background-image: -ms-linear-gradient(center top , #6E9ED2, #4574BB);

background-image: -webkit-linear-gradient(center top , #6E9ED2, #4574BB);

Thank you.

PS I replaced the padding with shorthand - ty

Share this post


Link to post
Share on other sites