Jump to content
Sign in to follow this  
reachmore_

Cross Browser Customizations - How Is It Done?

Recommended Posts

reachmore_    0
reachmore_

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
catrina    103
catrina

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;


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
reachmore_    0
reachmore_

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
reachmore_    0
reachmore_

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
reachmore_    0
reachmore_

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×