overlapping divs
Hi everyone,
I've been trying to fix the following problem for the whole day and I'm totally lost since I don't know CSS well enough. The page is appended below. If you view it in FF it works. But if you open it in IE, you will see that some of the divs are shifting to the right.
Basically, the page is part of a file upload. (I've cleaned it up so that it's easier to read.) In a td, there's a series of 8 forms, each for uploading a file. I've included only one such form (they all have the same problem.) For each form, there's a container div that contains the file input, the upload status bar, and status message. The problem is the status bar.
The status bar is contained in a div. This div contains a div for border (in black) and the actual bar and a percent display. The bar and percent divs overlap inside the border div. The bar itself is actually a vertical stack of three divs (of different shades of grey). Both the bar and percent are shifted to the right in IE. However they are rendered correctly in FF.
(I've added some background color just to see the different parts.)
Please help - I'm really stumped. Thanks in advance.
- jon
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="position: absolute; left: 0px; top: 0px; height: 300px; width: 700px;">
<table cellspacing="0" cellpadding="0" border="2" align="left">
<tbody>
<tr valign="top">
<td width="650px" align="left" colspan="2">
<br/>
<br/>
<div style="z-index: 9999;">
<form>
<input type="hidden" value="" name="user"/>
<div style="background-color: red;">
<div style="float: left;">
<input type="file" size="20" style="color: black;"/>
</div>
<div style="width: 0px; height: 14px; float: left;"></div>
<div style="float: left;"> </div>
<div style="width: 154px; height: 20px; background-color: green; text-align: center; float: left; color: black;">
<div style="padding: 1px; background-color: black; width: 100px; height: 12px; float:left">
<div style="background-color: white; width: 100px; height: 12px; float:left">
<div style="position: absolute; width:100px; height: 12px;">
<div style="width: 100px; height: 4px; background-color: rgb(224, 224, 224);"></div>
<div style="width: 100px; height: 4px; background-color: rgb(208, 208, 208);"></div>
<div style="width: 100px; height: 4px; background-color: rgb(192, 192, 192);"></div>
</div>
<div style="width: 100px; height: 12px; font-size: 11px; text-align: center; position: absolute;">100%</div>
</div>
</div>
</div>
<div style="float: left;"> </div>
<div style="width: 200px; height: 14px; font-size:12px; background-color: blue; text-align: left; float: left; color: white;">Completed. 200kb.</div>
</div>
<div style="clear: both;"><!-- --></div>
</form>
</div>
</td>
</tr>
<tr>
</tr>
<tr valign="top">
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks