<div id="inputbar"> <ul style="list-style:none; width:252px; border:1px solid lightgray; font-size: .9em; margin: 0px; padding: 0px;"> <li style='background-color:lightgray; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/THE_LAST_SONG/movie_clip/P00547862.htm'>The Last Song</a></span><span style='float:right; padding-right:10px;'>8/17/2010</span></li> <li style='background-color:white; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/FURRY_VENGEANCE/movie_clip/P00873880.htm'>Furry Vengeance</a></span><span style='float:right; padding-right:10px;'>8/17/2010</span></li> <li style='background-color:lightgray; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/CEMETERY_JUNCTION/movie_clip/P00448470.htm'>Cemetery Junction</a></span><span style='float:right; padding-right:10px;'>8/17/2010</span></li> <li style='background-color:white; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/THE_GOOD_THE_BAD_THE_WEIRD/movie_clip/P00222007.htm'>The Good, The Bad, T...</a></span><span style='float:right; padding-right:10px;'>8/17/2010</span></li> <li style='background-color:lightgray; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/DATE_NIGHT/movie_clip/P00317238.htm'>Date Night</a></span><span style='float:right; padding-right:10px;'>8/10/2010</span></li> <li style='background-color:white; display: block; width:252px; height:18.25px; padding-top:18.25px;'><span style='margin-left: 15px;'><a style='text-decoration:none; color:#000' href='http://www.videodetective.com/movie_trailer/THE_JONESES/movie_clip/P00977729.htm'>The Joneses</a></span><span style='float:right; padding-right:10px;'>8/10/2010</span></li> </ul> </div> HTML: I've tried everything I could think of but still get the issue, the title should be on the left, and the date on the right. But appears wrong. The date is lowered from some reason, and the height seems to have doubled. If you look at it in FF it displays correctly
Try this instead: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test</title> <style type="text/css"> <!-- ul { border: 1px solid #CCCCCC; margin: 0px; padding: 0px; list-style-type: none; width: 252px; font-size: 0.9em; } .odd { background-color: #CCCCCC; display: block; width: 252px; height: 18.25px; padding-top: 18.25px; margin-left: 0px; color: rgb(0, 0, 0); } .even { background-color: #FFFFFF; display: block; width: 252px; height: 18.25px; padding-top: 18.25px; margin-left: 0px; color: rgb(0, 0, 0); } a{ width: 142px; margin-left: 15px; color: rgb(0, 0, 0); float: left; list-style-type: none; text-decoration: none; } .datepos { float: right; width: 70px; } --> </style> </head> <body> <br> <div id="inputbar"> <ul> <li class="odd"><a href="http://www.videodetective.com/movie_trailer/THE_LAST_SONG/movie_clip/P00547862.htm">The Last Song</a><span class="datepos">8/17/2010</span></li> <li class="even"><a href="http://www.videodetective.com/movie_trailer/FURRY_VENGEANCE/movie_clip/P00873880.htm">Furry Vengeance</a><span class="datepos">8/17/2010</span></li> <li class="odd"><a href="http://www.videodetective.com/movie_trailer/CEMETERY_JUNCTION/movie_clip/P00448470.htm">Cemetery Junction</a><span class="datepos">8/17/2010</span></li> <li class="even"><a href="http://www.videodetective.com/movie_trailer/THE_GOOD_THE_BAD_THE_WEIRD/movie_clip/P00222007.htm">The Good, The Bad, T...</a><span class="datepos">8/17/2010</span></li> <li class="odd"><a href="http://www.videodetective.com/movie_trailer/DATE_NIGHT/movie_clip/P00317238.htm">Date Night</a><span class="datepos">8/17/2010</span></li> <li class="even"><a href="http://www.videodetective.com/movie_trailer/THE_JONESES/movie_clip/P00977729.htm">The Joneses</a><span class="datepos">8/17/2010</span></li> </ul> </div> </body> </html> HTML: Simpler, faster and more coherent.