quick q - html that only ff and ie7 reads

unwashed potato! · 20 Apr 2007 at 17:06

im using javscript thing that makes images on site im doing to change every 4/5 seconds and fade between the change. Works all fine in FF and hopefully IE7 as AFAIK it supports png, but not in IE6 as some annoying reason it adds a white background and because the images are at an angle and the background its on is pink/purple its very annoying and got to go. So im looking for html that only ff and IE7 read.

I forgot how to do it in css aswell so someone post the ways for FF and IE7, i know IE6 is _margin etc.

toastyman · 22 Apr 2007 at 10:08

I found a method a few weeks ago which lets older browsers read some CSS but not others...

Here's a few examples:

Code:

      div#header {margin-top:-3px;}
       body > div#header {margin-top:0;}

Code:

       .promo h3 {height:21px;}
       .promo > h3 {height:auto; min-height:21px;}

Code:

       ol {padding:0 0 0 5px;}
       html > body ol {padding:0;}

The older browsers would read the first line, but not the second, because they ignore child selectors. The second line is read by the modern browsers, and you use it to set the correct CSS properties

As for making html which is only read by some browsers... you could only do it by reading the browser type/version the user is using (using a server side scripting language), but that seems long winded. You should be able to do the things you are trying to achieve just using CSS.

unwashed potato! · 22 Apr 2007 at 10:28

toastyman said:
I found a method a few weeks ago which lets older browsers read some CSS but not others...

Here's a few examples:

Code:

div#header {margin-top:-3px;} body > div#header {margin-top:0;}

Code:

.promo h3 {height:21px;} .promo > h3 {height:auto; min-height:21px;}

Code:

ol {padding:0 0 0 5px;} html > body ol {padding:0;}

You should be able to do the things you are trying to achieve just using CSS.

was just about to post saying no as its javascript but you made me realise how, what im going to do is whatever div the javascript is in, make it so it is hidden to ie6 by adding _display: hidden;

thanks

robmiller · 22 Apr 2007 at 10:32

addy_010 said:
was just about to post saying no as its javascript but you made me realise how, what im going to do is whatever div the javascript is in, make it so it is hidden to ie6 by adding _display: hidden;

thanks

Use conditional comments, much nicer.

Code:

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

unwashed potato! · 22 Apr 2007 at 11:43

robmiller said:
Use conditional comments, much nicer.

Code:



i think thats worse as its harder to see the fix as you have to look at 2 stylesheets, where as my method i can see when looking at each div and the fixes right there in the one stylesheet. Just my opinion though and feel free to prove me why im wrong, which i sure the legendary robmiller can

psyr33n · 22 Apr 2007 at 12:28

Yeah, I prefer CSS rules to HTML hacks too. Removes the need for extra stylesheets, styles in the HTML file etc. - keeps all the CSS together.

http://centricle.com/ref/css/filters/

Eriedor · 22 Apr 2007 at 12:52

Personally prefer the conitional comment method.

Style sheets were designed to be cascaded. Also it means that all css used to get around older browsers is all in one seperate style sheet. (remember you only need to include the css that is relevant to the "hack", as the main style sheet will still be used for the rest)