• Resolved Overflow

    (@acrane)


    I’m used to this in IE6 but safari? The site: https://www.grrcc.com.php5-14.websitetestlink.com/

    works in Firefox/explorer but safari drops all styles when it reaches the nav. Any suggestions would be greatly thanked.

    my code:`
    ul.cssMenu ul{display:none}
    ul.cssMenu li:hover>ul{display:block}
    ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.cssMenu,ul.cssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 2px 2px 0px;
    background-color:#666;
    background-repeat:repeat;
    color: #FFF;

    }
    ul.cssMenu table {
    border-collapse:collapse;

    }

    ul.cssMenu {
    display:block;
    /*zoom:1;*/
    float: left;
    width: 830px;
    }
    ul.cssMenu ul{
    width:180px;
    }
    ul.cssMenu li{
    display:block;
    font-size:0px;
    margin-top: 2px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 2px;

    }
    ul.cssMenu a:active, ul.cssMenu a:focus {
    outline-style:none;
    }
    ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#666;
    border-width:0px;
    border-color:#6655ff;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:8px;
    padding-left:0;
    color: #FFF;
    text-decoration:none;
    cursor:default;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    }
    ul.cssMenu span{
    overflow:hidden;

    }
    ul.cssMenu li {
    float:left;
    }
    ul.cssMenu ul li {
    float:none;
    }
    ul.cssMenu ul a {
    text-align:left;
    white-space:nowrap;
    }
    ul.cssMenu li.sep{
    text-align:center;
    padding:0px;
    line-height:0;
    height:100%;
    }
    ul.cssMenu li.sep span{
    float:none; padding-right:0;
    width:5px;
    height:16px;
    display:inline-block;
    background-color:#AAAAAA; background-image:none;}
    ul.cssMenu ul li.sep span{
    width:80%;
    height:3px;
    }
    ul.cssMenu li:hover{
    position:relative;
    }
    ul.cssMenu li:hover>a{
    background-color:#CC6600;
    border-color:#665500;
    border-style:solid;
    color: #ffffff;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;

    }
    ul.cssMenu li a:hover{
    position:relative;
    background-color:#6699CC;
    border-color:#665500;
    border-style:solid;
    color: #ffffff;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    }
    ul.cssMenu li.dis a {
    color: #AAAAAA !important;
    }
    ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
    height:16px;
    }
    ul.cssMenu ul img {width:16px;
    height:16px;
    }
    ul.cssMenu img.over{display:none}
    ul.cssMenu li.dis a:hover img.over{display:none !important}
    ul.cssMenu li.dis a:hover img.def {display:inline !important}
    ul.cssMenu li:hover > a img.def {display:none}
    ul.cssMenu li:hover > a img.over {display:inline}
    ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}
    ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
    ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
    ul.cssMenu span{
    display:block;
    background-position:right center;
    background-repeat: no-repeat;
    padding-right:11px;
    }
    <div id=”nav”>
    <ul class=”cssMenu cssMenu”>
    <li class=”cssMenu”>Home Page

    <li class=”cssMenu”><span>Adoption</span>
    <ul class=”cssMenum”>
    <li class=”cssMenu”>Available Goldens
    <li class=”cssMenu”>Adoption Information
    <li class=”cssMenu”>Adoption Application
    <li class=”cssMenu”>Recent Adoptions
    <li class=”cssMenu”>In Memory of

    <li class=”cssMenu”><span>Fostering</span>
    <ul class=”cssMenu”>
    <li class=”cssMenu”>All About Fostering
    <li class=”cssMenu”>Foster Application
    <li class=”cssMenu”>Foster Stories

    <li class=”cssMenui”><span>Get Involved</span>
    <ul class=”cssMenum”>
    <li class=”cssMenu”>Events Calendar
    <li class=”cssMenu”>Donate
    <li class=”cssMenu”>Fundraising
    <li class=”cssMenu”>Join Membership
    <li class=”cssMenu”>Volunteer
    <li class=”cssMenu”>Sign up for e-news
    <li class=”cssMenu”>Online Store

    <li class=”cssMenu”><span>Resources</span>
    <ul class=”cssMenu”>
    <li class=”cssMenu”>Newsletters
    <li class=”cssMenu”>Friends of GRRCC
    <li class=”cssMenu”>Golden Get-togethers
    <li class=”cssMenu”>Links
    <li class=”cssMenu”>All About Goldens

    <li class=”cssMenu”><span>About</span>
    <ul class=”cssMenu”>
    <li class=”cssMenu”>Board Member Listing
    <li class=”cssMenu”>Site Map

    <li class=”cssMenu”><span>Contact Us</span>
    <ul class=”cssMenum”>
    <li class=”cssMenu”>Board Member Listing

    </div><!–closes nav–>`

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS not working in Safari’ is closed to new replies.