I have this progress bar on an upload page that shows perfectly in Firefox (2.0.0.5), but not in Internet Explorer (6.0). I have been playing with it for hours, but cannot get it to work in both browsers. The two images attached to this thread show how it shows on my computer. The test.html is the page in question. Can anyone help me with this? +rep for everyone that tries to help me
Methinks you are overthinking your solutions here - First you should probably add a valid doctype and header so you aren't trying to hack around IE's quirks mode... then I'd implement some class reduction and put the ID's on the elements that actually are going to be manipulated by your scripts (I'm assuming this is for a Ajax applet)... move the styling of the table for the most part into the CSS, null the margins and padding so you have a consistant baseline, clean up the indenting, remove the classes from objects that don't need them, use a negative margin to move the block element over the 'uploading' text, use margin:auto instead of align="center" (again moving presentation out of the CSS) I'm assuming the table is there to make your columns, if it is not, I'd delete the table outright. Try this out, should work cross browser to IE 5.5, 6, 7, Safari, Opera and FF. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } table { border-collapse:collapse; } .columns { width:750px; } .upload-queue { list-style:none; width:90%; font:normal 90%/120% serif; margin:0 auto; } .upload-queue li { background:url(images/upload.png) 0 5px no-repeat; padding:5px 0; text-align:center; } .upload-queue .filename { font-weight:bold; } .upload-queue .filesize { color:#888; margin-left:1em; } .upload-queue div { margin:3px 3px; line-height:1.2em; color:#fff; background:#ddd; border:1px inset #ddd; text-align:left; } .upload-queue div span { display:block; text-align:center; } .upload-queue div div { margin:-1.2em 0 0; position:relative; text-align:center; background:#81B466; border:none; } .upload-queue a { width:16px; height:16px; background:#CCC url(images/delete.png) top left no-repeat; text-decoration:none; float:right; } </style> </head><body> <table class="columns"> <tr> <td class="middle"> <form enctype="multipart/form-data" id="upload" method="post" action="upload.php" target="_blank"> <ul class="upload-queue"> <li> <a title="Remove from queue" href="javascript:void(0)"></a> <span class="filename">filename</span> <span class="filesize" title="87986 byte">~88 kb</span> <div> <span>Uploading</span> <div id="upload_1" style="width: 52%;">52%</div> </div> </li> <li> <a title="Remove from queue" href="javascript:void(0)"></a> <span class="filename">filename</span> <span class="filesize" title="280011 byte">~281 kb</span> <div> <span>Uploading</span> <div id="upload_2" style="width: 89%;">89%</div> </div> </li> <li> <a title="Remove from queue" href="javascript:void(0)"></a> <span class="filename">filename</span> <span class="filesize" title="1192387 byte">~1.2 mb</span> <div> <span>Uploading</span> <div id="upload_3" style="width: 19%;">19%</div> </div> </li> </ul> <div class="note" id="upload-status"> <a href="javascript:void(null);"></a> </div> </form> </td> </tr> </table> </body></html> Code (markup): Hope this helps... I usually don't trust absolute positioning for much of anything, preferring instead to manipulate flow. All those aligns/no-aligns are annoying as is the extra span around 'uploading', but that's IE for you.