CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromefirefox
Vipersnake
Vipersnake

Reputation: 1

Why wont Firefox Display/Work Correctly with the given CSS?

i have no problems seeing the page in IE or Chrome and the Upload button works in both.. but in FireFox it doesnt displat the widths correctly nor does the upload button works..

i cant seem to find anythiong wrong with the code... here is the entire page

<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
font-family:verdana;
color:#3f3f3f;
font-size:14px;
}
html,body{
height:100%;
}
#container{
width:1024px;
margin:0 auto;
height:100%;
}
#content{
min-height:100%;
background-color:#fff;
width:804px;
padding:5px;
float:left;
display:inline;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right:10px;
}
body{
background-color:rgb(228, 228, 228);
}
table{
width:450px;
margin:0 auto;
}
table td{
padding:10px 5px;
}
table th{
background-color:rgb(116, 116, 116);
color:#fff;
padding:10px;
text-align:left;
font-weight:normal;
font-size:16px;
}
table label{
display:block;
padding-bottom:3px;
font-weight:bold;
}
table input[type=text], table select{
display:block;
color:rgb(116, 116, 116);
padding:8px;
line-height:20px;
border:1px solid rgb(183, 187, 202);
font-weight:bold;
vertical-align: middle;
background-color:rgb(255, 255, 255);
width:260px;
}
table select{
width:277px;
}
#txtEmail, #ctitle, #txtDesc{
width:550px;
}

/* Upload Button */
table input[type=file]{
text-align: right;
/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */
z-index:2;
cursor:pointer;
}
#fileName{
width:196px;
display:inline;
margin:0;
}
.uploadbtn{
display:block;
padding:0;
margin:0;
font-weight:normal;
width:60px;
display:inline-block;
height:38px;
line-height:38px;
vertical-align:middle;
background-color:#3f3f3f;
color:#fff;
text-align:center;
float:right;
cursor:pointer;
}
/*********************/
</style>
</head>
<body>
<div id="container">
<div id="content">
<table cellpadding="0" cellspacing="0">
<tr><th colspan="2">Informacion de Contacto</th></tr>
<tr>
    <td>
        <label>Nombre</label><input type="text" maxlength="20" id="txtName" name="txtName"/>
    </td>
    <td>
        <label>Apellido</label><input type="text" maxlength="20" id="txtLastName" name="txtLastName"/>
    </td>
</tr>
<tr>
    <td>
        <label>Telefono</label><input type="text" maxlength="13" id="txtTel1" name="txtTel1"/>
    </td>
    <td>
        <label>Telefono Adicional</label><input type="text" maxlength="13" id="txtTel2" name="txtTel2"/>
    </td>
</tr>
<tr>
    <td colspan="2">
        <label>Email</label><input type="text" maxlength="100" id="txtEmail" name="txtEmail"/>
    </td>
</tr>
<tr><th colspan="2">Informacion del Clasificado</th></tr>
<tr>
    <td colspan="2">
        <label>Titulo</label><input type="text" maxlength="100" id="ctitle" name="ctitle"/>
    </td>
</tr>
<tr>
    <td colspan="2">
        <label>Descripcion</label><textarea name="cbody" cols="78" rows="10" id="cbody" ></textarea>
    </td>
</tr>
<tr>
    <td>
        <label>Precio</label><input type="text" maxlength="9" id="txtPrecio" name="txtPrecio"/>
    </td>
    <td>
        <label>Comentario (OMO,FIJO,etc)</label><input type="text" maxlength="10" id="txtPriceComment" name="txtPriceComment"/>
    </td>
</tr>
<tr>
    <td>
        <label>Tipo de Clasificado</label>
        <select>
            <option>Venta</option>
            <option>Adopcion</option>
        </select>
    </td>
    <td>
        <label>Categoria</label>
        <select>
            <option>Perros</option>
            <option>Gatos</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <label>Pueblo</label>
        <select>
            <option>Area Metro</option>
            <option>Bayamon</option>
        </select>
    </td>
    <td>
        <label>Foto</label>
        <input type="text" maxlength="100" id="fileName" name="fileName"/>
        <label class="uploadbtn">Upload
            <input type="file" name="userfile" size="20" onchange="javascript: document.getElementById('fileName').value = this.value"/>
        </label>
    </td>
</tr>
</table>
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 290

Answers (2)

letiagoalves
letiagoalves

Reputation: 11302

What's happening is that each browser renders input file element differently and Firefox is rendering your input file away from your label. So when you click on your label, you are not clicking on input file. Am I being clear?

Please see this tutorial how to create a custom input file cross browser compatible.

http://www.quirksmode.org/dom/inputfile.html

Let me know if this helped you

Upvotes: 1

Penner
Penner

Reputation: 29

You shouldn't forget the mime type on your stylesheet

<style></style>

to

<style type="text/css"></style>

Upvotes: 0

Related Questions