Button positioning in HTML form

[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!

[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>

[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?

[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.