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
Like this:
Like Loading...