Is there any way that I can override something in css and use different size if user/visitor uses opera?
Example, in chrome, ff and safari this works great:
.section#search h3 a {
background: url("../img/search.png") no-repeat 0 50%;
padding: 0 0 0 25px;
position: relative;
}
But in Opera padding is not really good... I need to add top: 16px; into it or to change padding to padding: 0 0 36px 25px;
Is there any "hack" like for IE or maybe javascript usage? No ideas...
All I need is to add that top or new padding just for opera. Thanks ;)
Is there any way that I can override something in css and use different size if user/visitor uses opera?
Example, in chrome, ff and safari this works great:
.section#search h3 a {
background: url("../img/search.png") no-repeat 0 50%;
padding: 0 0 0 25px;
position: relative;
}
But in Opera padding is not really good... I need to add top: 16px; into it or to change padding to padding: 0 0 36px 25px;
Is there any "hack" like for IE or maybe javascript usage? No ideas...
All I need is to add that top or new padding just for opera. Thanks ;)
Share Improve this question edited Aug 30, 2014 at 20:30 AstroCB 12.4k20 gold badges59 silver badges74 bronze badges asked May 15, 2012 at 22:28 dvldendvlden 2,4628 gold badges39 silver badges61 bronze badges 6- 1 You might wanna detect the browser first. – inhan Commented May 15, 2012 at 22:29
- Hmmm and how should I do that fella ? – dvlden Commented May 15, 2012 at 22:30
- Is it a php/asp page or is it an htm(l)? – inhan Commented May 15, 2012 at 22:31
- 2 Maybe this post would help you a bit. stackoverflow./questions/1120335/… – Adam Commented May 15, 2012 at 22:32
- its html ... that thing looks good so far... I tested for one id only tho... But I hope it will work for others. – dvlden Commented May 15, 2012 at 22:36
4 Answers
Reset to default 3With the conditional-css tool, you can target opera, but engine is important. conditional-css. explains:
Conditional-CSS isn't really all that interested in which browser the user is using, but rather what rendering engine the user's browser utilises. This is why Conditional-CSS uses 'Gecko' rather than the well known Firefox as one of it's browser conditions. Likewise for Safari 'Webkit' is used. This allows other browsers using the same rendering engines to receive the same targeted CSS. An exception to this rule is made for IE (rather than using 'Trident') since this is what the IE conditional ments use and Trident isn't particuarly well known. Similarly for Opera, since only the Opera browser uses it's Presto rendering engine, 'Opera' is used.
http://www.conditional-css./advanced
they write that a conditional tag is formed like:
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]
and that browser names are as follows:
IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front
So it should logically follow, according to them, that you can target via:
[if Opera]
like this in a CSS block:
[if Opera] .box {
width: 500px;
padding: 100px 0;
}
or like this for a CSS include:
<!--[if Opera]>
<![endif]-->
You can use a JavaScript library like Modernizr to test for browsers and use the css classes it adds to target Opera specifically.
Before you plan to use work-arounds and hacks, consider the following:
Is your page in strict mode? If not, add a doctype to the very first line of the page:
<!DOCTYPE html>Otherwise, your page is in quirks mode, and it's the main cause of inconsistencies across browsers.
Try using a CSS reset. This should iron out little inconsistencies across browsers like paddings, margins, alignments and more. Load this style before any other styles.
what versions and types of opera? you can use this media query
@media not all and (-webkit-min-device-pixel-ratio:0) { } to target opera 10, 10.5,11, and 11.6
check it out here: note, i only viewed in chrome19 and opera 11.6 http://jsfiddle/jalbertbowdenii/fw94a/
better
x:-o-prefocus, p{}
http://jsfiddle/jalbertbowdenii/6pRPC/