| css sprites displayed in firefox but not in internet explorer
|
shanki
msg:4459748 | 5:31 am on May 31, 2012 (gmt 0) |
Hi everbody. Can any one please help me. I'm new to css. Here i placed the css image sprites corectly. but it is visible only in firefox. but it doesnot displayed in IE browser. I want to know why the problem is coming and, how to overcome this? Thankyou. Kindly answer me.
<!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" />
<title>Untitled Document</title>
<style type="text/css">
div.background {
background:url(bg.jpg) repeat;
height:625px;
margin:0 auto;
padding:15px 5px 10px 15px;
width:550px;
}
#nav li a {
position:absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 38px;
background: url(sprites.jpg) no-repeat;
overflow: hidden;
}
#nav li {
float: left;
}
li#plus a {
left: 0;
width: 36px;
background-position: 0 0;
}
li#twitter a {
left: 36px;
width: 36px;
background-position: -36px 0;
}
li#gmail a {
left:72px;
width:41px;
background-position:-72px 0;
}
li#orkut a {
left:113px;
width:41px;
background-position:-113px 0;
}
li#rss a {
left:154px;
width:40px;
background-position:-154px 0;
}
li#fb a {
left:194px;
width:41px;
background-position:-194px 0;
}
li#yahoo a {
left:235px;
width:38px;
background-position:-235px 0;
}
li#plus a:hover {
background-position:0 -36px;
}
li#twitter a:hover {
background-position:-36px -36px;
}
li#gmail a:hover {
background-position:-72px -36px;
}
li#orkut a:hover {
background-position:-113px -36px;
}
li#rss a:hover {
background-position:-154px -36px;
}
li#fb a:hover {
background-position:-194px -36px;
}
li#yahoo a:hover {
background-position:-235px -36px;
}
#leftcolumn {
width:200px;
float:left;
}
#rightcolumn {
width:300px;
float:right;
}
#leftcolumn {
width:200px;
float:left;
}
#rightcolumn {
width:300px;
float:right;
}
#nav {
background: url(sprites.jpg);
margin: 0;
position:absolute;
padding: 0;
top:43px;
}
</style>
</head>
<body>
<div class="background">
<div id="container">
<div id="#leftcolumn">
<h2>DUMMY FORM</h2></div>
<div id="rightcolumn"><ul id="nav">
<li id="plus"><a href="https://example.com"></a></li>
<li id="twitter"><a href="https://example.com"></a></li>
<li id="gmail"><a href="https://example.com"></a></li>
<li id="orkut"><a href="https://example.com"></a></li>
<li id="rss"><a href="https://example.com"></a></li>
<li id="fb"><a href="https://example.com"></a></li>
<li id="yahoo"><a href="https://example.com"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html> [edited by: alt131 at 2:10 pm (utc) on Jun 8, 2012]
[edit reason] Code tidy [/edit]
|
alt131
msg:4462962 | 2:16 pm on Jun 8, 2012 (gmt 0) |
Hi shanki and welcome to WebmasterWorld,
Thanks for the code sample - made it easy to test. Unfortunately the images seem to be working as expected - can you tell us which version of ie is causing the trouble? Also note this error
<div id="#leftcolumn">
means the style won't be applied.
|
|
|
