ansaurus

Question

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

Answer 1

+1 A:

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]-->

egarcia 2010-05-26 08:15:32

Actually with css mentioned in question, the fonts are managed to display quite same on FF and IE 7.The main problem with css is more you invest on it more it demands.I am trying to remain as simple as possible.I will try to use blueprint next time because right now I need to quickly fix the issue.

R.R 2010-05-26 10:06:25

Testing blueprint is actually quite quick. I've included a sample code. Just download blueprint, make it available on /css/blueprint and include those three lines on the html, before including your own css. If you don't like it, remove the files and lines. It can save you lots of headhaches in the future.

egarcia 2010-05-27 17:20:13

Answer 2

A:

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.

Kyle Sevenoaks 2010-05-26 08:19:21

Yes, will do that but before that I need a way to produce dash line in Firefox, can you mention which property I can use with/replace "border-left-style:dashed" to product the dashed lines.

R.R 2010-05-26 10:02:46

Updated my answer.

Kyle Sevenoaks 2010-05-26 10:22:44

So I tried the updates you mentioned in the css but still black lines are shown in FF instead of dashed lines. I have updated the css in original question post.

R.R 2010-05-27 05:31:17

Do you have a live example?

Kyle Sevenoaks 2010-05-27 07:01:59

I have captured screen shots FF-->http://pixpin.com/images/81898090171964887806.jpgIE6-->http://pixpin.com/images/32538710129638992535.jpg

R.R 2010-05-27 08:03:45

Answer 3

+1 A:

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.

Rob 2010-05-27 06:03:55

where are the dashlines in FF?

R.R 2010-05-27 08:02:29

@R.R - While IE may show what you want, that doesn't mean your markup is written correctly. Again, without the html, pictures don't help much either.

Rob 2010-05-27 12:38:32

@Rob, industry wide framework generate markup at runtime which we don't have control, and you should rather look into direction of providing some workarounds to make this css work on F.F. Thanks anyways.

R.R 2010-05-29 15:44:28

@R.R - Then you're using the wrong framework. If it works in IE but not FF then your markup is wrong! My workaround is provided. Never, EVER use IE as a reference for how things should work.

Rob 2010-05-29 18:47:48

You did't provide any workaround just a rant against IE which does not help :(

R.R 2010-05-31 08:56:40

@R.R - You want a workaround rather than doing things correctly. That I can't and won't help you with. I said you needed to supply the HTML or, preferably, a link. I said IE WILL be the problem. Call it a rant but, nevertheless, it's the truth.

Rob 2010-06-01 13:11:54

Not here to take dictation from you, clearly you are suffering from the case of over inflated ego.

R.R 2010-06-02 04:57:09

ansaurus

tags:

views:

answers:

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

Amount

related questions