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)
Related
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 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.
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.
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.
In firefox, safari, ie8, the menu system on my site works great.
However, in IE7, the link items simply disappear! I've tried many things to see where they may have escaped to, but they have seemed to simply vanish!
This site seemed like it might be onto something, except there are no floats in my header section whatsoever!
Now, I'm usually pretty good with CSS and can get my way out of most IE bugs, but this one is driving me slightly insane.
I've tried using IE8's developer tools too but have not managed to fix it.
Any ideas?
Note I realise this site breaks a few usability conventions (the checkbox for one) but I did not design it and don't have much of a say :(
The problem is
#header ul li {text-indent: -9999px}
I can't tell you why other browsers handle it but I tested it and I know it's the problem.
What happens in IE7 if you try position: fixed instead of position: absolute?