apply different top to the caret only on opera - html

I want to put a opera specific CSS on my app.
How can I give a different top value so that it doesn't affect on other browsers.
Thanks

Try this:
noindex:-o-prefocus, .your_class {
//your CSS rules here
}

Related

on IE 11 Input browse button is not coming with space as in IE8

The input browse button should come as with space on IE11 as it comes in IE8.
See the below images so that you can have a clear idea on my issue.
On IE11, it is coming like this, i mean this is wrong.
On IE8, it is coming like this, i mean this is right.
So, i need the same button should come with space in IE 11, Any help?
Every browser uses its own styling for <input type="file"/> and it's usually better to just accept that and use the default as there is no standard-compliant solution for styling the upload button (at the moment).
However, if you insist on adding the space, you can use the non-standard ::-ms-browse selector for targetting the Browse button on the latest IEs.
For example:
::-ms-browse {
margin-left: 5px;
}
(You can use ::-ms-value for styling the input field part.)
Please have a look at this question: How to remove default file input style on IE10?
You can't achive changes in IE10 and greater with conditional comments because they were deleted in 10 and 11.
The new workaround is with media queries in css:
Use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
input (or whatever your selector is) {
/* your css here */
}
}
For further information regarding css-hacks for IE10 and greater: http://www.impressivewebs.com/ie10-css-hacks/
Its a default browser property so we can't do this

particular css class will be executed in IE8 browser and border-radius not working

1.I have the following class in CSS file
.dashboard-area {
width:1200px;
}
I havethe above code / css class wil be included in IE8 browser instead of all browsers. I do not need to give this as separte CSS and makes the thing like. how can I give conditon in CSS code itself to execute in IE browser only.
IE8 css selector
2.border - radius not working in IE8 browser but working in all other higher version of IE.
how can I implemeent "border-radius" to work in all browsers of IE (7,8,9).
Thanks,
You shouldn't do this but you can target IE8 with this:
#media all\0 {
.someSelector {
color: brown;
}
}
Or
.someSelector {
left: -8px\0;
}
IE8 doesn't support border-radius http://caniuse.com/#feat=border-radius but you could use a polyfill like css3pie to achieve it.
Regardless I recommend you to use conditional comments

-moz-document element CSS not getting rendered

I've this specific CSS code for Firefox browsers.
#-moz-document url-prefix(){
.bill-tab-fixed-width{
width:104.5px;
}
}
But firefox does not render this value. It instead render the style that I've defined for other browsers! When I inspect the element the value I've defined is strike through. Am I doing this wrong? Please help!
Firefox version 19.0.2
Thank you.
Its basically being overwritten by the other rules. Either move this block below the other rules in the stylesheet or add !important to force it to use this style.
#-moz-document url-prefix(){
.bill-tab-fixed-width{
width:104.5px !important;
}
}
Note: defining pixel values as a decimal is probably not a good idea. It is impossible for a screen to use half of a pixel and browsers can tend to round slightly differently.

CSS for style change - Not working with chrome

li.disabled a {color : #808080;}
I've added the above in .css file and my expectation is to find any <li> tag with class as disabled and make the corresponding content given in ??? this tag to be displayed as gray in colour.
Example of my html would be http://pastebin.com/cnA4gqb3
This does not seem to work on browser like chrome. Can you suggest me a generic css which will work in common across all browsers?
This is probably a "importancy" issue. Some other CSS is likely to be more important to Chrome. Try adding !important or change the order of your rules.
You can use something like this :
This is used for safari and chrome basically,
`#media screen and (-webkit-min-device-pixel-ratio:0) { #u { color:green; /* Safari only */ } }

Images margin style on Opera looking out of place

I have two images out of my whole website that look out of place only on Opera. I was wondering if there was a way I could add padding or a margin on top of the images to style them within Opera only.
Please let me know if there are any specific tags I can use within Opera only.
Thanks
Edit:
I tried this but it didn't work:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.logo_style {
margin-top:-40px;
}
Something like this used to work well however the answer is normally there is a non hack way to fix the problem
#media not screen and (1) {
.yourClass {background:red} /* OP 11 */
}
#media not screen and (orientation) {
.yourClass {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}