joe joe - 1 year ago 69
CSS Question

CSS Sprites - not showing up in IE 8 and 7

I looked around for the answers, but I m not sure if my codes are missing something. I would appreciate it if you could guide me or help me.

Edited per @djlumley's request

<div id="wrapper">
<div class="container">
<h1 id="logo" class="float-left text-left"><a href="/"><img src="img/logo.png" alt="Company Name"/></a></h1>
<nav id="menu">
<li class="home"><a href="/"><span>Home</span></a></li>
<li class="events"><a href="#"><span>Diary of Events</span></a></li>
<div id="slider">
<div class="container">
<div class="camera_wrap camera_azure_skin slidereel" id="camera_wrap_1">
<div data-thumb="img/slides/thumbs/1.jpg" data-src="img/slides/1.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
<div data-thumb="img/slides/thumbs/2.jpg" data-src="img/slides/2.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
<div data-thumb="img/slides/thumbs/3.jpg" data-src="img/slides/3.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div><!--end .container-->
</div><!--end #slider-->

<div class="container">
<div id="corp_container">
<li><img src="img/logo_comm.png" alt=""/></li>
<li><img src="img/logo_ent.png" alt=""/></li>
<li><img src="img/logo_bro.png" alt=""/></li>

<div class="container">
<div id="keypartners" class="float-left">
<p>Key Partners</p>
<img src="img/pics_37.jpg" alt=""/>
<img src="img/pics_39.jpg" alt=""/>

<div id="hostedby" class="float-left">
<p>Hosted by</p>
<img src="img/pics_41.jpg" alt=""/>
<img src="img/pics_43.jpg" alt=""/>

<div id="footernav" class="float-right text-right">
<li>Privacy Policy</li>
<li>Diary of Events</li>

<div id="copyright">
<p>Copyright &copy; 2012</p>
<p><strong>Last Updated on</strong> 1 March 2012</p>


#wrapper{ width:100%;}

header{background:#fff url(../img/logo_bg.jpg) no-repeat; height:87px; width:100%;display:block;}
header h1#logo{height:20px; margin-top:-10px; width:201px;}
#menu {float:right;margin-top:35px;width:300px;height:52px; display:block;}
#menu span{display:none;}
#menu li, header #menu a{height:52px;display:block;}
#menu li{float:left; list-style:none;}
#menu .home a{width:96px;}
#menu .events a{width:164px;}
#menu .home a{background:transparent url(../img/navs.png) no-repeat 0px 0px;}
#menu .events a{background:transparent url(../img/navs.png) no-repeat -96px 0px;}
#menu .home a:hover{background:transparent url(../img/navs.png) no-repeat -0px -53px;}
#menu .events a:hover{background:transparent url(../img/navs.png) no-repeat -96px -53px ;}

#event_header{background:#2dacf1;margin: 0 0 10px 0;padding: 5px 0; width:100%;}

/* fallback */ background-color: #33b5f3;
background-image: url(../img/banner_slider_bg.jpg);
background-position: center center;
background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#33b5f3), to(#4dd6f8));
/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #33b5f3, #4dd6f8);
/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #33b5f3, #4dd6f8);
/* IE 10 */ background: -ms-radial-gradient(circle, #33b5f3, #4dd6f8); /* Opera cannot do radial gradients yet */ }

article h2{ padding:5px 0;}
article p{margin: 30px 0 20px 40px;}
#corp_container{background:#fff url(../img/incorporate.png) no-repeat;height:70px; margin:30px 0 80px 0; width:960px;}
#corp_container ul{list-style:none;}
#corp_container ul li{display:inline;padding: 30px 20px 8px 0;}
#corp_container ul li img {margin-top:-10px;}

footer{width:100%; background:#f4f4f4; overflow:hidden; padding:20px 0 40px 0;}
#keypartners, footer #hostedby{padding:0 40px 0 0;}
#keypartners ul,footer #hostedby ul,footer #footernav ul{list-style:none;margin:0;padding:0;}
#keypartners ul li,footer #hostedby ul li{padding: 5px 40px 0 0;}
#keypartners ul li,footer #hostedby ul li,footer #footernav ul li{display:inline;}
#footernav ul li{border:none; height:auto;padding:5px 10px 0 10px; text-align:center;}
#footernav li + li {border-left: 1px solid #000;}
#footernav li:last-child {padding-right:0;}
#copyright{margin:20px 0 10px 0;}
#copyright p{padding:0;margin:0;line-height:1.5em;}


table{font-size:0.8em; margin-bottom:15px; width:100%;}
table td,table th{padding:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
thead th{background:#91c5d4;font-weight:bold; }
thead th[colspan], thead th[rowspan]{background:#66a9bd;}
tbody th {background:#91c5d4;font-weight:bold; text-align:left;}
tbody td{background:#d5eaf0;text-align:center;}

IE 9 and FF show the navigation ok but not IE 8 and 7, why?

Answer Source

You need the a to display as a block, then give it an appropriate width and height. Because a is displayed as inline by standard, it tries to display its content in line of the content around it. Because you have hidden the span, the a element has no content and thus cannot display inline. Turning into a block or an inline-block allows you to actually display the a element as a block regardless its content...

It's this simple: #menu a { display: block; width: 96px; height:52px; }

Example, just hover the bottom right blue thing and you'll see it change just like you'd want.

The reason Internet Explorer 8 doesn't support this is because its CSS doesn't support nav.

When I add support for the nav tag (using a nasty JS hack as well as setting display:block on nav) and remove all the #menu's from the CSS it works. Thus, we need to get that #menu selector working.

It's this simple: <nav><ul id="menu">...</ul></nav>

Example, now it works in Internet Explorer 7 and 8.