I have this strange issue with css hover, on chrome and safari (on opera and firefox it works just fine).
Here you can find a demo of the problem
http://cgi.di.uoa.gr/~grad1054/bug/
In chrome when the mouse is over the html area tag, it somehow misses that is continues to hover over the general div, and so the css rule for the hover is not applied.
Do you have any ideas or solutions?
Thx
The map and area tags, although not officially deprecated, are not widely used anymore. It is possible that this is a bug in the Webkit rendering engine. As far as I can see, Firefox's behavior should be correct. The solution should be rather simple - to use some other element for this.
Solution: http://jsfiddle.net/NZEXY/1/
In my solution, I used the ul list and anchors inside list items to recreate this effect, using essentially sprite techniques to recreate the same thing with the same image, and still accessible (if you're using maps your areas are suppose to have alt attributes for that purpose).
If you have any questions, feel free to drop a comment.
Related
I have a peculiar problem relating to a CSS issue against an MS-specific pseudo-element in IE11 on Windows 7.
In order to eliminate the "clear/X" button at the right-hand edge of most INPUT elements in an IE11 form, I have added a simple CSS style rule as follows:
INPUT::-ms-clear{
display: none;
}
This seemed to work just fine - until someone came across the site in question and saw the very buttons this style was supposed to remove. So I started debugging the issue with the IE11 Dev Tools, and when I loaded up the offending page (with no "x" in my instance, as expected) I surely expected to see the style rule above in the "styles" pane - but no such luck.
On a lark, I tried adding this as an inline style within the dev tools, but IE11 indicated it would not apply - crossed out - but I could not find any other style that was trumping it. Disabling ALL styles for the page still left this pseudo-element style disabled. So now, I'm not sure why the "clear" button doesn't appear if my style rule isn't being applied.
I'm stumped. I have three instances of IE11, same version, same install source for that matter, two of which are rendering the same page from the same site in different ways, and apparently honoring (or not honoring??) this style rule inconsistently (or not at all). I'm just not understanding why - or why the rule isn't appearing in the dev tools. Possibly just a browser bug??
We discovered the cause of this problem.
When opening up two browsers against the same page on two different sites (localhost and test site), one with the "clear" widget and one without, we also noticed the rendered HTML was different, starting with the DOCTYPE declaration. That turned on a light bulb - emulation mode. Emulation mode told us that the instance of IE on the test box was rendering the page in Compatibility Mode by virtue of it being a site "on our Intranet," and the "Render all sites on Intranet in Compatibility View" option was checked. Unchecked this box, and the "clear" notch then honored our style and disappeared.
Problem solved.
Thanks for everyone's input.
Alas the IE11 F12 tools don't show ::-ms-clear in the styles panes even if they are applied to the element. Which is something we want to fix.
I found it's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right -- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field.
I'm guessing that IE10/11 is internally applying the padding-right of the input to the ::--ms-clear pseudo element, and hiding the pseudo element does not restore the padding-right value to the input.
Try this code
input[type=text]::-ms-clear{
width:0;
height:0;
}
or
input[type=text]::-ms-clear{
display:none;
}
and read more about ::-ms-clear psuedo element
The history auto fill sits on a random place on IE8.
While the same works fine on IE9, IE10, firefox and chrome.
here is a snapshot of the issue.
I have been searching for this from a long time.
Is there any solution for this?
I'd suggest right clicking the item, inspecting the element in your dev tools, finding what the id is of that autofill dropdown. See if there is some css attatched to that item. and then if necessary add some sort of CSS hack. below is a link to some tricks to target IE specifically. IE often requires little style hacks unfortunately. Hopefully the more they implement html5 standards the better this will become.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)
I have a HTML page where i have div to show help as shown in image above at bottom.
I also have combo box (select input) which is comming on top of this help div in IE 6.
For other browser and and IE6+ versions, it is working fine.
Is there any CSS hack for this issue for IE 6?
This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.
I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.
There are well-documented CSS hacks for all the versions of IE.
For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.
This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
As i know, by default IE6 will put above the other elements.
You could hide them (display: none) when this div.help is shown
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.