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.
Related
My page has a display issue on pageload with Safari (display inline-block element has a width of 0, after one JS inline style its fine). I can fix the issue with this extra style for my span element:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
I have to use at first the standard and after that my fix. On the current browser versions it looks good for FF, IE 9-11, Chrome and Safari (Desktop Mac).
My question is now: Is the order fine or can i get with some browsers a problem?
(Maybe browsers think: "Oh I have to make the inline element (span) to display:inline-block". And with the next line "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline".)
Hopefully you know what I mean? :)
The order is fine, however you will find that any browser which supports -webkit-inline-box will use this over inline-block. This may cause issues as the way the browser-prefixed version is implemented may not reflect how the non-browser-prefixed version is implemented.
For instance, Google Chrome supports -webkit-inline-box and will use this instead of inline-block. Off the top of my head webkit-inline-box is based on the old out-dated version of the Flexbox specification.
Perhaps a better solution would be to work out why Safari is giving your inline-block element a width of 0. This isn't behaviour I've witnessed myself, but Safari usually falls outside of the production browsers I test in.
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!
I am doing a site for my php class and have just about finished my project except for a weird floating issue in IE. I'm only floating left and right, but the site seems to be clearing left and not sure why IE is causing this issue. Any suggestions? http://ectweb.cs.depaul.edu/AHARDEN2/project/index.php
This is probably because IE8 and lower do not recognise tags such as <nav>, <section> and so on. Consequently they do not match your CSS selectors like nav ul li a {...}
Try rewriting your CSS to not use these tags in their selectors.
Side-note: IE9 works fine.
You could try adding a css reset like this one:
http://meyerweb.com/eric/tools/css/reset/
And an html5 shiv like this one:
http://code.google.com/p/html5shiv/
I have a hover effect in css. It works correctly in all other browser except in ie6.
The problem is if I give a link then the hover works in that page but if I take href from the page hover doesn't works, please help me.
You can't use :hover on anything not a link in IE 6.
Here is the quote from quirksmode:
IE 5/6 supports both only on links. IE 7 supports :hover, but not
:active, on all elements.
You can find that on this page.
Maybe you could use Whatever:hover: http://www.xs4all.nl/~peterned/csshover.html
Suckerfish is a tried-and-true IE6 fix for :hover
http://www.htmldog.com/articles/suckerfish/dropdowns/
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.