Style switcher JS doesnt work in IE7 and below

Hi i have built a style switcher which allows a user to preview font, background, size and color properties and update website text accordingly. T This style works well in all browsers except IE7 and below. In IE7 and below the preview part doesnt work - but the website text does update!
Can anyone spot why? here is the code:


$(document).ready(function(){
	
	  /* DEFAULT PREVIEW WHEN PAGE LOADS OR IS REFRESHED */	
	
	  var type = $('#type').val();		
	  /*$('div#preview p#text').css('fontFamily', type);*/

      /* remove all classes first */
      $('div#preview p#text').removeClass('Verdana');
	  $('div#preview p#text').removeClass('Arial');
	  $('div#preview p#text').removeClass('TimesNewRoman');
	  $('div#preview p#text').removeClass('Georgia');
	  $('div#preview p#text').removeClass('ComicSansMS');

      /* add classes to overwrite !important in _switcher */
	  if (type == "Verdana") {
			$('div#preview p#text').addClass('Verdana'); 			
	  } else if (type == "Arial") {
			$('div#preview p#text').addClass('Arial');
	  } else if (type == "Times New Roman") {
			$('div#preview p#text').addClass('TimesNewRoman');
	  } else if (type == "Georgia") {
			$('div#preview p#text').addClass('Georgia');
	  } else if (type == "Comic Sans MS") {
			$('div#preview p#text').addClass('ComicSansMS');
	  }
	
	  var size = $('#size').val();		
	  /*$('div#preview p#text').css('fontSize', size);*/
	
	  /* remove all classes first */
      $('div#preview p#text').removeClass('small');
	  $('div#preview p#text').removeClass('medium');
	  $('div#preview p#text').removeClass('large');
	  $('div#preview p#text').removeClass('x-large');
	  $('div#preview p#text').removeClass('xx-large');	
	  $('div#preview p#text').removeClass('_12px');
	  $('div#preview p#text').removeClass('_16px');
	  $('div#preview p#text').removeClass('_20px');
	  $('div#preview p#text').removeClass('_24px');
	  $('div#preview p#text').removeClass('_28px');
	  $('div#preview p#text').removeClass('_32px');
	
	  /* add classes to overwrite !important in _switcher */
	  if (type == "small") {
			$('div#preview p#text').addClass('small'); 			
	  } else if (type == "medium") {
			$('div#preview p#text').addClass('medium');
	  } else if (type == "large") {
			$('div#preview p#text').addClass('large');
	  } else if (type == "x-large") {
			$('div#preview p#text').addClass('x-large');
	  } else if (type == "xx-large") {
			$('div#preview p#text').addClass('xx-large');
	  } else if (type == "12px") {
			$('div#preview p#text').addClass('_12px');
	  } else if (type == "16px") {
			$('div#preview p#text').addClass('_16px');
	  } else if (type == "20px") {
			$('div#preview p#text').addClass('_20px');
	  } else if (type == "24px") {
			$('div#preview p#text').addClass('_24px');
	  } else if (type == "28px") {
			$('div#preview p#text').addClass('_28px');
	  } else if (type == "32px") {
			$('div#preview p#text').addClass('_32px');
	  }
	
	
	  var colour = $('#colour').val();		
	  /*$('div#preview p#text').css('color', colour);*/
	
	  /* remove all classes first */
	    $('div#preview p#text').removeClass('color-black');
		$('div#preview p#text').removeClass('color-silver');		
		$('div#preview p#text').removeClass('color-grey');
		$('div#preview p#text').removeClass('color-white');
		$('div#preview p#text').removeClass('color-maroon');
		$('div#preview p#text').removeClass('color-red');
		$('div#preview p#text').removeClass('color-purple');		
		$('div#preview p#text').removeClass('color-fuchsia');
		$('div#preview p#text').removeClass('color-green');
		$('div#preview p#text').removeClass('color-lime');
		$('div#preview p#text').removeClass('color-olive');
		$('div#preview p#text').removeClass('color-yellow');
		$('div#preview p#text').removeClass('color-navy');
		$('div#preview p#text').removeClass('color-blue');
		$('div#preview p#text').removeClass('color-teal');
		$('div#preview p#text').removeClass('color-aqua');
		
		
		/* add classes for colour to overwrite !important in _switcher */
		if (colour == "#000000") {
			$('div#preview p#text').addClass('color-black'); 			
		} else if (colour == "#C0C0C0") {
			$('div#preview p#text').addClass('color-silver');
		} else if (colour == "#808080") {
			$('div#preview p#text').addClass('color-grey');
		} else if (colour == "#FFFFFF") {
			$('div#preview p#text').addClass('color-white');
		} else if (colour == "#800000") {
			$('div#preview p#text').addClass('color-maroon');
		} else if (colour == "#FF0000") {
			$('div#preview p#text').addClass('color-red');
		} else if (colour == "#800080") {
			$('div#preview p#text').addClass('color-purple');
		} else if (colour == "#FF00FF") {
			$('div#preview p#text').addClass('color-fuchsia');
		} else if (colour == "#008000") {
			$('div#preview p#text').addClass('color-green');
		} else if (colour == "#00FF00") {
			$('div#preview p#text').addClass('color-lime');
		} else if (colour == "#6B8E23") {
			$('div#preview p#text').addClass('color-olive');
		} else if (colour == "#FFFF00") {
			$('div#preview p#text').addClass('color-yellow');
		} else if (colour == "#000080") {
			$('div#preview p#text').addClass('color-navy');
		} else if (colour == "#0000FF") {
			$('div#preview p#text').addClass('color-blue');
		} else if (colour == "#008080") {
			$('div#preview p#text').addClass('color-teal');
		} else if (colour == "#00FFFF") {
			$('div#preview p#text').addClass('color-aqua');
		}	
	
	  var background = $('#background').val();	
	
	    /* remove all classes first */
	    $('div#preview p#text').removeClass('white');
		$('div#preview p#text').removeClass('beige');
		$('div#preview p#text').removeClass('yellow');
		$('div#preview p#text').removeClass('rose');
		$('div#preview p#text').removeClass('lavender');
		$('div#preview p#text').removeClass('turquoise');
		$('div#preview p#text').removeClass('green');		
		$('div#preview p#text').removeClass('grey');
		$('div#preview p#text').removeClass('black');
		$('div#preview p#text').removeClass('blue');
		
		/* add classes for background to overwrite !important in _switcher */
		if (background == "#FFFFFF") {
			$('div#preview p#text').addClass('white'); 			
		} else if (background == "#FFF7EF") {
			$('div#preview p#text').addClass('beige');
		} else if (background == "#FFFFDE") {
			$('div#preview p#text').addClass('yellow');
		} else if (background == "#FFEBE7") {
			$('div#preview p#text').addClass('rose');
		} else if (background == "#EBEBFF") {
			$('div#preview p#text').addClass('lavender');
		} else if (background == "#DDFFFF") {
			$('div#preview p#text').addClass('turquoise');
		} else if (background == "#E3FFE3") {
			$('div#preview p#text').addClass('green');
		} else if (background == "#EEEEEE") {
			$('div#preview p#text').addClass('grey');
		} else if (background == "#000000") {
			$('div#preview p#text').addClass('black');
		} else if (background == "#0000FF") {
			$('div#preview p#text').addClass('blue');
		}
		
		
	  /* check if colours are the same */	
	  warning();


/*----------------------------------------------------------------------------------------*/
	
	  /* UPDATE PREVIEW WHEN USER CHANGES PREFERENCES */	
	
	
	  /* when user changes type */	
      $('#type').change(function() {		
	  var type = $('#type').val();		
	  /*$('div#preview p#text').css('fontFamily', type);*/

      /* remove all classes first */
      $('div#preview p#text').removeClass('Verdana');
	  $('div#preview p#text').removeClass('Arial');
	  $('div#preview p#text').removeClass('TimesNewRoman');
	  $('div#preview p#text').removeClass('Georgia');
	  $('div#preview p#text').removeClass('ComicSansMS');

          /* add classes to overwrite !important in _switcher */
		if (type == "Verdana") {
			$('div#preview p#text').addClass('Verdana'); 			
		} else if (type == "Arial") {
			$('div#preview p#text').addClass('Arial');
		} else if (type == "Times New Roman") {
			$('div#preview p#text').addClass('TimesNewRoman');
		} else if (type == "Georgia") {
			$('div#preview p#text').addClass('Georgia');
		} else if (type == "Comic Sans MS") {
			$('div#preview p#text').addClass('ComicSansMS');
		}  						
	
	  })	

	  /* when user changes size */
      $('#size').change(function() {		
	  var size = $('#size').val();		
	  /*$('div#preview p#text').css('fontSize', size);*/
	
	   /* remove all classes first */
      $('div#preview p#text').removeClass('small');
	  $('div#preview p#text').removeClass('medium');
	  $('div#preview p#text').removeClass('large');
	  $('div#preview p#text').removeClass('x-large');
	  $('div#preview p#text').removeClass('xx-large');	
	  $('div#preview p#text').removeClass('_12px');
	  $('div#preview p#text').removeClass('_16px');
	  $('div#preview p#text').removeClass('_20px');
	  $('div#preview p#text').removeClass('_24px');
	  $('div#preview p#text').removeClass('_28px');
	  $('div#preview p#text').removeClass('_32px');
	
	  /* add classes to overwrite !important in _switcher */
	  if (size == "small") {
			$('div#preview p#text').addClass('small'); 			
	  } else if (size == "medium") {
			$('div#preview p#text').addClass('medium');
	  } else if (size == "large") {
			$('div#preview p#text').addClass('large');
	  } else if (size == "x-large") {
			$('div#preview p#text').addClass('x-large');
	  } else if (size == "xx-large") {
			$('div#preview p#text').addClass('xx-large');
	  } else if (size == "12px") {
			$('div#preview p#text').addClass('_12px');
	  } else if (size == "16px") {
			$('div#preview p#text').addClass('_16px');
	  } else if (size == "20px") {
			$('div#preview p#text').addClass('_20px');
	  } else if (size == "24px") {
			$('div#preview p#text').addClass('_24px');
	  } else if (size == "28px") {
			$('div#preview p#text').addClass('_28px');
	  } else if (size == "32px") {
			$('div#preview p#text').addClass('_32px');
	  }		
		
	  })
	
	
	  /* when user changes colour dropdown */
      $('#colour').change(function() {								
			
		/* get font and background colour to compare */
		var colour = $('#colour').val();
		var background = $('#background').val();
		
		
		/* change colour */
		/*$('div#preview p#text').css('color', colour);*/		
		
		
		/* remove all classes first */
	    $('div#preview p#text').removeClass('color-black');
		$('div#preview p#text').removeClass('color-silver');		
		$('div#preview p#text').removeClass('color-grey');
		$('div#preview p#text').removeClass('color-white');
		$('div#preview p#text').removeClass('color-maroon');
		$('div#preview p#text').removeClass('color-red');
		$('div#preview p#text').removeClass('color-purple');		
		$('div#preview p#text').removeClass('color-fuchsia');
		$('div#preview p#text').removeClass('color-green');
		$('div#preview p#text').removeClass('color-lime');
		$('div#preview p#text').removeClass('color-olive');
		$('div#preview p#text').removeClass('color-yellow');
		$('div#preview p#text').removeClass('color-navy');
		$('div#preview p#text').removeClass('color-blue');
		$('div#preview p#text').removeClass('color-teal');
		$('div#preview p#text').removeClass('color-aqua');
		
		
		/* add classes for colour to overwrite !important in _switcher */
		if (colour == "#000000") {
			$('div#preview p#text').addClass('color-black'); 			
		} else if (colour == "#C0C0C0") {
			$('div#preview p#text').addClass('color-silver');
		} else if (colour == "#808080") {
			$('div#preview p#text').addClass('color-grey');
		} else if (colour == "#FFFFFF") {
			$('div#preview p#text').addClass('color-white');
		} else if (colour == "#800000") {
			$('div#preview p#text').addClass('color-maroon');
		} else if (colour == "#FF0000") {
			$('div#preview p#text').addClass('color-red');
		} else if (colour == "#800080") {
			$('div#preview p#text').addClass('color-purple');
		} else if (colour == "#FF00FF") {
			$('div#preview p#text').addClass('color-fuchsia');
		} else if (colour == "#008000") {
			$('div#preview p#text').addClass('color-green');
		} else if (colour == "#00FF00") {
			$('div#preview p#text').addClass('color-lime');
		} else if (colour == "#6B8E23") {
			$('div#preview p#text').addClass('color-olive');
		} else if (colour == "#FFFF00") {
			$('div#preview p#text').addClass('color-yellow');
		} else if (colour == "#000080") {
			$('div#preview p#text').addClass('color-navy');
		} else if (colour == "#0000FF") {
			$('div#preview p#text').addClass('color-blue');
		} else if (colour == "#008080") {
			$('div#preview p#text').addClass('color-teal');
		} else if (colour == "#00FFFF") {
			$('div#preview p#text').addClass('color-aqual');
		}		
		
		
		/* check if colours are the same */
		warning();		
		
	
	  })
	
	  /* when user changes background dropdown */
      $('#background').change(function() {		
		
		/* get font and background colour to compare */
		var colour = $('#colour').val();
		var background = $('#background').val(); 		
		
		/* remove all classes first */
	    $('div#preview p#text').removeClass('white');
		$('div#preview p#text').removeClass('beige');
		$('div#preview p#text').removeClass('yellow');
		$('div#preview p#text').removeClass('rose');
		$('div#preview p#text').removeClass('lavender');
		$('div#preview p#text').removeClass('turquoise');
		$('div#preview p#text').removeClass('green');		
		$('div#preview p#text').removeClass('grey');
		$('div#preview p#text').removeClass('black');
		$('div#preview p#text').removeClass('blue');
		
		/* add classes for background to overwrite !important in _switcher */
		if (background == "#FFFFFF") {
			$('div#preview p#text').addClass('white'); 			
		} else if (background == "#FFF7EF") {
			$('div#preview p#text').addClass('beige');
		} else if (background == "#FFFFDE") {
			$('div#preview p#text').addClass('yellow');
		} else if (background == "#FFEBE7") {
			$('div#preview p#text').addClass('rose');
		} else if (background == "#EBEBFF") {
			$('div#preview p#text').addClass('lavender');
		} else if (background == "#DDFFFF") {
			$('div#preview p#text').addClass('turquoise');
		} else if (background == "#E3FFE3") {
			$('div#preview p#text').addClass('green');
		} else if (background == "#EEEEEE") {
			$('div#preview p#text').addClass('grey');
		} else if (background == "#000000") {
			$('div#preview p#text').addClass('black');
		} else if (background == "#0000FF") {
			$('div#preview p#text').addClass('blue');
		}		
		
		/* check if colours are the same */
		warning();
	
	  })
	
/*----------------------------------------------------------------------------------------*/
	
	
	  /* WARN USER WHEN COLOUR AND BACKGROUND ARE THE SAME */	
	
	  function warning() {	
	
	       /* remove any previous warning */
		   $('p.warning').empty();
		
		   /* remove previosu disabled attribute from submit */
		   $('#submit').attr('disabled', '');
	
	
		   var colour = $('#colour').val();
		   var background = $('#background').val();	
		
		
		   /* if colour and background are the same */
	       if (colour == background) {			
		
                       //<![CDATA[
		       /* show warning */
		       $('p.warning').append('<p>You have selected the same font and background colour so text will not be visible. You must select a different font and background colour before you can save your accessibility preferences.</p>');
		
		       /* disabled submit */
		       $('#submit').attr('disabled', 'disabled');
		       //]]>
		
	       }
	  }

		
	
})

I think you should look in to execCommand. It’ll do all that and more with a lot less code, and basic functions work on all browsers, even <IE9

execCommand doesn’t work on all browsers - it only works on IE.

Don’t you ever query things yourself before giving definative answers?