Making CSS Render in a similar way on FireFox 3.0.15/IE 6.0 & 7.0

2
votes

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.

I have captured screen shots

FF--> http://pixpin.com/images/81898090171964887806.jpg

IE6--> http://pixpin.com/images/32538710129638992535.jpg

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-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}

.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-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}
 
.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-collapse:collapse;
    border-bottom-width:thin;
    border-left-style:dashed; 
}

#Amount {
   text-align:right;
}
3
cssfirefoxinternet-explorer
Do you have a live example or a screenshot of the error? Also a screenshot of the desired effect usually helps us out more to help you :) – Kyle
this is a global problem, browser incompatibility – Starx
Question is updated with links to screenshots. – R.R

3 Answers

2
votes

Best way to keep these errors out is to use a CSS standarization (reset) base, such as the one provided by blueprint.

If you don't include everything on blueprint, at least include its reset.css file. It will get rid of the font and spacing unconsistent behaviour between navigators (I'm not sure about the border issues)

EDIT: This is all you need in order to install blueprint basic:

<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
1
votes

Showing only the CSS is only showing half the picture and, without the html, makes anything said a wild guess. In any case, Firefox is showing what you wrote while IE makes things up as it goes along. Never, ever trust IE to do anything right. Always, always use a modern browser (anything but IE) to initially test your markup. But the multitude of bugs and quirks in IE are well known, as are the hacks to fix it.

A link to the offending page is worth a thousand guesses at the problem.

0
votes

You can use either a CSS reset like the Meyers reset, or to separate IE from Firefox and the rest of the browsers, use Conditional Comments. Usually Firefox is the browser that displays things mostly correct, so when I make sites I make it in FF first, then change IE CSS to fit.

Put this into the <head> of your HTML page:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="path-to-file/ie.css">
<![endif]-->

And setup some different CSS that works for IE in that stylesheet.

Important: border-left-style: dashed; is valid for Firefox, check your cascade for clashing border left attributes, put it after the border-collapse:collapse in your CSS, also add the ; to the end of that rule. You don't need it for the last rule in a CSS selector, but when you switch it, make sure you add it.

Hope that helps.