Browsers are weird…especially Internet Exploder.
Posted by Sam on 13 Oct 2007 at 09:45 pm | Categories: Web development
Some more updates to the site:
- About page finally has something decent on it – blurb about me (strangely enough) and a personalDNA swatch script, slightly modified to fix an annoying gap in my swatch and to ensure the output validates.
- Minor menu tweaks
- Minor CV tweaks
- Minor SST page tweaks, example tables now look and play nicer.
- Fixed a couple of obvious silly errors
- Fixed Copyright element adjustment script for small pages in IE7 and Opera
The last item on the list was interesting. For some odd reason, my JS that worked perfectly well in Fx and Safari was failing miserably (without an error) in IE7 and Opera. The script basically just retrieves the following element with getElementById:
<p id=”copyright“>Copyright ©2005-2007 Sam Maister, All Rights Reserved.</p>
…before adding extra padding (via inline CSS) to ensure that it is at the bottom of the page, if the content is too small to push the element to the bottom. So I tried a few things out such as changing the element to a div, removing the existing applicable CSS rules, using ye olde document.all.getElementById, etc. None of these worked, and I quickly realised that the existing method did actually work, just not on that particular element. So I tried a couple more things before changing the id of the element from ‘copyright’ to something arbitrary; I didn’t expect this to work at all, but work it did. To test my theory, I changed the id of a different element to ‘copyright’ and that element was now immune to the script…bizarre; for some reason IE and Opera (maybe through some misguided attempt to be more IE-like?) seem to ignore any attempt to retrieve an element with an id of ‘copyright’ through getElementById. Googling it came up with nothing, but whatever. Now I have ‘copyright_notice’ and everything is peachy.
Here’s a simple testcase:
inline JS – var copy=document.getElementById(‘copyright’);
var notcopy=document.getElementById(‘this_copyright_bug_is_stupid’);
copy.style.color=’red’;
notcopy.style.color=’red’;
Clicking here should change both of the following text lines red. Click here to reset the colours:
I have an id of ‘copyright’.
I have an id of ‘this_copyright_bug_is_stupid’.
Edit: Another reason I should really be using jQuery for all of my JS stuff; this bug doesn’t occur when you use $(“#copyright”).css(“color”,”red”); instead of the clunky code above.