Jump to content

Conflicts Between Css Files, Ie And Everybody Else


Elemental
 Share

Recommended Posts

Hey Folks, I've been at this for a full day, and I mean a full day almost 24 hours straight; yeah I'm a bit obsessive at timesI have the following beginning on my HTML 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" xml:lang="en" lang="en"><head><title>Shadowland Foundation, Inc. - Playing with Wolves</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="Description" content="" /><meta name="Keyword" content="" /><meta name="robots" content="all" /><meta name="distribution" content="global" /><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" type="text/css" href="css/my_Styles.css" media="screen" /><!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/ie_Styles.css" media="screen" /><![endif]-->....

then in a folder named css I have the two files ( my_Styles.css and ie_Styles.css ), here's my question: does it matter where I place the IE conditional css call / link?All four browsers display it differently, IE everything is to the right, Safari and FF is to the bottom, and Opera gets it right; really weird. I started using FF instead of IE I then created a separate css file for IE once I was sure the other three Safari, Opera and FF were working fine, when I finished with that I went to check it all again and pow, all ###### broke loose.So am I doing it wrong, based on the code I'm showing you above?Peace,Elemental

Link to comment
Share on other sites

Generally speaking I'd say avoid using separate CSS for different browsers completely.Things that can make this easier:
  • Use a strict doc-type.
  • Use standard HTML and CSS.

Sckewi, Thanks for the reply, much appreciated.So by using a strict DOCTYPE versus a transitional one I can avoid most of the incompatibilities between browsers? That’s interesting, didn't know that; so much stuff to learn and to keep up with ....When you say to “use standard HTML and CSS” do you mean compliant and or relative to the DOCTYPE?Peace,Elemental
Link to comment
Share on other sites

>When you say to “use standard HTML and CSS” do you mean compliant and or relative to the DOCTYPE?Compliant - though doctype you choose can effect the way that the browser causes CSS to work. Like you say however, a strict doctype will reduce incompatibilities. Admittedly though switching to a strict doctype isn't a magic fix, but it can usually help.>everything is to the right, Safari and FF is to the bottom, and Opera gets it rightFrom what you've posted, it sounds like a float/clearer issue. If you have clearer divs something like this:HTML:<div class="clearer"></div>CSS.clearer{ clear:both;}Try adding height: 0; to the clearer's style:CSS:.clearer{ clear: both; height: 0;}

Link to comment
Share on other sites

>When you say to “use standard HTML and CSS” do you mean compliant and or relative to the DOCTYPE?Compliant - though doctype you choose can effect the way that the browser causes CSS to work. Like you say however, a strict doctype will reduce incompatibilities. Admittedly though switching to a strict doctype isn't a magic fix, but it can usually help.>everything is to the right, Safari and FF is to the bottom, and Opera gets it rightFrom what you've posted, it sounds like a float/clearer issue. If you have clearer divs something like this:HTML:<div class="clearer"></div>CSS.clearer{ clear:both;}Try adding height: 0; to the clearer's style:CSS:.clearer{ clear: both; height: 0;}
Sckewi, Thanks again, that was helpfull; clear did the trick.Peace,Elemental
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...