Elemental Posted June 16, 2009 Share Posted June 16, 2009 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 More sharing options...
sckewi Posted June 17, 2009 Share Posted June 17, 2009 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. Link to comment Share on other sites More sharing options...
Elemental Posted June 17, 2009 Author Share Posted June 17, 2009 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 More sharing options...
sckewi Posted June 17, 2009 Share Posted June 17, 2009 >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 More sharing options...
Elemental Posted June 19, 2009 Author Share Posted June 19, 2009 >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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.