Have you been facing problems with css styling with different browsers
I faced one with the div width with IE and firefox
Here is a neat trick.
/* save the below code as css_browser_selector.js */
/*
var css_browser_selector = function() {
var ua = navigator.userAgent.toLowerCase();
var h = document.getElementsByTagName(‘html’)[0];
var c = h.className;
if(ua.indexOf(‘msie’) != -1 && !(ua.indexOf(‘opera’) != -1) &&
(ua.indexOf(‘webtv’) == -1) ) h.className=’ie’+’
ie’+ua.charAt(ua.indexOf(‘msie’)+5)+’ ‘+c;
else if(ua.indexOf(‘gecko/’) != -1) h.className=(‘gecko ‘+c);
else if(ua.indexOf(‘opera’) != -1) h.className=(‘opera ‘+c);
else if(ua.indexOf(‘konqueror’) != -1) h.className=(‘konqueror ‘+c);
else if(ua.indexOf(‘applewebkit/’) != – 1) h.className=(‘webkit safari ‘+c);
else if(ua.indexOf(‘mozilla/’) != -1) h.className=(‘gecko ‘+c);
}.apply(this);
*/ once done place this line of code between the <head> and </head>tag /* <script src="css_browser_selector.js" type="text/javascript"></script> */ now place the desire css
<style type=”text/css”>
.ie .example {
width: 102px;
height: 100px;
}
.gecko .example {
width: 100px;
height: 100px;
}
.example {
background-color: black
}
</style>
Most of the css attributes work, give it a spin I found a great article from rafael Rafael Lima ( http://rafael.adm.br )and got inspired to make this post as most of the time we face issues of width and placements etc
if you find the article useful do bookmark them
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Technorati Tags: technical, javascript, css, hack, width issue, styles
I love the idea of this, but I was wondering how to call separate style sheets, as opposed to writing it all in line.
Help with the syntax would be most appreciated.