According to this page, :nth-child should work in IE9, and I have tried it before and it worked fine, but on this page, it does not appear to be working. View the page in Chrome to see the intended behavior, and in IE, you'll see that it does not work. You can probably see this with a web inspector, but for your reference, the relevant lines of CSS are;
.ad_widget:nth-child(3n+2) { background: #efefef; }
.ad_mrow {background: #efefef;}`
I'm at a loss. Any ideas?
For some reason I cannot fathom, IE9 defaults to compatibility mode for looking at intranet sites, or an HTML page stored as a file on a PC. Compatibility mode means 'render stuff like a dumb old browser'. This means that when you're designing stuff for a website and you try to preview from your favourite IDE in IE9, none of the CSS3 stuff works. You have to click on Tools ->' compatibility view settings' in the IE9 menu and then unclick the pesky checkbox that says 'display interanet sites in compatibility view'. From then on the wretched browser works like any sane browser such as Safari. Why did they do it? Heaven only knows, but it has taken me ages to discover this simple fix due to the fact that I kept blaming my code.
They look the same here. You sure you're not in compatibility mode?
My version of IE9 was locked into IE8 rendering mode, which wasn't applying the following selector:
.parentClass > div:nth-child(n+2) .childClass
Here is where you can find the options to change it:
It appears to be working for me.
<!DOCTYPE html> won't stop quirk mode, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> does.
Related
I am getting lots of trouble with IE. The whole page is disarranged even though I have reset applied to all the tags initially. Mozilla and Chrome displays it correctly but IE is giving lots of tension. If anyone could help I would be very thankful.
Jquery is also not working fine. and div are disarranged
First see it in mozilla to get a look of what I have designed. then open it in IE to see the troubles.
See it here http://www.crawller.com/opal/
Thanks to everyone.
I solved the problem by including this line at starting before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This solved the problem and CSS and jquery codes are responding well in IE now.
You can check the modified version at
http://www.crawller.com/opal/new/
The old one is also available at http://www.crawller.com/opal/
For starters, it appears there are some incorrectly spelled attributes in your css, several references to 'bloc' where I assume you mean 'block'.
Make sure that your html and css validate.
You have a lot of Markup validation errors in your document. First try to fix those errors.
Check your site for w3c Markup Validation
I have a webpage that previously had no doctype declaration.
Now, I've added <!doctype html> to the beginning. Unfortunately, it now renders differently.
There is a div that is supposed to fill the page vertically; now it only fills the top half of the page (the bottom half is empty).
Here is the div's CSS:
#thediv {
float: left;
width: 48%;
height: 95%;
margin: 2px 2px;
}
My questions:
how do I get the div to fill the whole page vertically again? (more important)
does adding <!doctype html> cause the browser to try to render it as HTML5?
why would changing the doctype cause this difference? (less important)
You'll need to set the height of the <html> and <body> tags (and any other tags that contain #thediv to 100% as well:
html, body {
height: 100%;
}
The doctype causes the page to render in standards mode rather than in quirks mode. I recommend reading about quirks mode on the blog of the same name and on the doctype page.
The short summary of the issue is this: in the heady days of the internet when none of the browsers still around today were above version 4 every browser distinguished itself by being different - not by being more spec compliant. When the browser manufacturers agreed to all abide by the same spec they also decided to continue to support older ways of building web pages (the quirks mode) so that the old pages would still render properly in the new browsers. This quirks mode is still built into most browsers - they activate it when they detect a page that looks like it was built in those heady days. Each browser's detection and resolution method is different - here's an example of IE 8's.
Without the DOCTYPE, you force the browser into Quirks Mode:
In other words, all browsers needed two modes: quirks mode for the old
rules, strict mode for the standard. IE Mac was the first browser to
implement the two modes, and IE Windows 6, Mozilla, Safari, and Opera
followed suit. IE 5 Windows, as well as older browsers like Netscape
4, are permanently locked in quirks mode.
Choosing which mode to use requires a trigger, and this trigger was
found in ’doctype switching’. According to the standards, any (X)HTML
document should have a doctype which tells the world at large which
flavour of (X)HTML the document is using.
Quirks Mode is basically a sociopathic mode that browsers enter when you forget to tell them to follow a specific DOCTYPE. In most cases, IE is the worst of them all and all hell breaks loose when you forget to define a DOCTYPE with IE:
jQuery's DOM interactions get gridingly slow, as IE doesn't implement many DOM functions when in Quirks Mode.
Things never look right.
Stay away from it. You'll be happier that way.
Always, always, ALWAYS use a <!DOCTYPE __> up front.
Then, design your webpage.
Otherwise, you can't expect it to work.
Yes, <!doctype html> is the doctype for html5
http://www.w3schools.com/html5/tag_doctype.asp
The doctype tells the browser how to render the page, and each doctype will cause a different rendering.
Try this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
curved css corners for some reason dont seem to work in IE9. I know it supports it however i have looked all over the web for a solution and cant find one that works for me. I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. I used the .htc file and behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. I even tried declairing all 4 values, and didnt make a diffrence. Work beautifuly in firefox, chrome, and safari but not in IE. Any help? Check it out: my web page If you have some debugging tool might help you help me.
I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects.
To fix it add this to your html head:
<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
<![endif]-->'
Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.
Detail explanation here Investigating Document Mode Issues
Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage.
I found that my border radius in ie9 is working on localhost but not on a server. Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9?
IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). Your browser probably have a problem. Maybe you're running beta or something like that.
Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine.
Quirks mode is where IE9 switches back to IE5 functionality
(added following link to #seanmetzgar post also)
Detail explanation here Investigating Document Mode Issues
With a site I look after, which had ASP code right at the top of page, I added
<!DOCTYPE html>
just in front of the tag, below the code, and IE9 stopped going into Quirks Mode.
This is a follow-on question from this thread:
CSS Semi-fixed Element?
I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.
I have rolled the code out so that you can see the problem I am having on a live website:
Gran Via hotels
IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:
d.css({ position: "fixed", top: "0px" });
The first line is also evaluating to -2 in IE whereas in Firefox it's 377.
var scrollerTopMargin = $("#scroll-container").offset().top;
I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!
Thanks
Ben
IE does not like your doctype and is running with quirks mode activated. this is why it does not work.
Try this one and see if it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To run IE8 in standard mode you need to choose a strict doctype, not a a transitional one
http://en.wikipedia.org/wiki/Quirks_mode
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">