Grow your CSS skills. Land your dream job.

Navigations issues when zoom out or in

  • # May 12, 2010 at 10:50 pm

    Hello, I am designing a site with a drop down menu. Its a version of the suckerfish dropdown. Anyway when I zoom in or out with the browser the contact links drops to the second line under the home link. Not sure why.

    I validated my css and did not find any errors with my navigations.
    Here is a link to my demo site http://www.appleheadwebdesign.com/demo/index.html
    Here is my css

    Code:
    *{
    margin:0;
    padding: 0;
    }

    body {
    background-color: #fff;

    }

    .pageWrapper {
    background: url(../images/outerPageWrap.jpg) repeat-y top;
    width: 970px;
    margin: 0 auto;
    }

    .clear {
    clear:both;
    }

    .pageContainer {
    background: url(../images/bokeh1.png) repeat-y top;
    width: 950px;
    margin: 0 auto;
    }

    .logo {
    margin: 10px 0 0 40px;
    width: 400px;
    }

    /*Navigations*/
    .navigation{

    width: 440px;
    margin: 25px 40px 0 0;
    float: right;
    clear: right;

    }

    #trans-nav {
    list-style-type: none;
    height: 35px;
    padding: 0;
    margin: 0 auto;}

    #trans-nav li {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    float: left;
    position: relative;
    padding: 0;
    line-height: 35px;
    }

    #trans-nav li:hover {
    background-position: 0 -35px; }

    #trans-nav li a {
    display: block;
    padding: 0 15px;
    color: #4f7a2e;
    text-decoration: none; }

    #trans-nav li a:hover {
    background: url(../images/navhover.png) repeat-x; }

    #trans-nav li ul {
    opacity: 0;
    position: absolute;
    left: 0;
    width: 235px;
    background: #ccff99;
    list-style-type: none;
    padding: 0;
    margin: 0; }

    #trans-nav li:hover ul {
    opacity: 1; }

    #trans-nav li ul li {
    float: none;
    position: static;
    height: 0;
    line-height: 0;
    background: none; }

    #trans-nav li:hover ul li {
    height: 30px;
    line-height: 30px; }

    #trans-nav li ul li a {
    background: #D3FFA8;}

    #trans-nav li ul li a:hover {
    background: url(../images/navhover.png) repeat-x;}

    /*End Navigations*/

    /*Nivo Slider*/
    #slider {
    position:relative;
    background: url(../images/loading.gif) no-repeat 50% 50%;
    }
    #slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    }

    #slider {
    position:relative;
    margin:30px 30px 20px 30px;
    border: solid 1px #C0C0C0;
    }

    #slider img {
    position:absolute;
    top:0px;
    left:0px;
    }
    #slider a {
    border:0;
    }
    /*End Nivo slider*/

    .content{
    margin: 40px 0 0 200px;
    float: left;
    clear: left;
    width: 450px;
    }

    h2 {
    font-family: ‘SouciSans’, sans-serif;
    font-size: x-large;
    margin: 0 50px;
    color: #964b00;
    width: 450px;
    }

    p {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: lighter;
    line-height: 24px;
    color: #964b00;
    text-align: justify;
    width: 447px;
    margin: 10px 35px;
    }
    /*sidebar*/

    .sideBar {
    width: 210px;
    float: right;
    clear: right;
    margin: 60px 80px 0 0;
    }

    .sideBar p {
    width: 175px;
    padding: 15px;
    background: url(../images/sidebarbg.png) repeat;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: lighter;
    line-height: 24px;
    color: #4f7a2e;
    text-align:left;
    }
    .sideBar p a {
    color:#4f7a2e;

    }

    .sideBar h2 {
    font-family: ‘SouciSans’, sans-serif;
    font-size: x-large;
    margin: 0 50px;
    color: #964b00;
    }

    p.copyRight {
    float: left;
    clear: left;
    width: 300px;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #7ec959;
    padding: 40px 20px 5px;

    }

    p.webDesigner {
    float: right;
    clear: right;
    width: 250px;
    font-size: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #7ec959;
    padding: 40px 20px 5px;

    }
    p.webDesigner a {
    color:#4f7a2e;

    }

    .clear {
    clear:both;
    }

    # May 13, 2010 at 8:24 am

    It’s simply because you have a fixed layout – it will only break on browsers that don’t support full page zoom, there just isn’t room for the text to go anywhere when you make it larger so it wraps.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".