In Mozilla firefox my CSS is not working why?

**SagarP** · 12-02-2009

Hi,
I validated both the CSS and HTML but still it does not work properly on Mozilla Firefox it works well on Internet explorer

CSS

HTML Code:

body
{
background-color:white;

}

div.row {
clear: both;
padding-top: 10px;
}



div.row span.label {
float: left;
width: 381px;
text-align: left;
}

div.row span.formw {
float: right;
width: 335px;
text-align: left;
}

div.row span.labelheader {
float: left;
width: 439px;
text-align: left;

font-weight:bold;
}

div.row span.coltwoh {
float: left;
width: 104px;
text-align: center;
font-weight:bold;
}

div.row span.colthreeh {
float: left;
width: 111px;
text-align: left;
font-weight:bold;
}

div.row span.colfourh {
float: left;
width: 91px;
text-align: left;
font-weight:bold;
}

div.row span.coltwo {
float: left;
width: 164px;
text-align: center;

}

div.row span.colthree {
float: left;
width: 111px;
text-align: left;

}

div.row span.colfour {
float: left;
width: 91px;
text-align: right;

}

div.formarea
{
width: 815px; background-color: yellow; border: 1px Solid #333; padding: 5px; margin: 0px auto; height: 1px;
}

In HTML code this CSS is not working please tell me is there anything wrong with this CSS file?

**SushmitaP** · 12-02-2009

Hey we really cant figure out the exact problem unless you provide us some html code of the page too!

Waiting for HTML

Regards!

**SagarP** · 12-02-2009

Part of my HTML

HTML Code:

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--

function DIV1_onclick() {

}

// -->
</script>
</head>
<body>

<div class="formarea" >
<table>
<tr>
<td style="width:40px"></td>
<td>
<form id="form1" action="Default.aspx">
<h1 style="text-align: center"> AM Trust</h1>
<h2 style=" text-align:center">Monthly Earning Credit Calculator</h2>
<div>Please Fill in the white boxes: </div> <br/>
<div class="row">
<span class="labelheader" style="width: 164px">Average Daily Balance:</span>
<span class="formw" style="width: 158px">
<input type="text" style="width: 100px; float:right" />
</span>
</div>
<div class="row">
<span class="labelheader" >Account Activity</span>
<span class="coltwoh" >Number</span>
<span class="colthreeh" style="width: 110px" >Fee</span>
<span class="colfourh" > Total Cost</span>
</div>
<div class="row">
<span class="label" style="width: 381px" >Average # of monthly checks paid</span>
<span class="coltwo" >
<input type="text" style="width: 132px" />
</span>
<span class="colthree" >$0.15</span>
<span class="colfour" > <input type="text" style="width: 32px; background-color:Yellow" /></span>
</div>
<div class="row">
<span class="label" >Average # of monthly deposits</span>
<span class="coltwo" >
<input type="text" style="width: 132px" />
</span>
<span class="colthree" >$0.25</span>
<span class="colfour" ><input type="text" style="width: 32px; background-color:Yellow" /></span>
</div>

</body>
</html>

**HyperCity** · 12-02-2009

Your content area, you might add clear: both

I would get rid of the min-wdith in the mainwrap as well. The CSS code is not valid actually - that would be a start. Also - adding float: left to your columns should help as well.

Some other threads to check out for advanced CSS can be found in the International Web Developers Network, otherwise let me know and I can possibly walk you thru re-doing it to delete some of the code that is not needed