My problem is that although the site seems to work fine in Chrome, in version of IE8 the fixed bar(div and ul) is invisible. I have tested with X-UA-COMPATIBLE option, IF IE conditional sentence, but I can not solve it at all. I have struggled about 1 week, now I am so tired.
And in IE9, it is much slower than that of chrome.
My site address is http://kyuh.maddesign.co.kr
I do apologize if there is a obvious and simple answer that I've been too stupid to spot.
At last, this problem is fixed.
For a long time of googling and many tries, I have found what is working in my case.
It is.... {zoom: 1} css option.
.ie8 classname {zoom: 1}
If you have same problem, try this one!
Related
I am trying to modify one WordPress theme http://demo.wpzoom.com/evertis/ and use it on my own site.
However, something weird occured, the footer area will not display properly with Firefox (while it works fine on IE8):
The original theme works fine on Firefox and IE8.
Whats the possible reason?
More Information: I am using Notepad++ with Encoding "UTF-8 without BOM." Many years ago, I saw a problem similar to this one with IE6, after I change the Encoding to "ANSI", everything is fine. But this time it wont work.
Thanks a lot!
Try overriding the margin-right on the last footer section, something like:
.wpzoom-flickr-photos { margin-right:0; }
I think the problem is with the display: inline-block which is known for having issues. Here is an article where you could find the answer you are looking for:
http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
Piece of crap IE, just literally hate it.
Ok, this is what I did, jsbin.
How do I make menu-bar look prettier or similar, like in FF&Chrome, in older versions of IE?
Also I dont get it, when nesting elements like #nav ul li they are not applied in IE 8 and less, why?
A little piece of solution, maybe it will help you achieve what you're looking for :
For enabling certain HTML5 functions disabled in older IEs :
Modernizr
Shiv
Both of them can help you achieve your result. Hope it will help you, if not, feel free to discard my answer.
You should add html5 shim, because older IE doesn't understand HTML5 tags. You can also move id to ul instead of header element
Consider this CSS:
[data-color="red"] h1 {
background-color:red;
}
[data-color="blue"] h1 {
background-color:blue;
}
And this HTML:
<div data-color="red">
<h1>red</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
Now take a look at the following demo of the above code in Webkit and any other browser:
http://jsfiddle.net/aUCkn/
What's strange is that if you put each h1 on the same line, i.e.:
<div data-color="red"><h1>red</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
It works in Webkit too:
http://jsfiddle.net/aUCkn/1/
Does anyone know where this comes from? Am I doing something wrong or is Webkit acting stupid here?
The first jsFiddle is broken in my Chrome 12.0.742.112 (stable).
However, it works in my Chrome 14.0.803.0 dev-m.
So, they're already aware of and have fixed the bug. You just have to wait for the fix to land in the stable channel.
I'll try to find a link to a bug report, if one exists.
Try adding [_] {} to your CSS (doesn't matter where).
In reality, it can be any attribute selector rule, without a descendant clause, that will potentially match the attributed elements selected by the original selectors, i.e.: [data-color] {} and div[data-color] {} will fix the others, but a[data-color] {} will not fix it.
I've tested it on the posted fiddle (http://jsfiddle.net/aUCkn/) and it works for Safari (5.1.2).
My co-worker and I found it after playing with lots of random ideas for workarounds.
When using Chrome (Webkit) I get this issue as well, though it seems to work fine in Firefox and IE9. It definitely appears to be a problem with Webkit that the extra whitespaces cause problems.
--- UPDATE ---
This issue is fixed in Chrome as of version ~18, it continues to be an issue in other WebKit based browsers.
As far as solutions for this issue, Michael Morton's answer above is the best one here - it is more flexible and performant than mine. I have upvoted Michael's answer and suggest you use it.
Here's a CSS hack that fixes the issue: http://jsfiddle.net/aUCkn/101/
You just need to put * + before the selector. Now before you all grab your pitchforks and torches over the use of the star selector, remember that it is all the way to the left, so it shouldn't affect performance in any meaningful way ;)
PS - I can also confirm this bug affects ALL versions of ALL WebKit browsers on ALL platforms and devices - other than Chrome 14+. What an absolutely terrible bug, now the majority of WebKit browsers need to retract the claim they support even the now-ancient CSS2.1 spec. Wow, LOL.
http://ec4u.dev.creative-ctrl.com/product/wallys-natural-100-beeswax-ear-candles-12pk
Check it.
cannot get .menu ul to render for the life of me!!
strange enough, it renders in ie6, ie8, safari, and ff, but not ie7! I've tried everything. Any ideas?
(I'm pretty close to xhtml strict validation too).
It looks it's the IE7 CSS (themes/EC4U/ie7.css) that is responsible. Simply removing those styles was enough for the menu to show up for me.
I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.
First off, here's the website: www.mchenry.edu
View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with
#banner p#img a:hover {text-decoration: none};
But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.
Thanks for any insight you guys may have.
Okay, let's see. This is where the developer tools come in handy.
Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.
Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.
However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!
So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".
Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).
try this:
#img a:hover {text-decoration: none!important;}
I have just encountered this same bug under IE8 (version 8.0.6001.18702).
I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.
Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:
<img src="test.gif" alt="test"/>
Then you can use the CSS:
a.imagelink:hover { background-color: transparent; }
This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.
Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).
I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.
Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or by adding this line to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
to force IE8 into IE7 compatibility mode.