xpblueScreenOfDeath
Programmer
- Sep 1, 2004
- 87
Can someone help me with my css? The following looks correctly in IE 6, but not in FireFox. Can someone help me with my css to make it look correctly in both browsers? I am having server side code generate a page with a panel like this, so the html tags have to stay the same but the css needs work. Thanks.
Code:
<html>
<body>
<style>
.tborder
{
background: #D1D1E1;
color: #000000;
border: 1px solid #0B198C;
padding: 1px;
}
.tcat
{
background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.alt1
{
background: #F5F5FF;
color: #000000;
FONT-SIZE: 10px;
FONT-FAMILY: verdana, tahoma, arial;
margin: 1px;
padding: 2px;
}
.thead
{
background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
</style>
<div id="panel1" class="tborder" style="width: 200px;">
<div id="panelBar" class="tcat" style="padding: 6px; width: 100%;">
<span class="largefont" style="float: left;"><strong>Place</strong></span>
<span class="smallfont" style="float: right;">count</span>
</div>
<div>
<div id="groupPanel" style="width: 100%">
<div id="groupHeaderPanel" class="thead" style="padding: 4px; width: 100%">
<span class="largefont" style="float: left; width: 80%">
<img src="/images/buttons/collapse_thead_sq.gif" width="11" height="11" border="0" hspace="2" alt="Collapse" />
<b>Person</b>
</span>
<span style="float: right; text-align: right; width: 20%">
<b>5640</b>
</span>
</div>
<div id="groupContentPanel" style="width: 100%">
<div id="subGroupPanel" style="width: 100%">
<div id="subGroupHeaderPanel" class="alt2" style="padding: 4px; width: 100%">
<span class="smallfont" style="float: left; width: 80%">
<img src="clear.gif" width="5" height="1" alt="" />
<img src="/images/buttons/collapse_alt_sq.gif" width="11" height="11" border="0" alt="Collapse" />
<b>Names</b>
</span>
<span class="smallfont" style="float: right; text-align: right; width: 20%">
<b>375</b>
</span>
</div>
<div id="subGroupContentPanel" style="">
<div id="memberPanel" class="alt1" style="padding: 4px; width: 100%">
<span class="smallfont" style="float: left; width: 80%">
<img src="/images/green.gif" width="12" height="12" border="0" alt="Online" />
Jack
</span>
<span class="smallfont" style="float: right; text-align: right; width: 20%">
200
</span>
</div>
<div id="memberPanel" class="alt1" style="padding: 4px; width: 100%">
<span class="smallfont" style="float: left; width: 80%">
<img src="/images/green.gif" width="12" height="12" border="0" alt="Online" />
Fanny
</span>
<span class="smallfont" style="float: right; text-align: right; width: 20%">
200
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>