2 replies [Last post]
Grem
Grem's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2012-06-05
Posts: 2
Points: 3

Hey, I'm New to CSS and need some help.

My footer and nav do not display properly in IE8. I'm not sure what I should do to fix since it looks fine in chrome, firefox, and safari.

Any help would be greatly appreciated.

#page {
	   width:960px;
	   margin:0 auto;
	   border:solid;
	   border-color:black;
 }
 
 .pagetop {
 	   	margin:0 auto;
	    height:75px;
  		}
 
 #logo {
 
       float:left;
       font-size:3em;
       border:solid;
       border-width:1px;
       border-color:red;
       margin-top:20px;
       margin-left:5px;
 
  }
 
#ads {
      float:right;
      margin-top:20px;
      margin-right:50%;
      border:solid;
      border-width:1px;
      border-color:red;
      font-size:3em;
 
 } 
 
 
.topnav {
    	 width:100%;
    	 height:40px;
    	 clear:both;
 
		 }
 
.topnav ul {    
    	   	background: #000000;
    		padding:0;
    		font-size:14px;
    		list-style-type: none;
    		overflow:hidden;
 
			}
 
nav a {
    text-decoration:none;
	color:#ffffff;
}
 
nav ul li {
       	   text-align: center;
    	   width: 15%;
    	   float:left;
    	   padding:7px 0;
 
    	    }
 
nav ul li:active{
 
				 }
 
nav a:hover   {
       			   color:red;
    			   cursor:pointer;
				   }
 
.social_links{
			  width:100%;
    		  height:20px;
			  }
 
 .social_links ul {    
    padding:0;
    font-size:14px;
    list-style-type: none;
    overflow:hidden;
	margin-top:0;
	border-bottom:solid;
	border-width:3px;
	border-color:black;
	}	
 
.social_links ul li {
    text-align: center;
    width: 10%;
    float:left;
    padding:7px 0;
	color:red;
 
	}	   
 
.news {
 
       padding-left:5px;
       background-color:white;
	   width:700px;
	   border:solid;
	   border-color:#000000;
	   border-width:2px;
	   margin:auto;
	   margin-bottom:5px;
}
 
.featured {
		   width:100%;
		   height:600px;
		   text-align:center;
		   margin-top:50px;
 }
 
 .featured_artist {
 				   width:40%;
				   height:500px;
				   border:solid;
				   border-color:red;
				   border-width:1px;
				   float:left;
				   margin-left:20px;
  }
 
  .featured_shop {
 				   width:40%;
				   height:500px;
				   border:solid;
				   border-color:red;
				   border-width:1px;
				   float:right;
				   margin-right:20px;
  }
 
 footer {
          width:100%;
          height:100px;
          background-color:#000000;
          margin-top:50px;
          border-top:solid;
          border-width:3px;
          border-color:red;
 
   }
 
footer ul {
             padding:0;
    		font-size:12px;
    		list-style-type: none;
    		overflow:hidden;
 
   }
 
footer ul li {
           color:#ffffff;
           text-align: center;
    	   width: 20%;
    	   float:left;
    	   padding:7px 0;
           margin-top:50px;
 
     }

<!DOCTYPE html>
<html lang="en">
 
<head>
<title>Share Tattoos</title>
 
 <link rel="stylesheet" href="styles.css" />
</head>
  <body>
 
  <div id="page">
 
 
  <div class="pagetop">
  	   <div id="logo">
  	   Logo
  	   </div>
 
	   <div id="ads">
	   Ads
	   </div>
 </div>	   
 
 
 
  <nav class="topnav">
  	   <ul>
	     <li><a href="#">News</a></li>
	   	 <li><a href="#">Artist</a></li>
		 <li><a href="#">Shops</a></li>
		 <li><a href="#">Tattoos</a></li>
		 <li><a href="#">Forums</a></li>
		 <li><a href="#">Contact</a></li>
  </nav>
 
  <div class="social_links">
  	   <ul>
	   	   <li>Twitter</li>
		   <li>Facebook</li>
		   <li>Google+</li>
	   </ul>
  </div>
 
 
  <div class="featured">
  <h1>Check These Out!</h1>
  			<div class="featured_artist">
				 <h1>Featured Artist</h1>
			  </div>
 
			  <div class="featured_shop">
			  	   <h1>Featured Shop</h1>
			    </div>
 
  </div>
 
 
 
 
		<div class="news">
			 		   <h2>News</h2>
			 		   Some news can go here.
  	   				  <p>more news</p>
					  <p>more news</p>
  </div>		
 
 
 
  </body>
 
  <footer>
  		  <ul>
	   	   <li><a href="#">Contact Us</a></li>
		   <li><a href="#">Terms of Use</a></li>
		   <li><a href="#">Privacy Policy</a></li>
		   <li>&copy; 2012 Share Tattoos, Inc. All rights reserved</li>
	     </ul>
 
  </footer>
 </div>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Grem, IE8 will have

Hi Grem,
IE8 will have trouble understanding HTML5 elements such as footer.
Read up on the HTML5 Shiv

Grem
Grem's picture
Offline
newbie
Last seen: 9 years 33 weeks ago
Timezone: GMT-4
Joined: 2012-06-05
Posts: 2
Points: 3

Thanks

Thank you so much!! That small bit of code fixed my problem, incredible! Once again thanks for the help and quick reply Big smile