This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Slider differences – FF, Chrome and IE – with CSS customizations

  • Creator
    Topic
  • #9564
    credos
    Participant

    We have set up a set of slides using standard slider, however Chrome displays correct way and FF/IE incorrectly.

    In Firefox or IE the default style of black panel and white text is showing, rather than the correct style with no black panel/gradient.

    See this URL:

    http://www.aboyandhisdog.com.au/slidertest/

    We want this to look as it does in Chrome. The custom CSS we are using with the theme is shown below.

    Chrome: http://i39.tinypic.com/2v81uhg.png
    FF/IE: http://i41.tinypic.com/2i6gx08.png

    Any help appreciated.

    .header-text { font-size:1.5em; }
    h2, h3, h4 {font-weight:bold;}
    .iconic {float:right; margin-left:20px;}
    .message {text-transform:uppercase; font-size: 1.2em;}
    #shopp.list ul.products li img { margin-right: 10px; width: 115px;}
    #wrapper .gallery { margin: 0 1.625em 1em 0;}
    #wrapper .gallery a img {border:0; box-shadow: none;}
    #content .inner { background-color: #fff;  border: solid 1px #ccc; border-radius: 6px; padding: 20px; }
    .boxed-layout .element-inner {padding: 10px 20px;}
    #content .inner article {border:none; padding:0; }
    .header-shade {background-image:none !important;}
    .sidebar-layout-top {padding: 0 10px 0 0;}
    .pulltext {font-family: Abel,Arial,sans-serif; font-size:1.3em; color: #666;}
    .divider {clear:both;}
    h2 {letter-spacing: 0; color: #666;}
    .fixed-sidebar .widget-title { font-size: 18px;}
    #shopp dt { clear: left; float: left; text-align: left; width: auto; margin-right: 1em;}
    #shopp dd {padding-left:0;}
    .prompt {color: #999; }
    h4.name {text-transform:uppercase;}
    h1.entry-title {text-transform:uppercase;}
    address {font-family: Abel,Arial,sans-serif; font-size:1.1em; color: #999; margin-top: -1em; text-transform:uppercase; line-height: 14px;'}
    .shippingcosts {border:1px solid #fff; padding: 6px;  margin: 6px 0;}
    #tb-slider-standard-slider .standard-slider .slide .media-inner {border:0;}
    #tb-slider-standard-slider .standard-slider .media-full .content {background:none; color:#039; text-transform:uppercase; font-family:Abel,Arial,sans-serif;}
    #tb-slider-small-standard-slider .standard-slider .media-full .content {background:none; color:#039; text-transform:uppercase; font-family:Abel,Arial,sans-serif;}
    #tb-slider-standard-slider .standard-slider .media-full .content {top:0; left:0; font-size:1.75em; max-width:50%;}
    #tb-slider-small-standard-slider .standard-slider .media-full .content {top:0; left:0; font-size:1.25em; max-width:100%; }
    #tb-slider-standard-slider .standard-slider .media-full .content .content-inner {padding:0.5em 0 0 0.5em; line-height:1em;}
    #tb-slider-small-standard-slider .standard-slider .media-full .content .content-inner {padding:0.5em 0 0 0.5em; line-height:1em;}
    #tb-slider-standard-slider .standard-slider .media-full .slide-title {color:#000; line-height:0.9em; margin:0; font-weight:bold; font-size:2em; line-height:0.9em;}
    #tb-slider-small-standard-slider .standard-slider .media-full .slide-title {font-size:1.75em; line-height:0.9em; color:#000; font-weight:bold;}
    .standard-slider .media-full .tb-button {color:#039; font-size:0.69em; }
    .fixed-sidebar .widget .standard-slider ul {border:none;}
    .fixed-sidebar .widget .standard-slider ul li {border:none;}
    .sideproduct h3 {color: rgb(102, 102, 102);}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #9573
    Jason Bobich
    Keymaster

    Hello,

    It looks like you’ve accidentally placed an apostrophe at the end of this line:

    address {font-family: Abel,Arial,sans-serif; font-size:1.1em; color: #999; margin-top: -1em; text-transform:uppercase; line-height: 14px;'}

    I think Chrome can figure out what you meant to do, but it’s breaking the following CSS in these other browsers.

    #9582
    credos
    Participant

    Thanks Jason, that was it. Appreciate your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.