In Mozilla firefox my CSS is not working why?
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?
Re: In Mozilla firefox my CSS is not working why?
Hey we really cant figure out the exact problem unless you provide us some html code of the page too!
Waiting for HTML
Regards!
Re: In Mozilla firefox my CSS is not working why?
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>
Re: In Mozilla firefox my CSS is not working why?
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
