Re: Modifying stylesheet properties through JS
by Andrew McFarland <aamcf(at)aamcf.co.uk>
|
Date: |
Wed, 15 Jan 2003 21:19:26 +0000 |
To: |
hwg-languages(at)hwg.org |
References: |
localhost |
|
todo: View
Thread,
Original
|
|
At 20:38 15/01/03 +0000, Andrew McFarland wrote:
>The solution is quite easy: wrap the javascript in a function and call
>that function in an onload for the body. That way the javascript isn't
>called until the element is there.
There is a more elegant solution - see
http://aamcf.co.uk/temp/interested_new.html.
Basically, I have
o Replaced the id="first" and id="second" with class="first"
class="second" and added corresponding styles to a style element (these
should be incorporated into the main CSS)
o Replaced the original JavaScript with:
<script type="text/javascript">
<!-- hide from old browsers
//disable the CSS 'tables' in IE due to a rendering bug
if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
document.write('<style type="text/css">div.row span {float:none; }</style>')
} // end if
// end hiding -->
</script>
This then only adds another style element when the browser is IE. It
overrides the earlier rules, giving the desired effect.
I'm sure I could come up with something even more elegant[1], given the
time :-)
Andrew
--
http://aamcf.co.uk/
[1] I'm not keen on the nature of the hack: using JavaScript to change the
document to compensate for browser bugs with CSS is high maintenance (you
have to look in 2 places to change the layout), and not all that accurate(
this method relies on navigator.appName , which is trivial to spoof,
`fixes' versions of IE that aren't broken, and falls over when CSS is
enabled and JS is not)
HWG: hwg-languages mailing list archives,
maintained by Webmasters @ IWA