No replies
timondeks
timondeks's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Joined: 2010-11-11
Posts: 6
Points: 8

I'm using a few image sprite CSS rollovers on the below page. Works fine except for IE, does anyone know of any fixes for this. I think its the 'hidden' line not responding in IE as the whole image shows up on the page, both the active and mouse over.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grennan Mill Blog</title>
<link href="style.css" rel="stylesheet" type="text/css">
 
<style type="text/css">
<!--
@charset "utf-8";
/* CSS Document */
 
 
/* All page body's */
body {
	margin-top: 0px;
	margin-bottom: 0px;
	background-image: url(images/background_texture_v2.jpg);
	background-repeat: repeat;
}
img {
	border:0;
}
/* ROLLOVER EFFECT */
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* END ROLLOVER EFFECT */
/* END All page body's */
 
 
/* All page div's */
/* All page HEADER */
#header {
	height: 140px;
	width: 960px;
}
#header_l_sp {
	height: 140px;
	width: 20px;
	position: absolute;
}
#header_r_sp {
	height: 140px;
	width: 20px;
	position: absolute;
	margin-left: 940px;
}
#header_t_sp {
	height: 20px;
	width: 920px;
	position: absolute;
	margin-left: 20px;
}
#header_logo {
	height: 120px;
	width: 400px;
	position: absolute;
	margin-left: 20px;
	margin-top: 20px;
	background-image: url(images/header_logo.png);
}
#header_big_spacer {
	height: 90px;
	width: 520px;
	position: absolute;
	margin-left: 420px;
	margin-top: 50px;
}
 
#header_home_link {
	height: 30px;
	width: 75px;
	position: absolute;
	margin-left: 420px;
	margin-top: 20px;
	overflow: hidden;
}
header_home_link_roll {
	display: block;
	height: 30px;
	width: 75px;
	overflow: hidden;
}
header_home_link_roll:hover {
	display: block;
	text-indent: -75px;
}
 
 
#header_student_life_link {
	height: 30px;
	width: 110px;
	position: absolute;
	margin-left: 495px;
	margin-top: 20px;
}
header_student_life_link_roll {
	display: block;
	height: 30px;
	width: 110px;
	overflow: hidden;
}
header_student_life_link_roll:hover {
	display: block;
	text-indent: -110px;
}
 
#header_aniv_link {
	height: 30px;
	width: 115px;
	position: absolute;
	margin-left: 605px;
	margin-top: 20px;
}
header_aniv_link_roll {
	display: block;
	height: 30px;
	width: 115px;
	overflow: hidden;
}
header_aniv_link_roll:hover {
	display: block;
	text-indent: -115px;
}
 
#header_contact_link {
	height: 30px;
	width: 90px;
	position: absolute;
	margin-left: 720px;
	margin-top: 20px;
}
header_contact_link_roll {
	display: block;
	height: 30px;
	width: 90px;
	overflow: hidden;
}
header_contact_link_roll:hover {
	display: block;
	text-indent: -90px;
}
 
#header_app_link {
	height: 30px;
	width: 130px;
	position: absolute;
	margin-left: 810px;
	margin-top: 20px;
}
header_app_link_roll {
	display: block;
	height: 30px;
	width: 130px;
	overflow: hidden;
}
header_app_link_roll:hover {
	display: block;
	text-indent: -130px;
}
 
#left_nav {
	background-color: #FF33CC;
	width: 700px;
	padding-left:60px;
}
 
/* END All page HEADER */
 
/* All page BANNER */
#banner_il_spacer {
	height: 445px;
	width: 20px;
	margin-left: 20px;
	position: absolute;
	margin-top: 130px;
	background-image: url(images/banner_left_spacer.png);
}
#banner_ib_spacer {
	height: 20px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 555px;
	background-image: url(images/banner_spacer_bottom.gif);
}
#banner_it_spacer {
	height: 20px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 130px;
	background-image: url(images/banner_spacer_top.gif);
}
#banner_weaving_link {
	background-color: #33CCCC;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 150px;
}
banner_weaving_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_weaving_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
#banner_ceramics_link {
	background-color: #99CC66;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 185px;
}
banner_ceramics_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_ceramics_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
#banner_metalcraft_link {
	background-color: #0033FF;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 220px;
}
banner_metalcraft_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_metalcraft_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
#banner_printmaking_link {
	background-color: #003399;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 255px;
}
banner_printmaking_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_printmaking_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
#banner_drawing_link {
	background-color: #993333;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 290px;
}
banner_drawing_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_drawing_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
#banner_batik_link {
	background-color: #996666;
	height: 35px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 325px;
}
banner_batik_link_roll {
	display: block;
	height: 35px;
	width: 210px;
	overflow: hidden;
}
banner_batik_link_roll:hover {
	display: block;
	text-indent: -210px;
}
 
 
/* END All page BANNER */
/* END All page div's */
 
 
 
/* HOME PAGE EXCLUS*/
#main {
	width:960px;
	margin-left: auto;
	margin-right: auto;
	overflow:auto;
	padding-bottom: 205px;  /* must be same height as the footer */
 
}
 
/*-Home page banner*/
#home_banner {
	height: 585px;
	width: 960px;
 
}
#home_banner_l_spacer {
	height: 585px;
	width: 20px;
	position: absolute;
}
#home_banner_r_spacer {
	height: 585px;
	width: 20px;
	margin-left: 940px;
	position: absolute;
}
#home_banner_b_spacer {
	height: 10px;
	width: 920px;
	margin-left: 20px;
	position: absolute;
	margin-top: 575px;
}
#home_banner_new_mill_pic {
	height: 130px;
	width: 570px;
	margin-left: 20px;
	position: absolute;
	background-image: url(images/banner-new-mill-picl.png);
}
#home_banner_t_spacer {
	height: 15px;
	width: 350px;
	margin-left: 590px;
	position: absolute;
}
#home_banner_content {
	height: 445px;
	width: 340px;
	margin-left: 250px;
	position: absolute;
	margin-top: 130px;
	background-image: url(images/banner_home_content.gif);
}
#home_banner_image {
	height: 560px;
	width: 350px;
	margin-left: 590px;
	position: absolute;
	margin-top: 15px;
	background-image: url(images/home-banner-image.jpg);
}
#home_banner_quotes {
	background-color: #FFFFFF;
	height: 195px;
	width: 210px;
	margin-left: 40px;
	position: absolute;
	margin-top: 360px;
}
 
/*-END-Home page banner*/
 
 
/* Home page CONTENT*/
#home_content {
	width: 960px;
	height: 670px;
	min-height: 100%;
}
#home_content_l_spacer {
	height: 490px;
	width: 20px;
	position: absolute;
}
#home_content_blog_banner {
	height: 170px;
	width: 570px;
	margin-left: 20px;
	margin-top: 0px;
	background-image: url(images/home_content_blog_banner.png);
	position: absolute;
}
#home_content_r_spacer {
	background-color: #00FF66;
	height: 490px;
	width: 20px;
	margin-left: 940px;
	position: absolute;
}
#home_content_m_spacer {
}
#home_content_t_spacer {
	background-color: #663399;
	position: absolute;
	height: 10px;
	width: 350px;
	margin-left: 590px;
}
#home_content_wordpress {
	background-color: #ffd204;
	width: 570px;
	margin-left: 20px;
	margin-top: 170px;
	position: absolute;
	height: 500px;
}
#home_content_m_spacer {
	height: 480px;
	width: 20px;
	margin-left: 590px;
	margin-top: 10px;
	background-color: #996633;
	position: absolute;
}
#grennan_college_link {
	background-color: #CC6600;
	height: 140px;
	width: 140px;
	margin-left: 610px;
	margin-top: 10px;
	position: absolute;
}
#grennan_college_b_spacer {
	background-color: #0066CC;
	height: 20px;
	width: 140px;
	margin-top: 150px;
	margin-left: 610px;
	position: absolute;
}
#grennan_college_r_spacer {
	background-color: #003399;
	position: absolute;
	height: 130px;
	width: 20px;
	margin-top: 40px;
	margin-left: 750px;
}
#vec_link {
	background-color: #993366;
	position: absolute;
	height: 130px;
	width: 130px;
	margin-top: 40px;
	margin-left: 770px;
}
#vec_t_spacer {
	background-color: #FF6666;
	height: 30px;
	width: 190px;
	margin-left: 750px;
	margin-top: 10px;
	position: absolute;
}
#facebook_link {
	background-color: #FFCC00;
	height: 65px;
	width: 160px;
	margin-left: 610px;
	position: absolute;
	margin-top: 170px;
}
#facebook_b_spacer {
	background-color: #663333;
	height: 20px;
	width: 160px;
	margin-top: 235px;
	margin-left: 610px;
	position: absolute;
}
#flickr_link {
	background-color: #CC9966;
	height: 60px;
	width: 200px;
	margin-top: 255px;
	margin-left: 610px;
	position: absolute;
}
#flickr_b_spacer {
	height: 20px;
	width: 175px;
	margin-top: 315px;
	margin-left: 610px;
	position: absolute;
	background-color: #660066;
}
#arts_council_link {
	background-color: #FFFF99;
	height: 55px;
	width: 175px;
	margin-top: 335px;
	margin-left: 610px;
	position: absolute;
}
#arts_council_b_spacer {
	background-color: #CC3366;
	height: 20px;
	width: 175px;
	margin-top: 390px;
	margin-left: 610px;
	position: absolute;
}
#arts_week_link {
	background-color: #00CCCC;
	height: 80px;
	width: 80px;
	margin-top: 410px;
	margin-left: 610px;
	position: absolute;
}
 
 
/* END Home page CONTENT*/
 
 
#home_footer {
	height: 205px;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-top: -205px; /* negative value of footer height */
	clear:both;
}
#footer_l_spacer {
	height: 180px;
	width: 20px;
	margin-top: 25px;
	position: absolute;
}
#footer_r_spacer {
	height: 180px;
	width: 20px;
	margin-top: 25px;
	margin-left: 940px;
	position: absolute;
}
#footer_b_spacer {
	height: 10px;
	width: 920px;
	margin-top: 195px;
	margin-left: 20px;
	position: absolute;
}
#home_footer_blog_spacer {
	height: 25px;
	width: 960px;
	position: absolute;
	background-image: url(images/home_top_of_footer.png);
}
#footer_logos {
	height: 170px;
	width: 920px;
	position: absolute;
	margin-top: 25px;
	margin-left: 20px;
	background-image: url(images/footer_logos.png);
}
#footer_bottom_of_logos {
	height: 20px;
	width: 460px;
	position: absolute;
	margin-top: 160px;
	margin-left: 20px;
	background-image: url(images/footer_left_of_links.gif);
}
#footer_text_links {
	height: 20px;
	width: 460px;
	position: absolute;
	margin-top: 160px;
	margin-left: 480px;
	background-image: url(images/footer_text_links.gif);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #a6a69a;
	font-weight: bold;
	vertical-align: middle;
	line-height: 22px;
}
a.textlinks { 
	color: #a6a699; 
	text-decoration: none;
}
a.textlinks:hover {
	color: #FFFFFF;
	text-decoration: none;
}
a.wblink {
	color: #d9d9d9;
	text-decoration: none;
}
a.wblink:hover {
	color: #7f95c6;
}
 
#footer_copyright {
	height: 15px;
	width: 755px;
	position: absolute;
	margin-top: 180px;
	margin-left: 20px;
	background-image: url(images/footer_copyright.png);
}
#footer_wb_link {
	height: 15px;
	width: 165px;
	position: absolute;
	margin-top: 180px;
	margin-left: 775px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #d9d9d9;
}
 
 
/* END home page exclus*/
 
 
-->
</style>
 
 
 
</head>
 
<body>
<div id="wrap">
 
	<div id="main">
 
			<div id="header">
 
            	<div id="header_l_sp"></div>
                <div id="header_r_sp"></div>
            	<div id="header_t_sp"></div>
            	<div id="header_logo"></div>
                <div id="header_big_spacer"></div>
 
                <div id="header_home_link">
                	<header_home_link_roll><a href="http://www.google.com"> 
                    <img src="images/home_link.png" alt="home link" /></a></header_home_link_roll>
              	</div>
 
                <div id="header_student_life_link">
                	<header_student_life_link_roll><a href="http://www.google.com"> 
                    <img src="images/student_life_link.png" alt="student life" /></a></header_student_life_link_roll>
              	</div>
 
                <div id="header_aniv_link">
                	<header_aniv_link_roll><a href="http://www.google.com"> 
                    <img src="images/aniv_link.png" alt="aniversary link" /></a></header_aniv_link_roll>
              	</div>
 
                <div id="header_contact_link">
                	<header_contact_link_roll><a href="http://www.google.com"> 
                    <img src="images/contact_link.png" alt="contact link" /></a></header_contact_link_roll>
              	</div>
 
                <div id="header_app_link">
                	<header_app_link_roll><a href="http://www.google.com"> 
                    <img src="images/app_link.png" alt="application link" /></a></header_app_link_roll>
              	</div>
 
            </div>
 
 
			<div id="home_banner">
            	<div id="home_banner_l_spacer"></div>
                <div id="home_banner_r_spacer"></div>
                <div id="home_banner_b_spacer"></div>
                <div id="home_banner_new_mill_pic"></div>
                <div id="home_banner_t_spacer"></div>
                <div id="banner_il_spacer"></div>
                <div id="banner_ib_spacer"></div>
                <div id="banner_it_spacer"></div>
                <div id="home_banner_content"></div>
                <div id="home_banner_image"></div>
                <div id="home_banner_quotes"></div>
 
                <div id="banner_weaving_link">
                	<banner_weaving_link_roll><a href="http://www.google.com"> 
                    <img src="images/weaving_link_v2.gif" alt="weaving link" /></a></banner_weaving_link_roll>
                </div>
 
                <div id="banner_ceramics_link">
                	<banner_ceramics_link_roll><a href="http://www.google.com"> 
                    <img src="images/ceramics_link_v2.gif" alt="ceramics link" /></a></banner_ceramics_link_roll>
                </div>
 
                <div id="banner_metalcraft_link">
                	<banner_metalcraft_link_roll><a href="http://www.google.com"> 
                    <img src="images/metalcraft_link_v2.gif" alt="metalcraft link" /></a></banner_metalcraft_link_roll>
                </div>
 
                <div id="banner_printmaking_link">
                	<banner_printmaking_link_roll><a href="http://www.google.com"> 
                    <img src="images/printmaking_link_v2.gif" alt="printmaking link" /></a></banner_printmaking_link_roll>
                </div>
 
                <div id="banner_drawing_link">
                	<banner_drawing_link_roll><a href="http://www.google.com"> 
                    <img src="images/drawing_link_v2.gif" alt="drawing link" /></a></banner_drawing_link_roll>
                </div>
 
                <div id="banner_batik_link">
                	<banner_batik_link_roll><a href="http://www.google.com"> 
                    <img src="images/batik_link_v2.gif" alt="batik link" /></a></banner_batik_link_roll>
                </div>
 
 
     		 </div>
 
 
			<div id="home_content">
            	<div id="grennan_college_link"></div>
                <div id="home_content_l_spacer"></div>
                <div id="home_content_r_spacer"></div>
                <div id="home_content_m_spacer"></div>
                <div id="home_content_t_spacer"></div>
                <div id="vec_link"></div>
                <div id="vec_t_spacer"></div>
                <div id="facebook_link"></div>
                <div id="facebook_b_spacer"></div>
                <div id="flickr_link"></div>
                <div id="flickr_b_spacer"></div>
                <div id="arts_council_link"></div>
                <div id="arts_council_b_spacer"></div>
                <div id="arts_week_link"></div>
                <div id="grennan_college_b_spacer"></div>
                <div id="grennan_college_r_spacer"></div>
                <div id="home_content_blog_banner"></div>
                <div id="home_content_wordpress">
        	</div>
 
 
 
 
	</div>
</div>
 
    <div id="home_footer">
   	  <div id="footer_l_spacer"></div>
      <div id="footer_r_spacer"></div>
      <div id="footer_b_spacer"></div>
      <div id="home_footer_blog_spacer"></div>
      <div id="footer_logos"></div>
      <div id="footer_bottom_of_logos"></div>
	  <div id="footer_text_links">
      	<a class="textlinks" a href="http://www.waxbotanical.com">WEAVING</a> <a class="textlinks" a href="http://www.waxbotanical.com">CERAMICS</a> 
      	<a class="textlinks" a href="http://www.waxbotanical.com">METALCRAFT</a> <a class="textlinks" a href="http://www.waxbotanical.com">PRINTMAKING</a> 
      	<a class="textlinks" a href="http://www.waxbotanical.com">DRAWING</a> <a class="textlinks" a href="http://www.waxbotanical.com">BATIK</a> 
     	<a class="textlinks" a href="http://www.waxbotanical.com">CONTACT</a> <a class="textlinks" a href="http://www.waxbotanical.com">APP</a> 
      	<a class="textlinks" a href="http://www.waxbotanical.com">STU.LIFE</a></div>
      <div id="footer_copyright"></div>
      <div id="footer_wb_link">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;site design by <a class="wblink" a href="http://www.waxbotanical.com">wax botanical</a></div>
	</div>
 
 
 
</body>
</html>