Jump to content

Firefox & Ie Again


george
 Share

Recommended Posts

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...