Jump to content


Photo
- - - - -

Cross Browser Customizations - How Is It Done?

Cross browser customizations

  • Please log in to reply
6 replies to this topic

#1 reachmore_

reachmore_

    Member

  • Members
  • 20 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 05 November 2012 - 02:08 AM

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.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 November 2012 - 04:25 PM

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):

Please Login or Register to see this Hidden Content


Extra advice: This block is pretty long and some declarations can be put in shorthand. For example, padding can be written like this:

Please Login or Register to see this Hidden Content


The order of pixel values for each side of the padding is as follows:

Please Login or Register to see this Hidden Content



#3 reachmore_

reachmore_

    Member

  • Members
  • 20 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 05 November 2012 - 05:25 PM

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.

#4 reachmore_

reachmore_

    Member

  • Members
  • 20 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 05 November 2012 - 06:43 PM

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

#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 November 2012 - 06:24 AM

Hi there

You can find an example of how this is added for different browsers here

Please Login or Register to see this Hidden Content

this gives you a good idea of how the different browser commands go together inside one block of css.

#6 reachmore_

reachmore_

    Member

  • Members
  • 20 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 06 November 2012 - 04:35 PM

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

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 November 2012 - 04:50 PM

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?