Will this code block work on IE7 and IE8??
background: none #9C1F31 !important;
Will background property work on IE7 and IE8? I dont have IE7 to verify this code.
Please advise me.Thank you.
Yes. It will work on IE7 and IE8.
You can refer more here
FYI: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE.
Related
I'm using scroll-margin-top on an anchor point to add space for my sticky header, but it is not supported in Safari.
These docs here - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin point out this bug -
Scroll margin is not applied for scrolls to fragment target or scrollIntoView(), see bug 189265.
Aternate Name Uses the non-standard name: scroll-snap-margin
Is there any way around this bug?
This is the only solution I've found so far that works in both Safari and Firefox... Safari-specific selectors. It's not ideal, because using padding in the Safari element limits the styling you can use, but it beats everything I've tried otherwise.
.anchor { scroll-margin-top: 130px; }
.anchor::-webkit-full-page-media, .anchor:future, .anchor:root .safari_only { padding-top: 130px;}
I had the same problem with safari, here is my solution:
[id] {
scroll-margin-top: 3ex;
outline: 0 none;
#media screen and (-webkit-min-device-pixel-ratio:0) {
margin-top: -3ex;
padding-top: 3ex;
}
}
According to caniuse.com, scroll-margin-top is now supported in safari as well.
But I get a warning in VS Code from the webhint plugin to use scroll-snap-margin-top in order to support Safari 11+. There's also a related article & a stackoverflow question, which mentions the same thing.
You would have to use scroll-snap-margin-top instead of scroll-margin-top and this is because Safari has implemented it as part of the CSS scroll snap module, which means it is only to be used with scroll snap containers.
scroll-margin-top indeed seems to work fine in Safari nowadays (tested on IOS). I landed on this topic as I had an issue with it in Safari but found that the references from Mozilla and "CanIuse" mentioned by others in this topic confirm that the later versions of Safari fully support scroll-margin-top.
In my case the issue in Safari was that I had set scroll-margin-top on an element which had "display: inline". Changing that to "display: inline-block" solved the issue. Strangely enough the issue didn't occur on desktop browsers, there it worked already with "display: inline", but for IOS (Safari and Chrome) it needed "display: inline-block".
A very nasty issue to figure out, I hope this helps someone.
I'm trying to get this menu working with IE (mainly 9+ atm) and am having trouble. There seems to be some weird padding issue that I can't seem to track down. Any ideas?
Here is the JS Fiddle: http://jsfiddle.net/Ztzn6/
IE Verion:
Chrome Version:
Add vertical-align: top; to your second rule group (the one with display: inline-block). You're running into some fun rules about how line-boxes and inline elements work, IE seems to be using a different default behavior.
Are there valid hacks in IE6 and 7 for W3C compatibility?
I believe there are W3C incompatibilities when using hacks. For example, using the following CSS code (as suggested under option 2 in this article: http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer?cp=1):
.box {
height:200px;
_height:200px;
}
gave me the following error in the W3C CSS validator:
Property _height doesn't exist : 200px 200px
If I'm wrong please advise.
Thank you.
This alternative hack should do it:
/* Both of the following will be used by IE only. */
* html .box{height:200px;} /* IE6 only */
*+html .box{height:200px;} /* IE7 only */
Options 1 and 3 in that article — i.e. HTML conditional comments — are the way to go. They don’t trip up the HTML validator, and they’re explicit — they say “use this code for this version of IE”.
You can use them to apply different stylesheets that only fix Internet Explorer bugs. This keeps your IE bug workarounds separate, so that when, for example, the IE6 countdown reaches zero, you can remove your IE 6-specific CSS without affecting anything else.
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}
I've run into a weird quirk. The website I'm building for Escondido Arts Gallery has all of it's text in each element left-aligned in firefox and IE, but for some reason everything is center aligned in Safari. Is there one simple css or html fix I can do to fix this, or am I going to have to 'text-align: left' every element?
No surprise there:
<body tracingsrc="../../non assets/web2.jpg" tracingopacity="30" align="center">
Just get rid of the proprietary attributes (align="center" especially), and your problem is solved.
There is something wrong with the CSS (or there's an unclosed html tag). The center align property must be cascading from some other element because it's not only safari/chrome (which also uses webkit) but also opera that shows the things center aligned, and both safari/chrome and opera are more standards compliant than ie and even firefox.
* { text-align: left; }
If things are cascading properly this should conceptually be enough:
html, body { text-align: left; }
Depends on why it is left-aligned. If it's simply the browsers applying different defaults, you can do as greyfade says to make all tags default to left-align in all browsers.
If the problem is bugs in the browsers CSS implementations, then you may have to trace down why the browsers disagree, and find some workaround to that.
Specifying a strict rather than transitional doctype may also help in getting more uniform behavior from the browsers (and let's be honest here, can we really claim to still be "transitioning" to HTML4.01 or XHTML1.0? Both standards have been out for close to a decade.)