TrekkieTechie Posted April 5, 2009 Report Share Posted April 5, 2009 (edited) If you open this link in Firefox, everything looks good. if you open it in Internet Explorer, the file input fields are all off to the left, as though they're (almost) being centered on the left border of their container instead of the center of the page. Does anyone have any ideas as to why? My HTML validates as 4.01 Strict, and my stylesheet validates as CSS 2.1 Edited April 5, 2009 by TrekkieTechie Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 5, 2009 Report Share Posted April 5, 2009 (edited) I've got a fix for it:- Put this conditional comment at the end of the head section, just before the closing tag:- and then put this class="inputbox" in all the input boxes like this (I've only shown one here):- Image 1 I haven't found the real cause, but the above only affects IE which was showing the input box too far to the left. Edit; I've just noticed that it already has one class, so a more correct solution is to put them together:- Image 1 name="filename1" id="filename1"> Edited April 5, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
TrekkieTechie Posted April 5, 2009 Author Report Share Posted April 5, 2009 Thanks Wickham. I actually already worked out a version using an IE conditional statement, but was hoping someone might have a bright idea as to why the file input in particular is misbehaving. I'm doubly irritated because it was all perfect, but while troubleshooting an unrelated issue I had to move the file inputs to a different div. Turned out the issue wasn't placement, so I tried to move them back, and no dice -- I've been kicking myself for not saving a backup of the original version. Oh well. Quote Link to comment Share on other sites More sharing options...
newseed Posted April 5, 2009 Report Share Posted April 5, 2009 I am not sure why you want to use all those position: abolute. You can certainly do without them and still have the same indenticaly layout (and centered). Quote Link to comment Share on other sites More sharing options...
TrekkieTechie Posted April 5, 2009 Author Report Share Posted April 5, 2009 The absolute positioning was necessary in order to specify exactly how far from the top of the page each div would be. Certainly if there is a better way I would be delighted to hear it, but I'm relatively new at CSS and don't know the ins and outs. Quote Link to comment Share on other sites More sharing options...
newseed Posted April 6, 2009 Report Share Posted April 6, 2009 Below is the quick clean up of your code. Just copy and paste into a new page for each HTML and CSS and save it and then test it. HTML: Colorplak FTP Utility <br /> function checkForm(sourceForm) {<br /> if(validator.testRequired('upload') != 1) return false;<br /> var sform = sourceForm;<br /> meterframe.load('mFrame', 'https://' + document.upload.myserver.value + '/meter/layout.jsp?meter='+ document.upload.meterid.value);<br /> return sform.submit();<br /> }<br /> meterframe = new MeterFrame();<br /> validator = new FormValidator();<br /> validator.addRequired('filename1', "File 1 ");<br /> validator.addRequired('from', "From email ");<br /> File Upload Utility Order Number: NULL Your Information Shipping Address Image 1 Style... Lite Float Hi-Lite Classic Canvas Giclee Photo Paper (Print only) Laminate & Mount (1/4" Wood) Image 2 Style... Lite Float Hi-Lite Classic Canvas Giclee Photo Paper (Print only) Laminate & Mount (1/4" Wood) Image 3 Style... Lite Float Hi-Lite Classic Canvas Giclee Photo Paper (Print only) Laminate & Mount (1/4" Wood) Image 4 Style... Lite Float Hi-Lite Classic Canvas Giclee Photo Paper (Print only) Laminate & Mount (1/4" Wood) Image 5 Style... Lite Float Hi-Lite Classic Canvas Giclee Photo Paper (Print only) Laminate & Mount (1/4" Wood) Please note: When you click 'Submit', it may take a long time for your file(s) to upload, anywhere from a few minutes to half an hour, depending on the size of your file(s) and your internet connection speed. If your browser's Loading indicator is spinning and you see "Sending request..." in the lower left of your window, the upload is working. Do not click away from this page until you see a confirmation screen with the name and size of your file(s). You will receive a confirmation email when we have received your order. Thank you for using our upload utility! <br /> function randomString() {<br /> var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";<br /> var string_length = 24;<br /> var randomstring = '';<br /> for (var i=0; i<string_length; i++) {<br /> var rnum = Math.floor(Math.random() * chars.length);<br /> randomstring += chars.substring(rnum,rnum+1);<br /> }<br /> document.ftp.meterid.value = randomstring;<br /> }<br /> var rand = 2 + Math.floor(Math.random() * 14);<br /> randomString();<br /> document.ftp.myserver.value = 'www' + rand +'.sendthisfile.com';<br /> document.ftp.action = 'https://www' + rand + '.sendthisfile.com/api/transfer/branded.html';<br /> //alert(document.upload.meterid.value);<br /> //alert(document.upload.myserver.value);<br /> CSS: a:link { color: #e3b406; text-decoration: underline; } a:active { color: #9c5100; text-decoration: underline; } a:visited { color: #9c5100; text-decoration: underline; } a:hover { color: #9c5100; text-decoration: none; } #pageHolder { width: 600px; /*height: 1750px; REMOVED*/ margin: 0 auto; border-width: 1px; border-color: #000000; border-style: solid; background-color: #ffffff; /*z-index: 0; REMOVED*/ } #header { width: 500px; padding: 10px 0; /*ADDED*/ margin: 0 auto; /*ADDED*/ /*position: absolute; REMOVED*/ /*top: 25px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #inside-wrap { /*ADDED*/ width: 500px; /*ADDED*/ margin: 0 auto; /*ADDED*/ } #back { /*REMOVED ALL STYLES - you do not need this CSS*/ } #info { /*position: absolute; REMOVED*/ /*top: 185px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #cdcdcd; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #back1 { /*REMOVED ALL STYLES - you do not need this CSS*/ } #order1 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 480px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #e28a8d; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #back2 { /*REMOVED ALL STYLES - you do not need this CSS*/ } #order2 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 695px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #f0d879; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #back3 { /*REMOVED ALL STYLES - you do not need this CSS*/ } #order3 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 910px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #90c0e3; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #back4 { /*REMOVED ALL STYLES - you do not need this CSS*/ } #order4 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 1125px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #7ec196; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #back5 { /*REMOVED ALL STYLES - you do not need this CSS*/ } #order5 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 1340px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ border-width: 1px; /*ADDED*/ border-color: #000000; /*ADDED*/ border-style: solid; /*ADDED*/ background-color: #e29bc0; /*ADDED*/ margin: 10px 0; /*ADDED*/ } #file1 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 405px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #file2 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 620px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #file3 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 835px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #file4 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 1050px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #file5 { /*width: 500px; REMOVED*/ /*position: absolute; REMOVED*/ /*top: 1265px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } #footer { width: 500px; margin: 0 auto;/*ADDED*/ /*position: absolute; REMOVED*/ /*top: 1475px; REMOVED*/ /*left: 50%; REMOVED*/ /*margin-left: -250px; REMOVED*/ /*z-index: 2; REMOVED*/ } input { margin-top: 5px; margin-bottom: 5px; } select { margin-top: 5px; margin-bottom: 5px; } body { background-color: #c4c4c4; text-align: center; margin: 0 auto: /*ADDED*/ } p { font-family: sans-serif; font-weight: normal; font-size: 12px; margin: 10px; text-align: center; } p.title { font-size: 18px; font-weight: bold; } p.order { font-family: serif; margin-top: -7px; } p.subtitle { font-size: 14px; font-weight: bold; } You may need to tweak it but the code is using NO position: absolute. The centering method is done by using margin: auto. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.