Making CSS Render in a simialr way on FireFox 3.0.15/IE 6.0 & 7.0
Posted
by R.R
on Stack Overflow
See other posts from Stack Overflow
or by R.R
Published on 2010-05-26T08:08:29Z
Indexed on
2010/05/26
8:11 UTC
Read the original article
Hit count: 175
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; }
© Stack Overflow or respective owner
