SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs shifted in container

    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.)

    By the way I have to remove the doctype since the forums does not allow me to post links. I'm using strict.dtd:

    Please help - I'm really stumped. Thanks in advance.

    - jon




    <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;">&nbsp;</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;">&nbsp;</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>

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whenever you absolutely position something, always specify both x and y coordinates where it is to be positioned, so browsers don't have to guess. The parent element you want these positioned relative to should also get a relative position to provide the reference. Also, IE6 won't let you set the height of something less than the current font size unless you hide the overflow :
    Code:
    <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;">&nbsp;</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; position:relative;">
    										<div style="background-color: white; width: 100px; height: 12px; float:left">
    											<div style="position: absolute; width:100px; height: 12px; left: 1px; top: 1px;">
    												<div style="width: 100px; height: 4px; background-color: rgb(224, 224, 224); overflow: hidden;"></div>
    												<div style="width: 100px; height: 4px; background-color: rgb(208, 208, 208); overflow: hidden;"></div>
    												<div style="width: 100px; height: 4px; background-color: rgb(192, 192, 192); overflow: hidden;"></div>
    											</div>
    											<div style="width: 100px; height: 12px; font-size: 11px; text-align: center; position: absolute; left: 1px; top: 1px;">100%</div>
    										</div>
    									</div>
    								</div>
    								<div style="float: left;">&nbsp;</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>
    Note that the styling would be better off NOT being inline, but at least within a css section of the page head, or better still, in an external file.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •