Setting Styles Based On Js Browser Detection

[chibineku]

I am using JavaScript to sniff AOL browsers and, if detected (I know the detection works, I tried it on tryiteditor), a function that runs after the body is loaded that sets the margins of a few elements to different values in order to clear up some whitespace that shouldn't be there. I know the measurements work, and I know the sniffing works. Here is my code:

 function browser() {   var breadcrumb = document.getElementById("breadcrumb");   var footer = document.getElementById("footer");  if(navigator.appVersion.indexOf("AOL") != -1) {	breadcrumb.style.marginBottom = "-20px";	breadcrumb.style.marginTop = "-10px";	footer.style.marginTop = "-10px";  } }

the test page is here:http://www.sinaesthesia.co.uk/ietest.php5Any thoughts are appreciated.

Edited August 22, 2009 by chibineku

[dsonesuk]

var footer = document.getElementById("footer); spot the mistake mmmm come in single and double, but you require double to fix.to late you spotted it haha

Edited August 22, 2009 by dsonesuk

[chibineku]

Ha, yup.Okay, my current plan, which is working, but is ugly:I add a javascript to the head portion of each page that looks like this:

<script type="text/javascript">  if(navigator.appVersion.indexOf("AOL") != -1) {  document.write('<style type="text/css"> #breadcrumb {margin-bottom:-20px; margin-top:-10px;} #footer{ margin-top:-25px;}#center,#left,right{margin-bottom:19px;right:50px;}#container{margin: -19px -25px 25px 0;}#right{margin-left:-50px;}#wrapper{margin: 0 -25px;}</style>');  }  </script>

And whatever styles I want, I put them in there. I can't quite get it to work properly here:Visit My WebsiteI'm edging closer, but the AOL box model is...weird.

[dsonesuk]

I think the problem might be that you have the css links below the javascript which changes the the css styling of some elements.The javascript changes are made, but the css links below take effect, and changes them back.put css links above javascript and see what happens.