Grow your CSS skills. Land your dream job.

URGENT! Several compatibility issues in IE

  • # March 7, 2013 at 9:09 pm

    Hey guys,

    This is the website I’m working on at the moment ( & obiviously my first ) :

    [Gardening Website](http://eleanorgallahergardening.co.uk/home.html “http://eleanorgallahergardening.co.uk/home.html”)

    FIRSTLY – MAJOR issue – horizontal navigation with a logo in the center looks okay in all browsers, except IE 9 – I have tried everything and I can’t seem to fix it. I need it to be centered and horizontally aligned. Ideally manage to even the white space between li’s as it renders in Chrome. It’s killing me and I really need to finish the website asap.

    This is the CSS for it:

    /* Navigation */

    ul#nav1 {
    display: inline-block;
    }

    ul#nav1 li{
    display: inline-block;
    padding-right: 15px;
    text-align: left;
    margin-left: -15px;
    }

    #logo {
    display:inline-block;
    margin: 0 auto;
    padding-top:10px;
    margin-bottom: -10px;
    }

    ul#nav2 {
    display: inline-block;
    margin-right: -13px;
    }

    ul#nav2 li{
    display: inline-block;
    text-align: right;
    padding: 5px;
    }

    a {
    text-decoration: none;
    color: black;
    }

    /* Dotted Underline Images*/

    #homedots{
    display:block;
    margin-top: 5px;
    margin-left: -40px;
    }

    #servicesdots{
    display:block;
    margin-top: 5px;
    }

    #portfoliodots{
    display:block;
    margin-top: 5px;
    }

    #contactdots{
    display:block;
    margin-top: 5px;
    }
    /* End of Dotted Underline Images*/

    SECONDLY All content in IE 9 appears in italics????? I have not specified font-style in body, only for certain elements. Does anyone know how to fix it?

    I would really appreciate some help!

    Thank you

    # March 7, 2013 at 9:37 pm

    I fired up a clean instance of IE9 in a virtual machine running a clean install on Windows 7, and it looks identical to what I see in the latest versions of Chrome and Firefox on Mac OS X (Mountain Lion).

    To fix the white-space, you can do one of two things—add HTML comments between your li elements, like so:

    <ul>
    <li></li><!–
    –><li></li><!–
    –><li></li>
    </ul>

    Or you can set font-size:0; on the ul and then add it back on the li.

    # March 7, 2013 at 9:45 pm

    or use floats…
    http://codepen.io/wolfcry911/full/lFLvH

    I took the liberty of redoing the page. You’ve used far too many ids and classes. My markup could use even further refining, but I just wanted to quickly show how this could be done.

    # March 8, 2013 at 4:33 am

    Thank you @wolfcry911, much appreciated. I’ll try it out.

    # March 8, 2013 at 6:46 am

    Hey @wolfcry911 , everything looks great but I don’t really get how this code :

    #footer {
    margin: 15px 0;
    background: #88AF3C;
    clear: both;
    overflow: hidden;
    }

    #footer>div {
    float: left;
    font-size: 16px;
    line-height: 22px;
    color: #4E4442;
    margin: 0 10px 0 20px;
    }

    #footer h3 {
    border-bottom: 1px solid #D1E889;
    color: #FFF;
    font-size: 17px;
    text-transform: uppercase;
    }

    actually aligns the footer on the left. I tried doing it but it doesn’t come out like yours?

    - [This page](http://eleanorgallahergardening.co.uk/home.html “”)

    # March 8, 2013 at 6:51 am

    you’ve got a few errors – you’re missing the closing div tag for the #sidebar, which then places the footer within it. The .testimonial div is missing a bracket, and a break tag in the header is malformed.

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

You must be logged in to reply to this topic.

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