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
Related
I am writting css as
.hidetext { -webkit-text-security: disc; }
To showing in table by hidding this text using following code.
<tr><td>Ramp : </td><td class="hidetext"><?php echo $_POST["uma"] ?></td></tr>
This is working on chrome it not working on mozilla.
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
In short, Firefox does not support it.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security
However, there is a package that aims to provide Cross-browser alternative to -webkit-text-security
https://github.com/noppa/text-security
Any css property beginning with -webkit- is only supported by chromium/chrome based browsers such as Chrome, Opera, Edge and so on. But Firefox is not one of them, hence it does not work.
I have created a simple CSS flip animation which works in other major browsers, seems to be not working in IE 9.0 or 1.0 for some reasons.
jsbin handler.
http://jsbin.com/IQUqUBe/1/
Below is the links which i have looked upon.
https://github.com/vinothbabu/3DFlipper
http://davidwalsh.name/demo/css-flip.php
I am not able to figure out where is the issue whether its z-index or any other property which is causing this issue and also can you guys suggest on how to debug CSS code if possible.
When it comes to debuging CSS code you can use developer tools.
For Firefox the best solution would be Firebug
for Chrome, developer tools are built-in. Simply press F12
for IE there is Internet Explorer Developer Toolbar
Its not that it does not work in IE 10. set a doctype at the top: <!DOCTYPE html> This will take IE out of quirks mode. Below is the fiddle for the same.
http://jsbin.com/IQUqUBe/3/edit
This should make the code to work in IE.
I don't know what the problem is specifically, but here is a link saying that transition does not work in IE9: http://caniuse.com/#search=transition
If you go in the "issues" tab, you'll see that it doesn't work on any pseudo-elements beside :before and :after for IE10 (and others).
EDIT: As pointed out in the comments, :hover is a pseudo class, and the link doesn't say that it doesn't work for IE10. I still don't know why it doesn't work.
Have you tried removing the -ms- prefix ? Apparently IE10 supports the transition without prefix.
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.
.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.
When IE8 is released, will the following code work to add a conditional stylesheet?
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8.0.css" />
<![endif]-->
I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.
One thing to note:
It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)
This goes against MSFT's original statement of going STANDARDS by default.
e.g.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.
To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):
javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
rMode='IE8 Standards Mode';
} else if(vMode==7){
rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);
It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.
Tools/Compatability view settings
uncheck them all
Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.
This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.
In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.
Thanks
Why even bother writing a separate stylesheet for IE8?
If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.
All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.
And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!
Even Msn.com does this - kind of ironic, eh?
Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/
IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g.
i had a class like
.niceclass {some:properties;more:properties;}
it worked only if i changed it for something like:
.parentclass .niceclass {some:properties;more:properties;} or
#parentselector .niceclass {some:properties;more:properties;}
btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.
For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.
I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.
Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.
Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.
* + html #test[id] { color:lime }
Now, I do not know if this works for IE7 or below, so you would have at least three
different hacks for each IE release you want to support, e.e.
* + html #test,
html+body #test,
* html body #test
{ color:lime }
I wonder what the next regression of the Internet Exploiter will behold for us.