Grow your CSS skills. Land your dream job.

[Solved] Cross Browser Issues

  • # February 23, 2010 at 12:09 pm

    I’ve about finished up my first site, and now I’m doing cross-browser testing. All my pages have validated. Everything looks fine in Firefox on Mac and Windows. The current site url is http://dev.craigcurry.com.

    I know there are other issues, but I thought I’d start with the two most troubling.

    1. In testing on IE7, on my nav menu, everything is appearing a few pixels lower than I’d like. In Safari for Windows, it’s about 1px, and there’s a 1px gap at the bottom of my header div. Here’s some hopefully relevant code.

    Code:
    #nav_wrap {
    background-image: url(../images/interface/arrow.png);
    background-repeat: no-repeat;
    width: 960px;
    height: 130px;
    float: left;
    padding-top: 19px;
    }
    #nav_wrap ul {list-style: none; width: 960px; height: 130px;}

    #nav_wrap ul li {
    display: inline; /* fix for IE*/
    height: 85px;
    width: 100px;
    float: left;
    overflow: hidden;
    }
    #header #nav_wrap ul li.about {width: 115px;}

    #header #nav_wrap ul li.recordings {
    width: 100px;
    overflow: visible;
    }
    #header #nav_wrap ul li.shop {
    width: 85px;
    float: left;
    }
    #header #nav_wrap ul li.contact,#header #nav_wrap ul li.blog {
    width: 80px;

    }
    #nav_wrap ul li a {
    text-indent: -9999px;
    display: block;
    height: 85px;
    width: 108px;
    float: left;
    background: url(../images/interface/menu4.png);
    overflow: hidden;
    }

    2. Another issue is that I’m getting an extra set of vertical scrollbars on IE7, sometimes 2, depending on the page. I’m hoping someone can explain to me what I did that is causing this, and how to correct it.

    Code:
    body {
    font-size: 62.5%;
    font-family: “droid-sans-1″,”droid-sans-2″,”Trebuchet MS”, Arial, Helvetica, sans-serif;
    background: #fefefe url(../images/interface/possible_bg3.jpg) repeat-x;
    overflow:auto;
    text-align: center;
    }

    body#piano h3 {line-height:30px;}

    body#login {background-color: #5964b2;}

    #page-wrap {
    width: 100%;
    margin: 0 auto;
    background: #fff url(../images/interface/possible_bg3.jpg) repeat-x;
    overflow:auto;
    }

    #container {
    font-size: 1em;
    width: 960px;
    margin: 0 auto;
    text-align:center;
    height:auto;
    }

    I would appreciate any help anyone could offer.

    (FWIW, I’m not even attempting to support IE6 because it’s just overwhelming to me to address at this point.)

    # February 23, 2010 at 4:01 pm

    I just took a brief look at your site and am not addressing the issues you mentioned as I am presently on a Mac and need to change to my PC to view in IE. What I did notice, that does not look good, is the background image which is cut off and repeated on the right hand side.
    I am viewing at 1440×900 but even at 1152×720 the cut off is still there. I will take a look at your other issues tomorrow, it’s a little late here for me.

    # February 23, 2010 at 6:15 pm

    What is the point of your page-wrap div if you have a container div inside doing all the normal page wrap work? Having both of them there is redundant.

    # February 23, 2010 at 9:20 pm

    Thanks for the input; I appreciate your taking a look. What I was (unsuccessfully?) attempting with the repeat background image was to fake one large background image. (Of course, on larger windows you would see the "seam.") Anyway, I’ve updated my code and switched it out with one large image. There’s also no longer any redundancy with the page-wrap and the container.

    I would still appreciate any help with the nav menu and vertical scrollbars questions when you (or someone) has some time. I know there are other issues as well, (e.g., footer) but I thought I’d start at the top and work my way down. Thanks again.

    # February 24, 2010 at 10:23 am

    For the navigation issue, for IE7 add margin: -4px 0 0 0; to #nav_wrap ul li
    You will need a separate stylesheet to target IE7 only. I don’t know if you are interested in IE6 but you will need a png fix there and a few other corrections.

    For the 1px gap in Chrome on the header you could try giving it a negative margin-bottom of 1px, won’t make much difference to the other browsers.

    The scroll bars on piano for example are because the widths and heights for the divs contained are not consistent. Look at your code again, for example the box is 647px wide and the containing #main_content is 640px.

    # February 24, 2010 at 3:39 pm

    Thanks for the help. I was able to get the nav menu and scrollbar issues fixed per your advice. I’m still working on the Safari (Windows) 1px gap. But that was a big help; thanks.

    # March 2, 2010 at 5:34 pm

    Just an update for the record: I fixed the 1px gap in Safari/Chrome by adding 1px of padding-bottom to the header, and setting the background-color to match the area below.

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

You must be logged in to reply to this topic.

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