I am trying to make my web page look better in IE7. It is very frustating.
One of the problems I have found is pictured below. When following a link to a page, the rendering sometimes breaks in weird ways - below, it seems like the margins are off, and colour is missing. However, if you refresh the page, this issue clears up. If you refresh the page lots and lots of times, it doesn't break again - rendering is only bad on the first view of the page, after clicking a link or typing the URL into the address bar.
Do you have any idea why this might be? I am using css3pie to do background gradients and rounded borders, so the issue might be from here. Alternatively, is this an IE bug I don't know about?
My site renders OK in IE8, which also has to use css3pie to do gradients + borders.
EDIT:
If you zoom the page, this rendering problem fixes. Some stuff I have read seems to indicate that this is a known problem for some rendering in IE6/IE7, but I can't work out how to fix it.
I solved this problem by writing:
<!--[if lte IE 7]>
<style type="text/css">
div {
position:relative;
}
</style>
<![endif]-->
At the top of the page. I can't quite work out why this issue occurs - I think there is a bug in the rendering engine for IE7 that means that the css3 elements generated by css3pie are not given the correct margin. Another solution is to use padding instead of margin.
I can't work out why the issue would fix itself after refreshing.
Turn off the HTC file caching in Apache
LocationMatch ".*\.htc"
Header Set Cache-Control "no-cache"
/LocationMatch
Related
We have a site here and it displays a white background correctly in all modern browsers, Ie9-11,Chrome,FF,Safari, etc. However, OF COURSE, IE 8 messes it up and seems to make a transparent background and I have no idea why. This is also on the news page only so I'm wondering if it has to do with the horrible tables-based layout SharePoint is using (I'm not a fan). Here's the URL.
Thanks in advance for any help you can provide!
It's not about IE, it's about html. My guess is that IE is in the Quirks Mode (as are all the browsers) because you have a leftover closing comment close to your doctype. Correct it.
P.s. All the new browsers have to arrange the code by themselves too. If you inspect the site and look into the DOM you'll see that instead of the <head> all your links and metas are in the <body>.
I'm new to programming in general, especially CSS. I am currently working on a new website for train enthusiasts. I'm doing it from scratch so that I can get some experience in HTML, CSS, PHP, MySQL, etc.
Anyways, I've run into a problem. I've searched Google for a solution, but haven't been able to find one. My CSS seems to be compatible with every web browser on the market EXCEPT Internet Explorer. I don't really know how to explain the problem unless you check it out for yourself. It's as if my header and left menu are the only styled elements, but my content and right menu are pushed to the right and not styled. Check this link in IE and another browser respectively. You'll see the difference.
So my question is this: How do I fix it? I know it must be an IE bug since it works in every other browser, but I don't know what it could be! If I need to post my CSS script, let me know. Thanks in advance for any help you guys can offer!
In your style sheet you have a superfluous width:100% on a div element (block level elements naturally have a width that fills their container). IE is interpreting this 100% as that of #container. You can correct the styling issue in IE7 (theoretically) by removing this width:100% at line 119 of styles.css. I theorize that this is cased by how IE7 interprets display:inline-block
I must warn you, however, that ensuring compatibility with IE 7 and lower is a major pain in the arse and totally not worth it. :)
Which version of IE are you using to test it?? I checked it on Firefox, IE9,8 and 7. looks fine on IE8 and IE9. While there are few issues on 7. You could use conditional commenting to fix issues in 7.
create a new css file specially for IE7 and then
use a code like the following in your header
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
now play around with ie7.css till things look better. The good thing about this method is you can fix issues in IE without interfering with other browser rendering. You could also use "ietester" and debug bar to determine what exactly is wrong. im not able to find the exact link right now but google should help.
You could read more about conditional commenting here http://www.quirksmode.org/css/condcom.html
I cannot for the life of me figure out how to get this aligned correctly in IE7/8..
If you look at the site in Firefox 4+ it works fine! Not sure if that is the right thing or not..
At the top where the "Sign In" link is; in firefox is exactly how I want it but in IE it is displayed all weird.
If anyone could help, that'd be great. (the site isn't fully functional yet.. still working on it.. thanks!)
First, before any attempt to debug CSS is made, you must always validate your page.
You have 23 Errors at this time, and they are pretty important (but easy to fix) ones. You have unclosed divs, paragraphs, etc. It may be just a couple of errors that are causing a cascade.
My advice: Fix those errors. Start at the first one and work your way down until they all are gone. You are likely to see IE problems disappear. The other browsers are just being more forgiving.
Conditional comments are an option for when you're really stuck, but 99% of the time you don't truly need it. Often IE errors are caused by mistakes that other browsers are nice enough to deal with in a graceful manner.
Once upon a time I used to design IN Internet Explorer, and found that checking my work in FF or Chrome was almost always in line with IE's rendering. Sometimes the newer browsers are too forgiving of errors so you don't catch them.
In your html you can use special css just for ie so other browsers just ignore:
<!--[if lt IE 9]>
<style type="text/css">
your css here
</style>
<![endif]-->
you could just create another styling section for IE using *+ hack. IE:
*+.signin{
.....
}
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 am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.