george Posted January 19, 2009 Share Posted January 19, 2009 I read through about thirty threads on different development forums trying to find the specifics of the differences between the ways that Firefox and Internet Explorer render the same CSS directives. I haven't found it. But like everyone else, I am discovering them on my own, one by one. Here is an example, a very simple page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.row { background-color:#CC6633; height:15px; width:100%; display:block; }.data { background-color:#99CC99; width:35px; }</style></head><body><span class="row">Rust</span><span class="data">grn</span></body></html> When looked at using IE, I get a rust colored line going accross the whole page, and on the left, the word "Rust" beginning at the very bottom of the rust colored line. When I look at the same page using FireFox, I get the very bottom of the word "rust" going benieth the rust colored band, and into the white area. I suspect that if I use "vertical-align" to try and correct the problem, I will get different results for each browser. What's a poor coder to do? The site I am actually having fits with is http://www.get-fit-for-life.com/Sites/Rdiabetic/index.html . It looks as I want it in Firefox, but renders unacceptably in Internet Explorer. It uses tables for formatting. If an answer is avaiable for tables, I will employ it. I am in process of converting the page to all CSS, but it seems I just inherit a different set of problems. I would rather not have to use browser sniffing, and write a different CSS for each one. But do I have a choice if I want a quality rendering irrespective of browser? Link to comment Share on other sites More sharing options...
Synook Posted January 19, 2009 Share Posted January 19, 2009 IE6 has a known bug with overflowing content - it will expand the element to contain the content (instead of pushing the content out of the element).http://www.aspektas.com/blog/ie6-overflowvisible-bug Link to comment Share on other sites More sharing options...
george Posted January 19, 2009 Author Share Posted January 19, 2009 Thanks SynookI tried adding the overflow:hidden to my CSS file: * { margin:0px; padding:0px; overflow:hidden; } and that did neither good nor evil. I noticed there is a pinned topic here on browser differences that I have not read yet. If I find no fixes there, I guess I have to write two CSS scripts, one for IE and one for FireFox. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 19, 2009 Share Posted January 19, 2009 I noticed there is a pinned topic here on browser differences that I have not read yet. If I find no fixes there, I guess I have to write two CSS scripts, one for IE and one for FireFox.My suggestion would be to use an IE Conditional Comment. Google is your friend. Link to comment Share on other sites More sharing options...
george Posted January 19, 2009 Author Share Posted January 19, 2009 My suggestion would be to use an IE Conditional Comment. Google is your friend.Yes, I found it. Thank you. Better than writting two scripts. Link to comment Share on other sites More sharing options...
george Posted January 20, 2009 Author Share Posted January 20, 2009 Ok, firefox seems to not like font-weight:bold So what should I use? Link to comment Share on other sites More sharing options...
jeffman Posted January 20, 2009 Share Posted January 20, 2009 Works for me. Check that all your definitions end in semi-colons, that one and the ones before. Also that your element isn't inheriting a normal font-weight from something else. Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 20, 2009 Share Posted January 20, 2009 Ok, firefox seems to not like font-weight:bold So what should I use? font-weight:bolder;or the numeric representation (100-900)font-weight:800; Link to comment Share on other sites More sharing options...
Synook Posted January 21, 2009 Share Posted January 21, 2009 font-weight:bold does work in FF! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.