.body_c {
scrollbar-face-color:#408bc4;
scrollbar-shadow-color:#afefff;
scrollbar-highlight-color:#afefff;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#006399;
scrollbar-track-color:#bfd3e6;
scrollbar-arrow-color:#FFFFFF;
margin-top:0;
margin-left:0;
margin-right:0;
}
I am using this class for coloring scrollbar but it execute only with IE.
Have any solution for color scrollbar in all browsers ?
You can do a similar thing in Webkit browsers with different rules. None of this is officially part of CSS though and other browsers don't support anything like it, AFAIK.
First and foremost though, consider not messing with standard GUI elements. Scrollbars, buttons etc. should look the same across all websites and applications. It's a basic usability rule.
If you must change the appearance of your scrollbars, note that only IE and Webkit browsers support CSSscrollbar changing, but here is a JS plugin that will change the scrollbars in all browsers
jScrollPane.
But usually it's not a great idea as it might confuse your users and elements like this should be the same in all browsers.
Hope that helps.
Related
My checkbox have a default webkit style like this:
input[type="checkbox"] {
-webkit-appearance: checkbox;
box-sizing: border-box;
}
Now the checkbox is not working in IE8.
I have tried to overcome this by adding:
<!--[if IE 8]>
<style>
input[type="checkbox"] {
font-size: 12px;
line-height: 1.2em;
/*-webkit-appearance: none; */
}
</style>
<![endif]-->
this to my HTML ,but still it's not working.
As I am not a front end developer ,if there is any thing wrong in the question please feel free to edit.
Note:From the comments i got to this question I understood that webkit styles won't work for IE.So I think i need to find a way to just show default check box style with out Webkit for IE.Any one have any thoughts?
Styles the begin with -webkit- will only work on browsers that use the Webkit rendering engine.
IE does not use Webkit, and thus it does not support anything that starts with the -webkit- prefix.
The whole point of the prefix system in CSS is to tell us that the prefixed styles are non-standard and/or experimental. They will only work in one specific browser engine.
In many (but not all) cases, where there is a -webkit- style, this are also equivalent -moz- and -ms- styles for Firefox and IE. There may also be some browsers that support the style without a prefix. Therefore, when using a prefixed style, you should always check for browser support and whether you need to also specify other alternative syntax.
But even then, they'll only work if you're using a version of the browser that supports it. IE8 in particular is a very old browser, and lacks support for a lot of more modern browser features.
You should not be surprised if modern techniques don't work in IE8. There are work-arounds and 'polyfill' scripts for some features, but others are simply out of reach for this browser.
If you need to support IE8, you need to make sure that any features you're using are going to work, and if they're not, you need to either accept that and give IE8 users a reasonable fall-back solution (so the site is still usable), or find a work-around or alternative.
A good site to visit to find out whether any given feature works across various browsers is CanIUse.com.
It's because ie is not based on webkit, but chrome and safari are. For your checkbox, theres css tricks with :before and :after pseudo class.
Take a look here for details http://csscheckbox.com/
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
If you look on the right, http://forensicon.net/blog/ - the width for the sidebar names renders differently in IE9 and FF. I'm not sure why it fills all the way to the right in IE9 even when I explicitly give it a width. I'd like to understand what is causing this behavior so I can avoid it in the future.
The problem is you have a comment before the doctype. This puts IE into quirks mode and it won't attempt to perform like all the other far more modern browsers. Remove everything before the doctype.
Yes, this is an age-old problem. Different browsers have different defaults for things like header and list tags.
Use a CSS reset and explicitly style them the way you want.
There may be different CSS base styles defined by the browser that are causing it to render inconsistently. You might want to consider using a base reset CSS that resets all the styles to a common foundation across browsers, and then lay your custom CSS on top of it.
A very popular one out there is YUI Reset CSS
http://developer.yahoo.com/yui/3/cssreset/
Will we need to use a CSS Reset if we don't consider any version of IE (Internet Explorer)?
I'm making a website where I don't necessarily to consider any version of IE. Would it be OK to not to reset anything for Safari, Chrome, Firefox and Opera?
Is it only IE which forces us to use a CSS reset, or do other browsers also have inconsistencies?
The point of css reset files isn't solely to make certain functionality work in older versions of internet explorer, it's to make the job of presenting using css the same between browsers.
Yes, you would still need to if you want to support many browsers. It is not only Internet Explorer that needs reset.
Which browser was it, I forgot, but either it was Firefox or Opera that had different default settings too, not just IE.
Nevertheless, it is a safe move to do, and you can rest assured that it will save you a few problems.
Usually, a reset is only about a few kilobytes, which is not much.
I think this post here should give you a good idea WHY to use RESETS and how it isn't ONLY about IE (flavours) that cause problems:
... there are all kinds of
inconsistencies, some more subtle than
others. Headings have slightly
different top and bottom margins,
indentation distances are different,
and so on. Even something as basic as
the default line height varies from
one browser to another—which can have
profound effects on element heights,
vertical alignments, and overall feel.
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
You always should use a reset.
Works in IE8 & Mozilla
select:focus, input:focus,textarea:focus
{
background:#abd533;
font-family:verdana;
}
While using IE7, I observed that input field background color not shown, but it appears in IE8 & Mozilla.
Can anyone please let me know what to do with IE7 or IE6 ?
It is a bug in IE7
See
Basic Selector Support Tests
You can use javascript to detect focus and change the class name.
i would to show you this link. It deals with a lot of browser issues:
http://quirksmode.org is pretty good for listing browser bugs and compatibility.
Taken from my question:
Collection of Browser characteristics
Just want to add this cause this sites helped me a lot.
I think you've encountered one of Internet Explorer's (many) bugs.
For IE6 and 5, this page is quite useful for form control styling: Styling Form Controls