Reputation: 19

CSS navigation is not visible in IE8 or lower

I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.

The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.

This site is not yet online so unfortunately I cant give you a link to it, only code.

I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.

Thankyou for your time.

Jon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Alan J. Warde Chartered Surveyor</title>

</head>

<body id="home">


<div id="wrap"><!--wrap starts-->

    <a href="#"><img src="images/header.jpg" alt="header" /></a>


            <ul id="nav"><!--nav starts-->
                <li class="home"><a href="index.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->


           <div id="main_content"><!--start of main_content-->

            <div id="sidebar"><!--start of sidebar-->
                <div class="listbox"><!--start of listbox-->
                <div class="inner_sidebar">
                <ul>
                  <li>Building Surveys</li>
                  <li>Valuations</li>
                  <li>Structural Engineering</li>
                  <li>Quantity Surveying</li>
                  <li>Loss Adjusting</li>
                </ul>
                </div><!--end of inner_sidebar-->
                </div><!--end of listbox-->

            </div><!--end of sidebar-->

               <div id="homecontent"><!--start of Homecontent-->
                    <div id="inner_content"><!--start of inner_content-->
                <h1>A J Warde Chartered Surveyor</h1>
                <p>CONTENT</p>

<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->


              </div><!--end of inner_content-->

              </div><!--end of Homecontent-->

             </div><!--end of main_content-->

     <div id="footer">
        <div id="footer_inside">
          Registered Company 055012
             <ul id="footer_nav"><!--nav starts-->
                <li class="home"><a href="home.html">Home</a></li>
                <li class="about"><a href="about.html">About</a></li>
                <li class="services"><a href="services.html">Services</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul><!--nav ends-->
         </div><!--end of Footer-inside-->
     </div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>






@charset "utf-8";
/* CSS Document */

/*RESETS AND BASIC SETUP*/

* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
    font: 62.5% "Times New Roman", Times, serif;
    background-color: #322e2e;
}


/*TYPOGRAPHY*/

h1 {
    padding:10px 0 20px 0;
    text-align:center;
    font-size:2.4em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

h2 {
    padding:5px 0 5px 0;
    text-align:center;
    font-size:1.1em;
    color:#003399;
    text-shadow:1px 1px #69F;
}

/*BASIC ELEMENT STYLING*/

ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em;    font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}

/*END RESET*/

/*STRUCTURE AND THINGS*/


#wrap {
    width:995px; /*for IE*/
    margin:auto;
    background:url(images/content.jpg)repeat-y;
}

html>body #wrap { /*IE hack*/
    width:975px;
}


#main_content {
    padding:0;

}


#homecontent {
    background:url(images/contentimg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#servicescontent {
    background:url(images/servicesnewbg.jpg) no-repeat;
    height:478px;
    width:633px;
    float:right;
    margin-right:12px; /*pushes div closer to left*/
    margin-top:2px;
    position:relative;


}

#inner_content {
    padding:20px;
    position:relative;
}


        #contact { /*this is just to centre-align the contact details on home page*/
    position:absolute;
    left:150px;
    width: 330px;
    text-align:center;
        }
            #contact p {
                color:#0000FF;
            }

#left_col {
    border:1px solid red;
    float:left;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
    margin-top:20px;
    position:relative;
}
        #contactdetails {
            position:absolute;
            left:50px;
        }

#sidebar {
    float:left;
    background:url(images/sidebar.jpg) no-repeat;
    height:478px;
    width:313px;
    margin-left:15px; /*pushes div closer to right*/
}




.inner_sidebar {
    padding:20px 0 80px 0px;
    font-size:1.4em;
}

.listbox {
    width:230px;
    margin-left:10px;
}

        .inner_sidebar ul li {
            font-size:1.4em;
            padding:5px;
            margin:5px 0 45px 5px;
            font-weight:bold;
            color:#FFF;
            border:1px solid #FFF;
            border-radius:3px;
            background-color:rgba(0, 0, 25, 0.5);
        }

/*TOP OF PAGE NAVIGATION*/

ul#nav {

}
    ul#nav li {
        display:inline;
    }
    ul#nav li a {
        display:block;
        height:54px; 
        text-indent:-9999px;
        float:left;
        } 

    ul#nav li.home a {
        width:404px;
        background:url(images/homenav.jpg)top center no-repeat;
    }

        ul#nav li.about a {
        width:160px;
        background:url(images/aboutnav.jpg)top center no-repeat;
    }

    ul#nav li.services a {
        width:160px;
        background:url(images/servicesnav.jpg)top center no-repeat;
    }

    ul#nav li.contact a {
        width:251px;
        background:url(images/contactnav.jpg)top center no-repeat;
    }

    ul#nav li a:hover {
        background-position: center center;
    }

    body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
        background-position: bottom center;
    } 


/*FOOTER*/

#footer {
    height:96px;
    background:url(images/footer.jpg) no-repeat;
    clear:both;
}

#footer_inside {
    text-align:center;
    width:500px;
    margin:auto;
    padding:10px 0 0 0;
    color:#CCCCCC;
    font-size:1.4em;

}

ul#footer_nav li {
    display:inline;
    padding:0px;
    margin:0px;     
}

    ul#footer_nav li a {
        color:white;
        text-decoration:none;
        padding:0 10px;
        border-right:1px solid white;
        line-height:25px;
    }
        ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
            border:none;
        }

Upvotes: 1

Answers (2)

Chowlett

Reputation: 46667

Looks like you need to put spaces between the url() and top on each background property.

Upvotes: 2

Alice

Reputation: 1

Lower version IEs have 'hasLayout' attribute that is only in IE. You could find out about it.

ul#nav {
    /* set width and height */
}

I think this might works.

Upvotes: 0

CSS navigation is not visible in IE8 or lower

Answers (2)

Related Questions