Making CSS Render in a simialr way on FireFox 3.0.15/IE 6.0 & 7.0
- by R.R
Following css renders differently depends on the browser (mainly with Firefox)
Firefox: the border-left-style:dashed does not seem to take effect as desired and black lines are shown instead.
Also font seems to be another issue using em as they respond relatively better in cross browser. When i used pixel its a mess but not sure em is better or not.
I am not a CSS expert and working with CSS makes me feel worse than dealing with a second hand car dealer.
.Main
{
font-family: Arial, "Trebuchet MS", Sans-Serif;
font-size: 0.8em;
border:0px;
}
.Header
{
font-family: Arial, "Trebuchet MS", Sans-Serif;
font-size: 1.2em;
color:#666;
background : url("../images/header.jpg") repeat-x top left;
padding-left: 10px;
padding:4px;
text-transform:uppercase;
border:1px;
border-left-style:dashed;
border-bottom-width:thin;
border-collapse:collapse
}
.Footer
{
color:#666;
font-family: Arial, "Trebuchet MS", Sans-Serif;
font-size: 0.7em;
}
.Footer td
{ border-style:none;
text-align:center;
}
.Footer span
{
color:#666;
font-family: Arial, "Trebuchet MS", Sans-Serif;
font-size: 0.7em;
font-weight:bold;
text-decoration:underline;
border-style:none;
}
.Footer a
{
font-family: Arial, "Trebuchet MS", Sans-Serif;
font-size: 0.7em;
color:#666;
}
.Results-Item td
{
margin-left: 10px;
vertical-align:middle;
color:#666;
background-color: white;
font-size: 1.2em;
padding:4px;
font-family: Arial, "Trebuchet MS", Sans-Serif;
padding-left: 10px;
line-height: 20px;
border:1px;
border-left-style:dashed;
border-bottom-width:thin;
border-collapse:collapse;
}
.Results-AltItem td
{
margin-left: 10px;
vertical-align:middle;
color:#666;
font-size: 1.2em;
/* _font-size: 1.2em; /* IE6 hack */
padding:4px;
font-family: Arial, "Trebuchet MS", Sans-Serif;
background-color: #ccc;
padding-left: 10px;
line-height: 20px;
border:1px;
border:1px;
border-left-style:dashed;
border-bottom-width:thin;
border-collapse:collapse;
}
Amount
{
text-align:right;
}
