IE Button issue - css

There is an issue with the button "learn more" in IE only that causes it to run down the page and distort the layout.
Page URL: http://www.mvholisticretreat.com/
CSS: http://www.mvholisticretreat.com/wp-content/themes/nebula/style.css
any help would be greatly appreciated.
Thank you !

issue 1: clean up your code, you have a useless endif in
issue 2: you have some styles before your doctype. this is why IE loads by default in quirks mode. fix your doctype declaration and it's almost fixed.
To preview issue, in IE9 press F12, and from the quirks mode dropdown chose IE 9 Standards, you'll see how the site gets fixed

Related

IE9 quirks mode issue Wordpress

When viewing this site http://hefrani.com/ on IE9 its showing issue . Its working fine in all browser.
Its showing issue only in IE9
Please help
You have a style element before the doctype, which throws IE into quirks mode.
Additionally, check this page for more errors: http://validator.w3.org/check?uri=http%3A%2F%2Fhefrani.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

box-shadow does not work in IE9

Ive seen a lot of talk about box-shadow in IE9 - but when i try it out it does not work! (of course im not suprised ... sigh). Am i mistaken that these thing are supposed to work in ie9 or is mys css wrong or is there a mode in ie9? Heres the CSS code im using:
.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}
Same goes for border-radius. Ive even opened up CSS3 sites that have these attributes like http://css3please.com/ and they dont work in IE9 either. Actually: bugger IE!
OK - found the problem. Firstly thanks to sandeep for refering me to part of the problem. IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables - use cellspacing=0 then it works - still: bugger IE
It should work (as far as I know - will run some simulations later). In the meantime your can check out CSS3 PIE (http://css3pie.com) that enhances IE rendering of CSS3 properties (not really IE's rendering, but close enough).
According to CanIUse.com, IE9 does support box-shadow and border-radius.
I haven't tried it with box-shadow, but I can definitely vouch for it working with border-radius
The most likely reason for it not working is that you're actually running in IE8 compatibility mode (or even IE7 compat). This will make IE9 drop all the new features and pretend to be the older version.
The quickest way to check if this is the problem is to hit F12 to open the IE developer tools window. This will show the rendering mode in the top right hand corner.
If it is rendering in compatibility mode, then you can change it here. You can also add a meta tag to the top of your code to force your site to use the latest IE mode. If it's happening for every site then you may need to change your browser settings.
Hope that helps.
Ooops - im sorry but i wasnt entirely correct in my testing - it seems that doctype is essential for these things to work. But then everything else breaks down. I think next time ill write for IE first then the others - hey mabe thats microsofts strategy all along!
I also was experiencing the problem where the box shadow was not being displayed in IE9. In my case, IE9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
The reason box shadow does not work is that IE automatically runs in quirks mode which does not support this.
If you set internet explorer to run in standards mode it will display box-shadow correctly
you can force ie to run in standards mode by following this post: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
If you can't edit http headers then use: <meta http-equiv="X-UA-Compatible" content="IE=edge">
(or <meta http-equiv="X-UA-Compatible" content="IE=edge" /> if you're using XHTML)
It should work fine if you do this

Cant force website not to render in IE7 in IE8

I have a webiste that is going into IE7 Mode in IE8 and I dont want it to be
I've tryed adding the meta tag to force it but IE just ignores it when on the server.
I've also tried adding it to the Web.config and the root Web.config of the server.
Can anyone help as the site does not render correctly under IE7 mode in IE8 and we use IE8
Adding meta tag or any other configuration change won't help you. Your markup is not adhering to XHTML standards and some other markup validation is also failing hence IE8 is triggering quirks mode and going to IE 7 mode. You need to fix your markup.
Try running your page through http://validator.w3.org/dev/tests/ and that should help you.

SharePoint: CSS changes update in FireFox but not IE

Weird problem. I update the site CSS sheet and the changes show straight away in FireFox but don't show in IE. Using the Developer Toolbar in both apps the style changes are missing in IE. I've reset the browser cache but no dice.
Perhaps this related question might help you.

Dropdown menu not working in IE6 or IE7 works fine in Firefox

I'm stuck with a menu on a site I develop.
http://charlienutting.com
If you hover over the gallery at the top menu bar it should show you a drop down menu.
It works fine in Firefox but sucks in IE6 and IE7.
Really thankful if someone can help.
been about week now to fix this..
edit-
however if you can see there are drop down links which you can click, but those are not visible.
What happened when you debugged into it in IE? What error messages did you see and what have you tried?
I'm happy to help, but really, you haven't described a problem yet.
I guess transparency issue.
perhaps the line in js/dropdown.js that looks like
c.style.filter = 'alpha(opacity=' + ( 100 / c.maxh) + ')';
fire up the script debugger and see what the value of c.maxh is.
First let me say that you have talent as a designer :)
However, there are a few issues with the site's code as it is. I would recommend dropping that drop down code and implement your own using JQuery's effect library (I say this because you are already loading JQuery in your page). That is browser compatible so you wont have these issues with IE.
http://docs.jquery.com/Effects
Next, your header changes size between Gallery, resume and contact. You will probably want to get that fixed. Also, the resume page's links are positioned odd in FF 3.4... It would be best to make them without using absolute positioning. You can accomplish that by a mix of "float : right" and "position : absolute" (but not setting the "left" or "top" properties) :)
Your page is using a doctype, but doesn't validate.
Oh - and it's 2009 now, BTW :D (see copyright)
hint:
(C) 2008 - <?php echo date("Y"); ?>
Try setting a doctype. I know I've had issues in the past with hover events without a correct doctype. Your current page sets Internet Explorer to Quirks Mode.
Currently if, in IE9 I set my mode to IE7 and then switch the "Document Mode" from "Quirks Mode" to "Internet Explorer 7" mode, they show up correctly.
Put this at the top of your HTML files and see if setting your doctype will fix the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Resources