Member Avatar for levsha

Here is my 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>

And here is my CSS:

div.fileinputs {
        position: relative;
    }
    
    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;
    }

As a result, the buttons are positioned vertically, one below the other. In IE only "Upload File" button is seen.
I need all the buttons to be positioned horizontally, one next to the other, and look consistent in all browsers.
How do I obtain that?
Thank you!

  • 2 Contributors
  • 3 Replies
  • 4K Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by prixat

Dani AI

Generated

Good call on floating the wrappers to line things up. If you prefer not to deal with float clearing, a simple horizontal layout is to make each control an inline-block and space them:

.actions .action {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}

IE showing only the file control is usually caused by the transparent file input overlay growing wider than its button and covering neighbors. Constrain it to its wrapper so it cannot overlap:

.file-control { position: relative; display: inline-block; overflow: hidden; }
.file-control input[type=file]{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; filter: alpha(opacity=0); /* old IE */
  cursor: pointer;
}

Also be sure your other controls have visible labels (use <button>Submit</button>, <button type="reset">Reset</button>, etc., or add explicit value text to <input> buttons). Without text, some IE versions render them with minimal width.

If you want to avoid z-index quirks entirely, the accessible label pattern works well: hide the native <input type="file"> visually and style a <label> that triggers it. Clicking a label focuses/activates its associated control, which is exactly what you need for custom file buttons. See MDN: label. For layering issues, remember that opacity, positioning, and z-index create stacking contexts that affect overlaps; keeping the file input constrained to its own context prevents it from sitting on top of other buttons. See MDN: stacking context.

Lastly, confirm the page is in Standards Mode (e.g., <!DOCTYPE html>); Quirks Mode can change box metrics and button rendering in IE. You can check with document.compatMode. See MDN: Document.compatMode.

Recommended Answers

All 3 Replies

Member Avatar for prixat

Hi levsha

By telling each div to float: 'left' they will stay horizontal as long as there is enough room.

try these styles for a start:

.firstbutton {
	float: left;
}
.otherbutton {
	float: left;
	margin-left: 20px;
}

The first button is a simple float but all the others have a left margin so you can control the spacing...
Adding the new styles to the existing, you get...

<div class="fileinputs firstbutton">
<input type="submit" name="submit" class="submit" />
</div>
<div class="fileinputs otherbutton">
<input type="file" class="file" name="uploadedfile" />
    <div class="fakefile">
    <img src="uf_btt.png" />
    </div>
</div>
<div class="fileinputs otherbutton">   
<input type="reset" class="reset" />
</div>
<div class="fileinputs otherbutton">
<input type="button" class="print" onclick="window.print()" />
</div>
Edited by prixat because: n/a
Member Avatar for levsha

Thank you a million, prixat!
It worked.
The only problem left is that in IE is still only seen one button - "File Upload".
Do you have any idea what could cause it?

Member Avatar for prixat

Hi Ievsha

I don't know what causes that problem. I didn't get it in IE6.
Perhaps because I don't have the same form and table declarations that you have.
Try extracting those lines from that page and simplyfing all the styles till it works.
Then building up the styles again.

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.