• My css isn’t working isn’t displaying correctly in firefox. I am trying to hide the huge images on our site when the user shrinks their browser or is using a tablet.

    Works in Chrome but not firefox.

    <link rel=”stylesheet” href=”https://meirxrs.com/wp-content/themes/meirxrs/style.css&#8221; type=”text/css” media=”screen and (min-width: 900px)” />
    <link rel=’stylesheet’ media=’screen and (min-width: 301px)’ href=’https://meirxrs.com/wp-content/themes/meirxrs/style_tablet.css&#8217; />

    Here is my style_tablet.css

    @media (max-width: 900px)
    {
    #HpBanner{display:none;visibility:hidden}
    #SpBanner{display:none;visibility:hidden}
    #logolist{display:none;visibility:hidden}
    #FooterLinks a{color:#666;white-space:nowrap}

    #Middle{background:#fff;border-bottom:13px solid #000;}

    #Nav ul{list-style-type:none;padding:0;}
    #Nav li{border-left:1px solid #414141;padding:0 10px;float:left;height:11px;line-height:10px;}
    #Nav li:first-child{border-left:none;padding-left:0;}
    #Nav li a{color:#b0b0b0;font-size:14px;font-weight:bold;}
    #Nav a:hover, #SpSmallNav li.current_page_item a, #SpSmallNav li.current_page_ancestor a{color:#850d70;}
    //#Nav {position:absolute;bottom:0;right:100px;bottom:6px;}
    #Nav ul{padding:0;list-style-type:none;}
    #Nav li{float:left;font-weight:bold;font-size:14px;padding:0 10px;border-left:1px solid #b0b0b0;height:11px;line-height:10px;}
    #Nav li:first-child{border-left:0;padding-left:0;}
    #Nav li a{color:#b0b0b0;}
    #Nav li.current_page_item a, #SmallNav li.current_page_ancestor a{text-decoration:underline;}

    #SpSmallNav ul{list-style-type:none;padding:0;}
    #SpSmallNav li{border-left:1px solid #414141;padding:0 10px;float:left;height:11px;line-height:10px;}
    #SpSmallNav li:first-child{border-left:none;padding-left:0;}
    #SpSmallNav li a{color:#b0b0b0;font-size:14px;font-weight:bold;}
    #SpSmallNav a:hover, #SpSmallNav li.current_page_item a, #SpSmallNav li.current_page_ancestor a{color:#850d70;}
    //#SmallNav{position:absolute;bottom:0;right:100px;bottom:6px;}
    #SmallNav ul{padding:0;list-style-type:none;}
    #SmallNav li{float:left;font-weight:bold;font-size:14px;padding:0 10px;border-left:1px solid #b0b0b0;height:11px;line-height:10px;}
    #SmallNav li:first-child{border-left:0;padding-left:0;}
    #SmallNav li a{color:#b0b0b0;}
    #SmallNav li.current_page_item a, #SmallNav li.current_page_ancestor a{text-decoration:underline;}
    //#Top{background:url(“images/bg-slice.jpg”) repeat-x;height:369px;}
    //#PageTop{position:absolute;left:37px;bottom:0;background:url(“images/page-top.png”) no-repeat;height:40px;width:692px;}
    //#Middle{background:#fff;border-bottom:13px solid #000;}
    //#MiddleWrapper{width:1080px;background:url(“images/middle-bg.jpg”) repeat-y;padding-bottom:20px;}
    #SpTop{background:url(“images/sp-bg.jpg”) repeat-x;height:208px;}

    }

  • The topic ‘css wont work in firefox’ is closed to new replies.