Treehouse: 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]( “”)

    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 {
    margin: 0 auto;
    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*/

    margin-top: 5px;
    margin-left: -40px;

    margin-top: 5px;

    margin-top: 5px;

    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:


    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…

    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]( “”)

    # 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.