Member Avatar for levsha

I have four buttons in an HTML form.
Here is the HTML:

<tr>	
				<td>
					<div class="fileinputs">
					<input type="submit" name="submit" class="submit" />
					</div>
					<div class="fileinputs">
							<input type="file" class="file" name="uploadedfile" />
						<div class="fakefile">
								<img src="uf_btt.png" />
						</div>
					</div>
					<div class="fileinputs">	
					<input type="reset" class="reset" />
					</div>
					<div class="fileinputs">
					<input type="button" class="print" onclick="window.print()" /> 
					</div>
</td>
</tr>

Here is the CSS:

.submit {
	background: transparent;
	background-image: url(submit_btt.png);
	border: none;
	padding: 0;
	margin: 0;
	text-indent: -9999px;
}

.print {
	background: transparent;
	background-image: url(print_btt.png);
	border: none;
	padding: 0;
	margin: 0;
	text-indent: -9999px;
}

.reset {
	background: transparent;
	background-image: url(reset_btt.png);
	border: none;
	padding: 0;
	margin: 0;
	text-indent: -9999px;
}

input[type=submit]
{
    width: 119px;
	height: 47px;
}

input[type=button]
{
    width: 119px;
	height: 47px;
}

input[type=reset]
{
    width: 119px;
	height: 47px;
}

input[type=file]
{
    width: 119px;
	height: 47px;
}

div.fileinputs {
	position: relative;
	float: left;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

It works fine in all browsers, and only in IE you can see just one button ('file') on the screen instead of four.
Any insight, please?

Thank you!

  • 3 Contributors
  • 3 Replies
  • 470 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by levsha

Dani AI

Generated

Short addendum that ties together the useful hints already in this thread (thanks to and ) and gives concrete, practical fixes for anyone hitting the same problem years later.

Older Internet Explorer releases are the usual culprit: IE6 does not support CSS attribute selectors at all, and IE7/8 only support them in standards mode and with known bugs — so rules that target inputs by their type may simply never apply. (quirksmode.org)

Practical fixes, in order of simplicity and reliability:

  • Use class or id selectors for every button and put width/height/background rules on those classes (this avoids relying on attribute selectors in legacy IE).
  • Make sure the page is rendered in standards mode (valid DOCTYPE at the top and no Compatibility View). Use IE’s F12 tools to check the Document Mode/Compatibility setting or the X-UA-Compatible header if needed. (learn.microsoft.com)
  • If you must keep modern selectors, include a small polyfill such as Selectivizr to add attribute/pseudo-class selector support to IE6–8 (it requires a JS library and standards mode). (selectivizr.com)

A couple of notes about the file-input overlay trick you already used: file controls are intentionally constrained by browsers for security and vary a lot between engines. Hiding the native field and overlaying a styled element usually works, but IE can require specific positioning (right:0) and large font-size to capture clicks reliably — using an associated <label> that targets the file input is often the most robust cross-browser approach. (smashingmagazine.com)

Debug checklist if only one control shows up in IE:

  • Confirm DOCTYPE / document mode.
  • Inspect the element in IE dev tools to see computed width/height and whether the intended CSS rule matched.
  • Move the width/height rules to class-based selectors or add an IE-only stylesheet via conditional comments while you maintain the modern selectors for up-to-date browsers.

This keeps the markup simple, ensures predictable visuals in old IE, and leaves modern selectors for browsers that support them.

Recommended Answers

All 3 Replies

Member Avatar for scrappedcola

Do you have a doc type set? Meaning do you have something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

as the first line of your html file? When I added it to my file I saw all three buttons.

Edited by scrappedcola because: n/a
Member Avatar for ko ko

Use 'class' or 'id' instead of 'attribute' (input[type]). This may ignore in some of IE version.

Member Avatar for levsha

Do you have a doc type set? Meaning do you have something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

as the first line of your html file? When I added it to my file I saw all three buttons.

Sorry for the delayed response - the notification of this message hasn't come to my email.

Yes, I do have it all set in my file.
The resolution of the problem is this:
http://www.daniweb.com/forums/post1291891.html#post1291891

It's just IE. It doesn't understand things like this:
input[type=submit]

But thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.