Layout OK in Firefox, Safari & Chrome but not IE [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
New to HTML/CSS but have had training; based on my trainer's designs built a site that looks OK in Firefox, Safari & Chrome but IE everything goes out of the window! Would appreciate help on either how to fix it, or where I could look to get more info on where I'm going wrong. Many thanks.
http://www.mandolinjack.com

The main reason you're having problems with IE is because your site makes IE go into Quirks Mode.
Quirks mode is a very old backward-compatibility mode that is built into IE. It causes the browser to render the page quite differently to normal, and it also switches off a lot of the newer features in the browser. You therefore want to avoid quirks mode at all costs.
The reason you're in quirks mode is because you haven't put a doctype declaration at the top of your page. If you don't specify the doctype, IE defaults to quirks mode.
If you're not sure what the above paragraph means, that's fine; just add the following line to the top of your code:
<!DOCTYPE html>
...right at the top, above the <html> tag. That should solve most of the problems.
You should also run your page through the official W3C Validator to check if you have any other errors in your HTML code, and fix anything that it finds.
Hope that helps.

Related

Website renders perfect on all browsers except chrome [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm building a website (here is the link only from the homepage). I created the homepage using Chrome as a browser on my desktop. Now I took my project on my MacbookPro Retina with 10.9.5 OSX installed to work from home. On chrome it doesn't render good (but on my desktops chrome is ok). I checked for errors in console but nothing. On Safari everything is good. Also on Firefox and IE 10-11.
I reinstalled chrome, repaired permissions, I've checked my code for unclosed tags, disabled some scripts etc but nothing. It's very strange. I'm having the same version of Chrome in the office and in my mbp. Here is a screenshot
Well the problem was the background-attachment: fixed. It doesn't play well with Chrome as I read in the net.

Asp.net web app issue with IE10 Compatibility mode [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have an asp.net app with a dropdownlist control of larger width and vertically centered aligned text.
Yesterday my dropdownlist control suddently lost it's css width/alignment properties displaying incorrectly at the browser (IE 10).
After hours searching the problem, I noticed it was because I had accidentaly hit the "compatibility mode" button at the address bar (next to the url).
details on my post at: Vertically align text in a asp.net dropdown list control.
After hitting back the compatibility mode button it starts working well back again.
Since that happened to me, I wondered it could happen to end users to and so display it incorrectly to them as well.
Does anyone know how to avoid that and create a dropdownlist/web app that doesn't unformat if the user accidentally clicks that button?
By the way, I also used the IE dev tools to test my page on older browser versions and noticed that it works well on IE 9 and 8 as well, but the dropdownlist messes up on IE7.
Thanks!
Your best option is to add a conditional css reference which kicks in if the IE browser version is less than a given amount. For example if you add a new css file which contains styles specific to IE7. These commented out sections are IE hacks. This sytle sheet will not take effect unless the browser is IE7.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/styles/main.IE7.css"" />
<![endif]-->
Then you need to adjust your styles in this style sheet to suit IE7.
Also sometimes IE is set to display intranet sites in compatibility mode. See this for adding a setting in the web.config which will prevent this X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

Internet Explorer Breaks my website? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My website I am working on is going great so far but when ever I try and put it in internet explorer it just breaks..
http://868rcacs.ca/test.php
I have tried using the chrome frame but it doesnt seem to work... Any help?
EDIT: I tried ie 8 and ie 7 and its almost like it it doesnt read the css at all
nav, header, article... IEs < 9 don't support HTML5 tags. However, you can style them in those older IEs using for example html5shiv.
Well without code or anything we can't actually help. But here is css support for IE6-10 this is another link on IE CSS Support that might also help.
If your using css that is not supported on a particular version then you should consider removing that css OR just not support IE users.
Things that you should really think about is, how many IE6,IE7,IE8,IE9,IE10 (IE10 sucks less) users will my site have and how many non-IE users will it have. If you expect about only 3-5% (more or less) of your total users use IE then it would be better to just not support IE and not sacrifice a better user experience for 95% of your users.
BUT if you really HAVE to support IE then you should consider removing the css that is breaking your site layout.
Cheers!
What exactly is breaking? It is working fine for me in IE v10.0.9200.16635 besides the classic image border issue for IE which you can fix easily by adding a css rule:
a, img {
border:none;
}

CSS Stacked Paper Effect not rendering in IE [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I've created a basic website using CSS to create a stacked paper effect with line rulings.
The website is temporarily hosted at www.aspireddesign.co.uk/jhtutoring
Here is the CSS file: CSS Source
The webpage renders fine in Chrome, Firefox, Safari (on iPhone and iPad) but not on Internet Explorer (only tried version 8).
The CSS uses the :before and :after pseudo-elements, could this be the problem?
The line rulings are also displaying as block rather than blue.
Any ideas?
Thanks
Your lines aren't showing in blue in IE8 due to that version not supporting rgba colours - see http://css-tricks.com/rgba-browser-support/.
They also won't work in IE9 as your HTML is triggering quirks mode. If you change it to render in standards mode, it should work. See here for more info: http://msdn.microsoft.com/en-gb/library/ie/gg699338(v=vs.85).aspx

Web page displays in Chrome, Firefox, Safari, Not I.E [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Perhaps someone can find the problem. I've tried everything I know. And I apologize if this has been addressed before. I found similar threads, but none that address this problem specifically.
If you visit hiredimensions.net using Chrome, Firefox even Safari it will display properly. However, not so in I.E. (any version). It appears that it will not resolve the CSS background elements for the middle and lower part of the page. This site has been checked in W3C and is 100% compliant; no errors.
If you have any suggestions at all or need to look at the CSS please let me know. I'm stuck on this one.
Thanks.
This works fine in IE9 for me, but I had to change the document mode to an IE9 version. I assume this will work in IE10 as well, but I can't confirm.
I think the problem is that you are using HTML5, but it doesn't look like you are doing anything to support older browsers. If you inspect the markup in IE8 or less, the section element with the content-bottom ID is empty; same with the article. If you inspect the same element in Chrome, for instance, this is not the case and you will see that the article (and div) are in the section element.
EDIT: Check out this link, http://bit.ly/11D3Dyg; it has some options that will probably help. Also like bažmegakapa said, trying using a different meta tag that will try to force the latest render mode.
It works in ie 10 for me. Hit f12 and go to the network tab. Reload the page you will see you have no /js/HTML5.js file.
I tried it in ie 7-9 as well and no issues.