I am using separate css styles for a js file that document.write(s) html on a called page. The called page has a css img style used generically for an offsite called pic; i.e img { blah, blah ; }
The js file also calls an image and its associated css gives the img tag a unique id; e.g. img#mine { blah, blah; } and the tag is <img id="mine"> This works fine in IE6, but in Firefox the id does not work and the css img from the other page takes over.
The id name is all alpha, so shouldn't be a problem there. Seems it is not possible to create a unique id for an image tag in Firefox without the generic img style hijacking it.
Does anyone have any clues as how to get round this??Difficult to tell without seeing the whole document.
btw, the id is a unique selector, so img#mine is redundant. Use just #mineOk on my error with the id; #mine instead of img#mine, though seems to work in both instances.
There is one html page plus 2 x css and 1 x js files involved in all this which makes it messy.! The called html page and its associated css file cannot be altered, and in this case the js (document.write) file and its css are the ones that need altering to protect the js from inheriting styles from the called files. So essentially, I have a js file inserting a banner on a called page "on the fly". As the laws of inheritance seem to be coming into play I think I will need to create inline styles in the js file to cover every conceivable oldball style that maybe picked up in the called html and css files.
I have found that by changing the generic img { blah etc.;} to img# still allows it to work as designed but stops it being inherited elsewhere. Remove the # and all hell breaks out.!!
If you want to have a look, a test page is at :-
<!-- m --><a class="postlink" href="http://wendell.co.nz/TestPages/bbfs-1.html">http://wendell.co.nz/TestPages/bbfs-1.html</a><!-- m -->
The js is static on the html file for test purposes and the fp3.js and fp3.css files are being worked on to overcome the inheritance problems. The banner that is being worked on is not mine, but it a good example of a crude banner which can be corrupted by the called page content. Sorry for the longwinded response.!I'm a little lost on the problem, but I think you just require an id or class for the images used in the content, then the header and footer images will not be affected.Thanks for your help.
I'll just ensure that the banner css and/or banner js inline styles are written in such a way that the chances of inheriting styles from the called page and its css is minimised.
The js file also calls an image and its associated css gives the img tag a unique id; e.g. img#mine { blah, blah; } and the tag is <img id="mine"> This works fine in IE6, but in Firefox the id does not work and the css img from the other page takes over.
The id name is all alpha, so shouldn't be a problem there. Seems it is not possible to create a unique id for an image tag in Firefox without the generic img style hijacking it.
Does anyone have any clues as how to get round this??Difficult to tell without seeing the whole document.
btw, the id is a unique selector, so img#mine is redundant. Use just #mineOk on my error with the id; #mine instead of img#mine, though seems to work in both instances.
There is one html page plus 2 x css and 1 x js files involved in all this which makes it messy.! The called html page and its associated css file cannot be altered, and in this case the js (document.write) file and its css are the ones that need altering to protect the js from inheriting styles from the called files. So essentially, I have a js file inserting a banner on a called page "on the fly". As the laws of inheritance seem to be coming into play I think I will need to create inline styles in the js file to cover every conceivable oldball style that maybe picked up in the called html and css files.
I have found that by changing the generic img { blah etc.;} to img# still allows it to work as designed but stops it being inherited elsewhere. Remove the # and all hell breaks out.!!
If you want to have a look, a test page is at :-
<!-- m --><a class="postlink" href="http://wendell.co.nz/TestPages/bbfs-1.html">http://wendell.co.nz/TestPages/bbfs-1.html</a><!-- m -->
The js is static on the html file for test purposes and the fp3.js and fp3.css files are being worked on to overcome the inheritance problems. The banner that is being worked on is not mine, but it a good example of a crude banner which can be corrupted by the called page content. Sorry for the longwinded response.!I'm a little lost on the problem, but I think you just require an id or class for the images used in the content, then the header and footer images will not be affected.Thanks for your help.
I'll just ensure that the banner css and/or banner js inline styles are written in such a way that the chances of inheriting styles from the called page and its css is minimised.