I have trouble with focus in IE. It works in all browsers except in IE.
It works fine on hover, but when I click on the button it stays selected in IE.
<div class="controls_toggle"><img src='play.png' alt=''/></div>
Here is the demo:
http://jsfiddle.net/tu734/1/
In IE there must be declared a DOCTYPE for the :hover selector to work
Just write at top of your page
<!DOCTYPE html>
Related
Here's my deal:
The boss asked me to fix a page not displaying properly in IE7.
I'm working with a div tag initially set as:
<div id="login_content" style="left: 0px; text-align: center;">
And so it is rendered in Firefox, Chrome, Safari, and IE9. The issue comes in IE7--somehow the div is cut off when IE7 automagically decides to set the inline style with a height of 8px.
There are no scripts that modify this (as I said, it doesn't get touched in other modern browsers) and upon inspection with IE9 developer tools, it's not inherited from a style sheet. Does anyone know what might cause this behavior?
If it's running through an external script it's probably an inline style in that. If you post a link we can use inspection tools.
You can use the conditional <!--[if IE7] code to fix it [endif]--> to just change how it renders on IE7.
ive written a css code that was kinda compatible to firefox and chrome.
i didnt check internet explorer.
when i opened my website with internet explorer the location of the boxes were all messed up.
so i needed to add a doctype.
but when i added the doctype my boxes arnt right shown at any browser.
im not really experienced with css so any help is welcome.
how it should be (not internet explorer)
" www.informatica-sj.bplaced.net "
how it is when i add a doctype rule
http://www.informatica-sj.bplaced.net/doctype/index.html
both of my css and index.html
http://pastebin.com/Rz1GH41a
Your doctype should be
<!DOCTYPE html>
This works across all browsers and should be added to the top of your HTML.
I noticed that you aren't declaring a value on the end margin property
margin: 50px 0 0 529;
Should be 529px;
So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
i have a dropdown menu in css, it works fine in Chrome, FireFox, but not IE8, i haven't checked it in IE6/7. but it seems hopeless.
my site at HERE.
The dropdown menu is the black one.
i think the problem is with the :hover, try searching around something like #button .a:hover, etc... but get no luck.
I hope you can help. the css file is HERE
Thank you sirs
The problem is that you have not included a doctype on your website.
Because you haven't included a doctype, your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
Add these two lines to the very top of your file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
If you add in that magical doctype line, your drop down works in IE8 and IE7.
You should move this part of your code to within your <body> tag.
<span style="float:right;margin-top:10px;">
</img>
</img>      
</span>
Also, you can change it to something like this:
<div style="position:absolute; top:10px; right: 10px">
<img src="img/vn.gif"></img>
<img src="img/us.gif"></img>
</div>
When this sort of thing happens - go to Tools --> Compatibility Mode ; and make sure it's off. I have had similar issue and switching that off made my menu work properly (where it wasn't working at all).
In my CSS file, I have defined a class as given below.
input.entryFormInputBoxColor:focus
{
background-color:cyan;
}
When I use Firefox (3.5.5), the Input Box background color changes to cyan when there is focus, but it is not changing in IE (6.0). The class is successfully executing in Firefox, and all other classes defined, work well in IE too, but the above given class fails in IE.
Internet Explorer did not support the :focus pseudo-class until IE8, and only then when a !DOCTYPE is declared.
Here is a nice overview of CSS compliance from IE6 to IE8:
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
You can overcome this pretty easily with javascript, for example: jQuery's focus() and blur() events.