this is my page.
essentially i'm trying to get it to work on IE as well and correctly layout my page, but for a completely unknown reason it refuses to do that. all of the tag doesn't seem to be contained at all and the layout is completely wrong.
Whereas trying on both chrome and firefox the entire thing looks identical and works fine.
Check here. The way IE and other browsers may proceed your floating value different.
w3c CSS validation
And don't forget that IE was always different and possible will be. Many web developers got bored to write special code blocks for IE and it's left to it's destiny. Suggest you to left also if you don't want to bloat your code with extra code.
Try adding this line in the head section
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Related
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
I am new to html5, html and JavaScript. My website http://www.countrybait.com/ is looking perfect in Chrome and IE9 but its broken in IE8. Problem is my client has a IE8 and when I showed him it was bad looking. I tried alot to fix this but couldn't able to fix and don't know what to do to fix and atleast get a clean view in IE8. So please seniors help me. Waiting for your positive help.
There are many differences between the browsers you mentioned. Each one renders css a little bit differently, especially IE8. IE9 has a developer tools set (press F12 or look under Tools icon). There you can choose which browser mode you would like to see and it should render the page according to that setting. You can then see what items are causing the layout issue and make the necessary changes.
I always build to Chrome or Firefox, then go back and make it work in IE.
Depending on your site, it might take a bit to get everything working in IE8. There is not a simple fix.
I tried turning on "Compatibility Mode" in IE8, and it makes most things be in roughly the right position (notable exceptions are the top menu navigation and the main text content).
So one strategy you might like to employ is to try to get it to look good in IE7 / IE8 Compatibility Mode, then you can add a meta tag like:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
to your page to force IE to run in compatibility mode. Note you may need to surround this with IE conditional comments to make sure it doesn't run in IE9, which looks fine.
e.g.
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
Oh the newbie pain of IE, hurts dont it?
I realize that your are new to this kind of thing but see how quickly you can get up to speed with Sass/Compass. Compass comes with a lot of helper shortcodes and cross browser handeling. Its the new hotness and the real pro's use it (like myself :D )
Sass = shorthand css w/ nesting (so clutch), variables (nice and dynamic), mixins (templates)
Compass = framework to avoid cross browser issues and css prefixes, and some other cool junk.
Do it, seriously... I wish somebody told me to sooner.
A very strange behavior is occuring on the website I'm working on in a animal display list.
The animals are laid out in a grid format. When in IE8 and with compat mode turned on, the animals pictures all shoot to the top of the screen and stack under each other.
This is completely perplexing to me. I need to call upon the talent of this community to help me fix this bug.
Example Page found here - http://www.petango.com/Forms/AnimalSearchResults.aspx?z=L2R%205W3&d=2147483647&sh=0&s=1&b=650&g=All&size=All&c=All&a=All&dec=All&p=False&sid=0&zs=True&ht=False
In IE8, it looks okay, when compat mode is turned on, the images shoot to the top of the page. I can only assume this behavior is found in IE7.
I'm at a loss at where to start troubleshooting this.
UPDATE 1 - 12:16PM
I tried a test where I took the animal display code and removed the unordered list and replaced it with a table.
The Div within the LI element doesn't seem to be the culprit?
Certianly you need to clean up your markup and not use a <ul> and <li> structure with all the nested <divs> when a simple <table> would do nicely.
Also, you can get a little closer by changing div.center-photo-box-1 to have position:relative instead of static. that will get you closer...
You can't have <div> inside <li>. I would also get your page to have fewer errors when you validate it at validator.w3.org.
check the site in ie7 - compatability mode is flakey and not always an accurate reflection of older versions of ie.
IF you find that it is just compatibility mode causing the problem yon can save yourself having to make changes by simply telling ie to not allow compatibility mode using the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
I have a gwt application with various layoutpanels. My layout works fine with all browsers except IE9. The layout is completely broken. Text appears everywhere, images at the bottom of the page or just shown for a 3/4, etc. I have recompiled my app with the newest version of gwt 2.3 but it didn't change anything. Any suggestions? Thanks in advance. Here an image with the broken background:
It is very strange that in IE9 something is broken and NOT in the other browsers.
Try this:
-correct the issues for IE9 and your other target browsers
-then see if in the other browsers you continue seeing everything ok (probably you will have problems with IE6 and IE7 so then what I would do is to fix them with a hack)
So what I recommend is to beging working with the highest version of the browsers and THEN fix the older ones. Do the inverse way...=)
If this doesnt help you, could you attach us some code?
A workaround to your problem might be to add the "X-UA-Compatible" meta tag to your HTML to tell IE to render in a different mode. For example, to tell IE9 to always render in IE8 mode:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
There are many useful articles regarding this meta tag