Jump to content

Setting Styles Based On Js Browser Detection


Recommended Posts

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 by chibineku
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...