Jump to content

IE Rendering Issue (Centering File Input Field with CSS)


TrekkieTechie

Recommended Posts

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 by TrekkieTechie
Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...