Jump to content
Latest Mentoring Zoom Meetings uploaded - June 25 2025

IE Rendering Issue (Centering File Input Field with CSS)

TrekkieTechie

By TrekkieTechie
in CSS

 Share

Recommended Posts

TrekkieTechie Newbie

TrekkieTechie

Posted
Posted (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 by TrekkieTechie
Wickham Newbie

Wickham

Posted
Posted (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 by Wickham
TrekkieTechie Newbie

TrekkieTechie

Posted
  • Author
Posted

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.

TrekkieTechie Newbie

TrekkieTechie

Posted
  • Author
Posted

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.

newseed Newbie

newseed

Posted
Posted

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.

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...
×
 Share
Go to topic listing
×
×
  • Create New...