I have no clue why the css code is acting like this, but take a look at http://www.arcadeprison.com. The site is not functional, but I'm currently modifying the css of a free template I found off the internet. As you see, the "Most Popular" section of my template looks messy, and I don't know how to fix it. Please help! CSS Code: body { background: #90140C url(images/stripes.gif) repeat-x; background-position: 50% 40px; margin: 0; padding: 0; } a { color: #600000; font-weight: bold; text-decoration: none; } a:visited { color: #000; } a:hover { color: #90140C; } img { border: 0; } ul { list-style: none; } h1 { font: normal 1.2em arial, verdana, helvetica, sans-serif; margin: 23px 18px; text-align: left; } h2 { color: #333; font: bold 12px arial, verdana, helvetica, sans-serif; } #nav { text-align: center; width: 100%; background: #000 url(images/nav.gif) repeat-x; margin: 0; padding: 0; height: 40px; overflow: hidden; cursor: default; } #nav li, #nav a { display: inline; color: #fff; text-decoration: none; font: bold 11px verdana, arial, helvetica, sans-serif; height: 40px; line-height: 40px; padding: 13px 15px; margin: 0; } #nav li a { background: transparent url(images/nav.gif) repeat-x; } #nav li a:hover, #nav li#current a { background: transparent url(images/nav.gif) repeat-x; background-position: 0 -40px; } #nav li { padding: 14px 0; } #title { width: 410px; height: 101px; background: transparent url(images/title_background.jpg) no-repeat; line-height: 75px; display: block; margin: 0 auto; margin-top: 66px; text-align: center; font: normal 2.5em/1.8em 'trebuchet ms', georgia, 'lucidia grande'; color: #FE9B27; letter-spacing: 8px; cursor: default; } #wrapper { width: 732px; margin: 0 auto; border: solid 15px #600000; border-bottom: none; background-color: #F3F3F3; height: auto; } #adspace { height: 90px; background-color: #86221B; border-top: 1px solid #CA807C; border-left: 1px solid #CA807C; border-right: 1px solid #CA807C; border-bottom: 1px solid #3E1B19; font: normal 10px/100px verdana, arial, sans-serif; text-align: center; color: #fff; cursor: default; overflow: hidden; } #main { height: 246px; background: #FE8624 url(images/main.gif) repeat-x; border-top: 1px solid #FEC782; border-left: 1px solid #FEB154; border-right: 1px solid #D76C22; border-bottom: 1px solid #783C1C; overflow: hidden; } #main ul { width: 710px; overflow: hidden; margin: 0; padding: 0; margin-left: 15px; } #main ul li { float: left; text-align: center; margin-left: 25px; display: inline; } #main ul li a img { border: 3px solid #fff; } #main ul li a img:hover { border: 3px solid #FEE5C6; } #main ul li h2 { font: bold 11px arial, verdana, helvetica; margin-top: 10px; color: #000; } #content { padding: 2px; font: normal 11px/18px arial, verdana, helvetica, sans-serif; } #content ul { list-style-type: none; padding: 0; margin: 0; } #content li { float: left; padding-top: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 1px; height: 88px; } #boxhead{ margin: 0px; padding: 1px; width: 724px; background-color: #FF6140; border: 1px solid #A61D00; height: 16px; font: bold 14px arial, verdana, helvetica; color: #9E0016 } #box{ background-color: #FFC373; border: 1px solid #FF7600; margin-top: 1px; padding: 2px; } #box1{ float: left; padding: 2px; padding-left: 5px; width: 354px; height: 280px; background-color: #FFC373; border: 1px solid #FF7600; margin-top: 1px; } #box2{ float: right; margin-top: 1px; padding: 2px; width: 357px; background-color: #FFC373; border: 1px solid #FF7600; } #footer { background-color: #000; color: #fff; font: normal 10px/25px arial, verdana, helvetica, sans-serif; color: #999; text-align: center; border-top: 50px solid #F3F3F3; clear: both; } #footer a { color: #ccc; } Code (markup): HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dark Shine</title> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- navigation --> <ul id="nav"> <li id="current"><a href="#">Home</a></li> <li><a href="#">All</a></li> <li><a href="#">Action</a></li> <li><a href="#">Puzzle</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Driving</a></li> <li><a href="#">Other</a></li> </ul> <!-- main title --> <h1 id="title">ARCADE PRISON</h1> <!-- beginning of actual page --> <div id="wrapper"> <!-- this is the small black bar --> <!-- space for ads --> <div id="adspace"> <script type="text/javascript"><!-- google_ad_client = "pub-0353832934900493"; /* 728x90, created 4/26/10 */ google_ad_slot = "0467083720"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="main"> <h1>Recently Played</h1> <ul> <li> <a href="#"><img src="images/box.jpg" width="105px" height="105px" alt="profile image" /></a> <h2>profile name</h2> </li> <li> <a href="#"><img src="images/box.jpg" width="105px" height="105px" alt="profile image" /></a> <h2>profile name</h2> </li> <li> <a href="#"><img src="images/box.jpg" width="105px" height="105px" alt="profile image" /></a> <h2>profile name</h2> </li> <li> <a href="#"><img src="images/box.jpg" width="105px" height="105px" alt="profile image" /></a> <h2>profile name</h2> </li> <li> <a href="#"><img src="images/box.jpg" width="105px" height="105px" alt="profile image" /></a> <h2>profile name</h2> </li> </ul> </div> <div id="content"> <div id="boxhead">Newest Games</div> <div id="box1"> <ul> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> </ul> </div> <div id="box2"> <script type="text/javascript"><!-- google_ad_client = "pub-0353832934900493"; /* 336x280, created 4/26/10 */ google_ad_slot = "1767695244"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="boxhead">Most Popular</div> <div id="box"> <ul> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> <li><a href="#"><img src="images/box.jpg" width="83px" height="88px" style="border: 2px solid #000000;" /></a></li> </ul> </div> </div> <div id="footer"> <a href="#">Advertise</a> | <a href="#">Link Exchange / 1:1 Traffic Exchange</a> | <a href="#">About Us</a> | <a href="#">Privacy Policy</a> <br /> © 2010-2011 Copyright ArcadePrison.com. All rights reserved.</div> </div> </body> </html> Code (markup):
It all looks the same to me, have you fixed it now? If not, what is the problem you are having exactly?