please help, background on text not working in IE

Discussion in 'CSS' started by JSweazy, Oct 28, 2008.

0
  1. #1
    Everything works fine in FF but when im in IE it dont work.

    see it here:

    http://www.swazedesign.com/test.html

    here is my code:
    
<!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>

<title>AliveOSU | Friday Nights</title>

<style>
body {
margin: 0px;
padding: 0px;
background: #000000 ;

}

#clear {
clear: both;
}

#container {
width: 729px;
margin: 0 auto;

}
#wrapper{
width: 729px;
background: url(images/bodybg.png)repeat-y;

}
#header {
float:left;
background: #000000

}
#top {
margin:0px;
width:729px;
height:160px;
background: url(images/header.png) no-repeat;

}

#top #text {
padding: 90px 100px 0px 100px;
}

#top #text h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:28px;
font-variant:small-caps;
letter-spacing: 1px;
color: #660000;
}

#footer {
padding-top:0px;
}

#content {
padding-top:0px;
padding-bottom: 0px;
margin: 0px;


}

#content #text {
margin-top: -10px ;
padding-left: 100px;
padding-right: 100px;
padding-top:0.1px;
padding-bottom: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}

#nav {
float: right;
}

.friday {
float: right;
display: block;
width:36px;
height: 158px;
background: url(images/friday2.png) bottom;
}

.friday:hover{
background-position: top;
}

.friday span{
display: none;
}

.events {
float: right;
display: block;
width:34px;
height: 158px;
background: url(images/events2.png) bottom;
}

.events:hover{
background-position: top;
}

.events span{
display: none;
}

.who {
float: right;
display: block;
width:35px;
height: 158px;
background: url(images/who2.png) bottom;
}

.who:hover{
background-position: top;
}

.who span{
display: none;
}


</style>

</head>

<body>
<div id="container">
    
    <div id="header">
    	<img src="images/logo.png" />
    	
        
    </div><!--header-->
    
       
    <div id="nav">
        	<a class="friday" href="#"><span>Friday Nights</span></a>
            <a class="events" href="#"><span>Upcoming Events</span></a>
            <a class="who" href="#"><span>Who We Are</span></a>
    		
  	</div><!--nav-->
        
    <div id="clear"></div><!--clear-->
    <div id="wrapper">
    <div id="top">
      	
      <div id="text">
        
       	<h1>What Is Alive?</h1>
        
        </div><!--text-->
       
        
    </div><!--top-->
        
      
    <div id="content">
    
   	  <div id="text">
        
        <p> Alive is our large Friday night meeting held in Campbell Hall at 7:30pm. Every Friday we join together for a time of passionate worship and relevant teachings. We also seek to cultivate meaningful friendships through fellowship and free refreshments after the meeting. Alive is an uplifting, interactive experience that all are welcome to attend!</p>
	       
        </div>
        
    </div><!--body-->
    
    <div id="footer">
    
	    <img src="images/footer.png" />
        
    </div><!--footer-->
    </div><!--wrapper-->
    
</div><!--container-->
</body>
</html>
    Code (markup):
     
    JSweazy, Oct 28, 2008 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am on a Mac so I cannot view this, however I see you are using png's. IE hates png's. If it is anything to do with transparency change them all to gif's and wala, it will work.
     
    LeetPCUser, Oct 30, 2008 IP