cjy8s@yahoo.com Posted February 20, 2012 Share Posted February 20, 2012 I'm having trouble with cross-browser development. More specifically, padding between Google Chrome, Firefox, and IE. It seems, as far as padding goes, that firefox and IE are having similar issues, and im not sure how to compensate for that. I understand that user.agent detection is not a very reliable way to go about this, and I've heard that feature detection might be better. How exactly should I go about this? What features should I be detecting for? Or am I misunderstanding the concept of feature detection? Link to comment Share on other sites More sharing options...
[dx] Posted February 20, 2012 Share Posted February 20, 2012 function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent); Here is javascript code. USAGE 1. Copy and paste the line below, inside <head> and </head> tag <script src="css_browser_selector.js" type="text/javascript"></script> 2. Set CSS attributes with the code of each browser/os you want to hack Examples:html.gecko div#header { margin: 1em; } .opera #header { margin: 1.2em; } .ie .mylink { font-weight: bold; } .mac.ie .mylink { font-weight: bold; } .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser] Available OS Codes [os]: win - Microsoft Windows (all versions) vista - Microsoft Windows Vista new linux - Linux (x11 and linux) mac - Mac OS freebsd - FreeBSD ipod - iPod Touch iphone - iPhone ipad - iPad new webtv - WebTV j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me blackberry - BlackBerry new android - Google Android new mobile - All mobile devices new Available Browser Codes [browser]: ie - Internet Explorer (All versions) ie8 - Internet Explorer 8.x ie7 - Internet Explorer 7.x ie6 - Internet Explorer 6.x ie5 - Internet Explorer 5.x gecko - Mozilla, Firefox (all versions), Camino ff2 - Firefox 2 ff3 - Firefox 3 ff3_5 - Firefox 3.5 ff3_6 - Firefox 3.6 new opera - Opera (All versions) opera8 - Opera 8.x opera9 - Opera 9.x opera10 - Opera 10.x konqueror - Konqueror webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome safari3 - Safari 3.x chrome - Google Chrome iron - SRWare Iron Link to comment Share on other sites More sharing options...
justsomeguy Posted February 20, 2012 Share Posted February 20, 2012 As far as layout issues go, the first thing is to make sure that you're using a doctype. If your pages don't use a doctype correctly then there will be several inconsistencies across browsers. Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted February 20, 2012 Author Share Posted February 20, 2012 I am declaring the doctype. I am also starting with HTML5. And Mr. Haris, would you please explain how that script works, so I don't have to feel guilty about using a charity script? And what makes that different from browser detection? Link to comment Share on other sites More sharing options...
Ingolme Posted February 20, 2012 Share Posted February 20, 2012 All the browsers should render padding, margin and borders the same way. You should not need Javascript to modify CSS. The browsers only render differently if you have an incorrect <!DOCTYPE> declaration. Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted February 23, 2012 Author Share Posted February 23, 2012 Yeah I have the correct doctype. I had the code validated at http://html5.validator.nu/, and it says: The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this service) I have it declared in this way :<!DOCTYPE html><html lang="en"> but now im confuzzled. did I miss something? Is there Link to comment Share on other sites More sharing options...
dsonesuk Posted February 23, 2012 Share Posted February 23, 2012 But! not all browsers use the default same padding and margins for elements, that is why, usually elements such as these are targeted and reset to zero, OR the universal selector is used to reset all margin and padding to zero *{ margin:0; padding:0;} then you set your own margins and padding to your preference to elements, so they will appear all the same in ALLl browsers. Link to comment Share on other sites More sharing options...
cjy8s@yahoo.com Posted February 23, 2012 Author Share Posted February 23, 2012 So, to understand you better, I need to be more scrupulous about setting all my margins and paddings, even if they do not have a special value? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 23, 2012 Share Posted February 23, 2012 Typical example is margins for paragraph,(I may have this wrong way round, about how margin are applied by specific browsers), some browsers apply margin: 1em 0; top and bottom, others say IE, margin-bottom: 1em; now both will give the same distance between paragraphs from the second paragraph to the last. BUT! the first paragraph will be 1em from the top of the page or containing div element, but the second will butt right to the top edge of page or div container. *{ margin:0; padding:0;} resets all elements margin etc to zero, then you define you own p { margin: 0.9em 0; } Now! all browsers will follow your own styling for the paragraph element, and not the varying default setting depending on browser by themselves for the paragraph element. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.