Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Firefox & IE Problem

    On Firefox and IE, the background image (set in css) does not show up. I am more concerned for Internet Explorer as there are more problems on Firefox than just the background (which Im working on), but the only thing I need to ge IE to display everything properly is the background.

    Link to site: http://wcwild03.com/

    Here is my CSS:
    Code:
    @charset "utf-8";
    /*
    Theme Name: West Coast Wild
    Version: 2.0
    */
    /* CSS Document */
    @import url(http://fonts.googleapis.com/css?family=Bitter);
    @import url(css/reset.css);
    @import url(css/widgets.css);
    @import url(css/anythingslider.css);
    @import url(css/shortcodes.css);
    @import url(css/menu.css);
    @import url(css/nivo-slider.css);
    @import url(css/fonts.css);
    @import url(css/base_template.css);
    @import url(css/bootstrap.css);
    current_boxcss_widget{boxcss_default}
    current_boxcss_post{boxcss_default}
    loader{true}
    body {font-family: 'Bitter', serif;}
    .fullheader_menu_bar{display: none; height: 23px; }
    .header_menu_bar{background-image: url(graphic_elements/optional-menu/opt_menu_003.png); height: 28px; background-position: initial initial; background-repeat: initial initial; }
    .anythingSlider span.arrow a{background-image: url(graphic_elements/slider/sld_040_arr.png); width: 57px; height: 50px;            }
    div.anythingSlider .back{top: 150px; left: -30px;            }
    div.anythingSlider .forward{top: 150px; right: -30px;            }
    .slider_area{background-image: url(graphic_elements/slider/sld_040_frm.png); width: 902px; height: 371px; padding: 20px 20px 0px;             }
    .header_shine{background-image: url(graphic_elements/shines/shine_006.png); }
    .container_menu ul li a{line-height: 94px; color: black; font-size: 12px; font-family: 'Bitter', serif; width:100px;margin-top:10px;text-shadow: 2px 2px 2px #000;margin-left:13px; }
    .container_menu ul li.back .left{background-image: url(graphic_elements/menu/nav_link_ack.png); background-repeat:no-repeat; height: 0px;width:50px;}
    .container_menu ul li{background-image: url(graphic_elements/menu/nav_link_back.png);background-repeat: no-repeat;margin:5px;width:100px;margin-top:-25px;
    }
    .container_menu ul li:hover{background-image: url(graphic_elements/menu/nav_link_back.png);background-repeat: no-repeat;margin:5px;width:100px;margin-top:-35px;}
    .container_menu ul li.back{left: 1px; width: 60px; top: 0px; background-image: url(graphic_elements/menu/nav_link_ack.png); background-repeat: no-repeat; height: 0px; overflow: hidden; }
    .search_area{background-image: url(graphic_elements/search/search_061.png); height: 25px; width: 228px; padding: 7px 0px 10px 5px; margin: 19px 0px 0px; }
    .search_area input[type="text"]{height: 25px; float: left; width: 176px; color: rgb(254, 254, 254); }
    .search_area input[type="submit"]{height: 25px; float: left; width: 30px; }
    .container_menu{background-image: url(graphic_elements/menu/menu_099.png); height: 150px; }
    .post_author{background-image: url(graphic_elements/icon-post/iconpost_002.png); height: 14px; line-height: 14px; background-position: 0px 0px;  }
    .post_date{background-image: url(graphic_elements/icon-post/iconpost_002.png); height: 14px; line-height: 14px; background-position: 0px -14px;  }
    .post_categ{background-image: url(graphic_elements/icon-post/iconpost_002.png); height: 14px; line-height: 14px; background-position: 0px -28px;  }
    .boxes{margin-bottom: 17px;             }
    .container_widgets_pieces{background-image: url(graphic_elements/boxes/box_067_ct.png);             }
    .widget_top_left{background-image: url(graphic_elements/boxes/box_067_cr.png);             }
    .widget_top_center{background-image: url(graphic_elements/boxes/box_067_tb.png);             }
    .widget_top_right{background-image: url(graphic_elements/boxes/box_067_cr.png);             }
    .widget_middle_left{background-image: url(graphic_elements/boxes/box_067_ss.png);             }
    .widget_middle_right{background-image: url(graphic_elements/boxes/box_067_ss.png);             }
    .widget_bottom_left{background-image: url(graphic_elements/boxes/box_067_cr.png);             }
    .widget_bottom_center{background-image: url(graphic_elements/boxes/box_067_tb.png);             }
    .widget_bottom_right{background-image: url(graphic_elements/boxes/box_067_cr.png);             }
    .widget_token_right{background-image: none;             }
    .widget_token_left{background-image: none;             }
    .widget_token_bottom{background-image: url(graphic_elements/boxes/box_067_token_bottom-bwidget.png); height: 17px;             }
    .blog_boxes{margin-bottom: 0px;           }
    .container_posts_pieces{background-image: url(graphic_elements/boxes/box_014_ct.png);height:auto;             }
    .post_token_right{background-image: none;             }
    .post_token_left{background-image: none;             }
    .post_top_left{background-image: url(graphic_elements/boxes/box_014_cr.png);             }
    .post_top_center{background-image: url(graphic_elements/boxes/box_014_tb.png);             }
    .post_top_right{background-image: url(graphic_elements/boxes/box_014_cr.png);             }
    .post_middle_left{background-image: url(graphic_elements/boxes/box_014_ss.png);             }
    .post_middle_right{background-image: url(graphic_elements/boxes/box_014_ss.png);             }
    .post_bottom_left{background-image: url(graphic_elements/boxes/box_014_cr.png);bottom: -9px !important;             }
    .post_bottom_center{background-image: url(graphic_elements/boxes/box_014_tb.png);background-position: left -1px !important;bottom: 0px !important;height: 8px !important;             }
    .post_bottom_right{background-image: url(graphic_elements/boxes/box_014_cr.png);bottom: -9px !important;             }
    .post_token_bottom{background-image: none; height: 0px;             }
    .more-link{font-size: 16px; text-decoration: none; padding: 0px 15px; line-height: 38px; height: 41px; background-image: url(graphic_elements/read-more/readmore_005_ct.png); margin: 20px 9px 0px; color: rgb(187, 187, 187); background-position: initial initial; background-repeat: initial initial;             }
    .more-link_left{display: block; background-image: url(graphic_elements/read-more/readmore_005_ss.png); width: 9px; left: -9px;             }
    .more-link_right{display: block; background-image: url(graphic_elements/read-more/readmore_005_ss.png); width: 9px; right: -9px;             }
    .header_shadow{display: block; background-image: url(graphic_elements/shadows/shadow_003.png); background-repeat: no-repeat no-repeat; }
    .comments_link{font-size: 28px; color: rgb(219, 219, 219); background-image: url(graphic_elements/comment-link/cmmlink_002.png); width: 77px; height: 47px; line-height: 47px; left: auto; background-position: 100% 0%;             }
    .head_post{padding: 0px 87px 20px 0px; display: compact;             }
    .footer_separate{display: block; background-image: url(graphic_elements/divisors/divisor_013.png); height: 10px; bottom: -5px; background-position: initial initial; background-repeat: initial initial;           }
    .icon_socials li.ic_facebook{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: 0px 50%; }
    .icon_socials li.ic_twitter{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -49px 50%; }
    .icon_socials li.ic_rss{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -98px 50%; }
    .icon_socials li.ic_mail{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -147px 50%; }
    .icon_socials li.ic_plus{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -196px 50%; }
    .icon_socials li.ic_linkedin{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -245px 50%; }
    .icon_socials li.ic_rssmail{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -294px 50%; }
    .icon_socials li.ic_skype{background-image: url(graphic_elements/social-network/setpack_social_029.png); height: 40px; width: 49px; background-position: -343px 50%; }
    ul.icon_socials{margin: 20px 10px 0px; }
    .nivo-prevNav{background-image: url(graphic_elements/slider/sld_040_arr.png); width: 57px; height: 50px; top: 150px; left: -30px;            }
    .nivo-nextNav{background-image: url(graphic_elements/slider/sld_040_arr.png); width: 57px; height: 50px; top: 150px; right: -30px;            }
    .post_commts{display: none; background-image: url(graphic_elements/icon-post/iconpost_002.png); height: 14px; line-height: 14px; background-position: 0px -42px;  }
    .body_theme h1{font-family: 'Alfa Slab One', cursive; font-size: 38px;             }
    .body_theme h2{font-family: 'Bitter', serif; font-size: 14px;             }
    .body_theme h3{font-family: 'Alfa Slab One', cursive; font-size: 30px;             }
    theme_change{true}
    current_lay{layout_1}
    wrap_bk_color{#063a6a}
    .h2{font-family: 'Bitter', serif;font-size: 14px'}
    .body_theme h4{font-family: 'Alfa Slab One', cursive; font-size: 26px;             }
    .body_theme h5{font-family: 'Alfa Slab One', cursive; font-size: 22px;             }
    .body_theme h6{font-family: 'Alfa Slab One', cursive; font-size: 18px;             }
    pattern_body_lay{graphic_elements/pattern/pattern_062.png}
    .logo{margin-top:0; }
    menu_back{'top': 15, 'background-image': 'url(graphic_elements/menu/menu_035_current.png)', 'height': 20}
    type_current_logo{image            }
    text_logo{My Company              }
    text_logo_font_size{50px              }
    text_logo_effect{logo_effect_3d              }
    .body_theme{font-family: 'Bitter', serif; font-size: 14px;             }
    slider_bkcolor{rgb(86, 86, 86)}
    wrap_content_pattern{url(graphic_elements/pattern/pattern_010.png);height:auto;}
    no_slider{true}
    content_pattern_wka{}
    #content{padding: 20px 0px; }
    .post_tag{none }
    body{background-color: rgb(247, 247, 247); background-image: none; }
    .clipart{background-image: none; background-position: 50% 100%; }
    #header{none          }
    .slider_shadow{display: block; background-image: url(graphic_elements/shadows/shadow_005.png); background-repeat: no-repeat no-repeat;           }
    .footer_pattern{display: block; background-image: url(graphic_elements/pattern/pattern_010.png); background-position: initial initial; background-repeat: initial initial;          }
    .header_pattern{background-image: url(graphic_elements/pattern/pattern_062.png); display: block; background-position: initial initial; background-repeat: initial initial; }
    .header_separate{display: block; background-image: url(graphic_elements/divisors/divisor_005.png); height: 10px; bottom: -5px; background-position: initial initial; background-repeat: initial initial; }
    .content_shadow{display: block; background-image: url(graphic_elements/shadows/shadow_009.png); background-repeat: no-repeat no-repeat;           }
    .content_separate{display: block; background-image: url(graphic_elements/divisors/divisor_002.png); height: 10px; bottom: -5px; background-position: initial initial; background-repeat: initial initial; }
    .wrapper_slider{background-color: rgb(86, 86, 86); display: none; }
    .slider_pattern{display: block; background-image: url(graphic_elements/pattern/pattern_011.png); }
    .wrapper_content{background-color: rgb(6, 58, 106); }
    .content_pattern{display: block; background-image: url(graphic_elements/pattern/pattern_010.png); background-position: initial initial; background-repeat: repeat; height:auto;        }
    .wrapper_header{none}
    .wrap_lay2{none}
    .wrap_lay3{none}
    .wrap_lay4{none}
    .wrap_lay5{none}
    .wrap_lay6{none}
    .wrap_lay7{none}
    .global_wrapper{none}
    .footer_shadow{none}
    .wrapper_header{none}
    .wrapper_content{background-color: rgb(6, 58, 106); }
    .wrapper_slider{background-color: rgb(86, 86, 86); }
    .wrapper_footer{none}
    body{background-color: rgb(247, 247, 247); background-image: none; }
    .header_separate{display: block; background-image: url(graphic_elements/divisors/divisor_005.png); height: 10px; bottom: -5px; background-position: initial initial; background-repeat: initial initial; }
    .content_separate{display: block; background-image: url(graphic_elements/divisors/divisor_002.png); height: 10px; bottom: -5px; background-position: initial initial; background-repeat: initial initial; }
    .header_pattern{background-image: url(graphic_elements/pattern/pattern_062.png); display: block; background-position: initial initial; background-repeat: initial initial; }
    
    .pagination {
    clear:both;
    padding:20px 0;
    position:relative;
    font-size:11px;
    line-height:13px;
    }
    
    .pagination span, .pagination a {
    display:block;
    float:left;
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    text-decoration:none;
    width:auto;
    color:#fff;
    background: #555;
    }
    
    .pagination a:hover{
    color:#fff;
    background: #3279BB;
    }
    
    .pagination .current{
    padding:6px 9px 5px 9px;
    background: #3279BB;
    color:#fff;
    }
    /* @font-face definitions */
    
    @font-face {
      font-family: 'KulminoituvaRegular';
      src: url('../fonts/kulminoituva.eot');
      src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
    }
    
    @font-face {
      font-family: 'NotethisRegular';
      src: url('../fonts/Note_this.eot');
      src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
    }
    
    /* Index Card Styling */
      
    ul#index_cards {
      margin-top:50px;
      text-align:center;
    }
      
    ul#index_cards li {
      height:450px;
      width:130px;
      display:block;
      float:left;
      padding:25px 10px;
      position:relative;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
    }
    #card-1 {
      -webkit-transform: rotate(-20deg);
      -moz-transform: rotate(-20deg);
      z-index:1;
      left:150px;
      top:20px;
      height:420px;
    }
      
    #card-2 {
      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      z-index:2;
      left:70px;
      top:10px;
    }
      
    #card-3 {
      background-color:#69732B;
      z-index:3;
    }
      
    #card-4 {
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      z-index:2;
      right:70px;
      top:10px;
    }
      
    #card-5 {
      -webkit-transform: rotate(20deg);
      -moz-transform: rotate(20deg);
      z-index:1;
      right:150px;
      top:40px;
    }
    /* Hover States */
      
    ul#index_cards li:hover {
      z-index:4;
    }
      
    #card-1:hover {
      -moz-transform: scale(1.1) rotate(-18deg);
         -webkit-transform: scale(1.1) rotate(-18deg); 
    }
        
    #card-2:hover {
      -moz-transform: scale(1.1) rotate(-8deg);
       -webkit-transform: scale(1.1) rotate(-8deg); 
    }
      
    #card-3:hover {
      -moz-transform: scale(1.1) rotate(2deg);
       -webkit-transform: scale(1.1) rotate(2deg); 
    }
      
    #card-4:hover {
      -moz-transform: scale(1.1) rotate(12deg);
       -webkit-transform: scale(1.1) rotate(12deg); 
    }
      
    #card-5:hover {
      -moz-transform: scale(1.1) rotate(22deg);
       -webkit-transform: scale(1.1) rotate(22deg); 
    }
    /* Content Styling */
      
    ul#index_cards li img {
      margin-top:7px;
      background:#eee;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-box-shadow: 0px 0px 5px #aaa;
      -webkit-box-shadow: 0px 0px 5px #aaa;
    }
          
    ul#index_cards li p {
      margin-top:4px;
      text-align:left;
      line-height:28px;  
    }
    The name of the background image is: pattern_010.png. I am sure that is the correct file name & path as Chrome and Safari are displaying it properly. Please let me know how I can fix this!

    Thanks!

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    I'm a bit out of my element here as CSS certainly is not my strong point.

    Something to consider is this line
    Code:
    body{background-color: rgb(247, 247, 247); background-image: none; }
    may be preventing the background from publishing.

    Also, consider giving the document a DOCTYPE. Browser behavior may then be different.
    Code:
    <!DOCTYPE html>
    would work.

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •