"falling apart cleanly"

2 posts / 0 new
Last post
Isaac
"falling apart cleanly"

the goal of HTML (Hyper Text Markup Language) and all of it's related standards (CSS, XML, XHTML, XSL, etc), is to produce a platform independent presentation. But when it's not possible to write a truely platform independent presentation, and you have aspects of your page that display funny in either Firefox/Opera (there not the same, but with the limits placed on code by Myspace, most things will render the same in Firefox and Opera) or IE it's nice to know some tricks to make it display right, or atleast display in a way that doesn't look so awful, in the buggy browser.

to create seperate style sheets for IE and Firefox/Opera....

<style type="text/css" media="all">
styles for IE
</style>
<comment>
 <style type="text/css" media="all">
styles for all browsers (that understand styles) Except IE
 </style>
<comment>
<style type="text/css" media="all">
styles for all browsers (that understand styles) Including IE
</style>

IE will ignore anything inbetween "<comment> and </comment>", whereas Opera and Firefox will only ignore the tags and not the stuff inbetween them; but it's still important to remember one important rule of CSS, and thats that CSS uses a "last match wins" rule; and as such if you want your page to have blue background in IE and a red one in other browsers and you want green text in all browsers....

<style type="text/css" media="all">
body {background-color: rgb(0,0,255)}
</style>
<comment>
 <style type="text/css" media="all">
body {background-color: rgb(255,0,0)}
 </style>
<comment>
<style type="text/css" media="all">
body (color: rgb(0,255,0)}
</style>

however, it's important to remember to specifiy a background color in the commented cascading styles, as:

<style type="text/css" media="all">
body {background-color: rgb(0,0,255)}
</style>
<comment>
 <style type="text/css" media="all">
some-selector {some-attribute: some-value}
 </style>
<comment>
<style type="text/css" media="all">
body (color: rgb(0,255,0)}
</style>

you'll end up with blue background and green text in all browsers that support CSS.

now; if you get out of Myspace and get to write real code, you can introduce another tag that only Internet Explorer!:

<!--[if IE]>
 <style type="text/css" media="all">
body {background-color: rgb(0,0,255)}
 </style>
<![end it]-->
<comment>
 <style type="text/css" media="all">
some-selector {some-attribute: some-value}
 </style>
<comment>
<style type="text/css" media="all">
body (color: rgb(0,255,0)}
</style>

will produce a blue background in IE and no background in all other browsers; with green text in all. Now, I don't fully understand the syntax of <!--[if browser>....<![end if]-->, because a simular tag is used in XML and that tag works in all browsers. but all you need to know, is that only IE recognizes this tag, all other browsers will treet it as <!--....-->, which is a comment tag and browsers will not render it.

you are not using IE :-)

(note, code for above line is:

<!--[if IE]>You're using IE :-(<![end if]--><comment>you are not using IE :-)</comment>

)

   

   

alive2dive
Re: "falling apart cleanly"

Thanks, Ike, for reminding me why I'm NOT a programmer!! Hahah Laughing

I can use HTML, but have to copy the code from someone (like you) who has already figured out the proper syntax. I'm the first to admit that I'm a 'cut-n-paster'. Your HTML above is a fantastically clever idea!

~A. 

We are what we repeatedly do. Excellence then is not an act, but a habit. -Aristotle

Add new comment