I've built a webpage, everything looks great in IE7 and upwards but in IE6 it's looks bad.
I have a whole div which has a background image that's not even showing up.
Why could this be? Are there common things that tend to not work that could be in my CSS? I don't normally support IE6 so don't usually have to figure these things out, but my client has specified that they want to work in IE6.
Here's the site, yep - quite a nice site in modern browsers! http://www.replyonline.co.uk/ie6sucks/index.html - feel free to look through the code (there's a IE6 specific stylesheet at view-source:http://www.replyonline.co.uk/ie6sucks/css/anythingslider-ie.css where I've solved some of the existing issues.
Thanks
I don't have an IE6 install with me here, but here are a few hints:
It's most likely a positioning ('hasLayout') issue. Try setting zoom: 1 on the missing DIV or its parent(s). The same goes for position: relative or a combination of both.
Also, check some of the content-hiding bugs on PIE: http://www.positioniseverything.net/explorer.html
You can use the Internet Explorer developer toolbar to try some of this out: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535. Keep in mind though that some bugs will only appear or get fixed on a full page reload, and not while fiddling with the CSS in the developer toolbar.
I also use XRAY ( http://www.westciv.com/xray ) a lot to see how my elements behave.
For more info on 'having layout', see http://www.satzansatz.de/cssd/onhavinglayout.html.
It's tricky to debug since I don't have a working copy of ie6 on my machine, only ietester but there are known issues with ie6 where it doesn't calculate sizes properly in order to display background images properly.
The answer generally is to trigger hasLayout on the element and the easiest way to do this is using position:relative. I'd give that a go before anything else.
I would also recommend having a look at the html5boilerplate stylesheet to see if there is anything there that you can make use of. The reset/reassign css in there is simply brilliant and irons out a lot of css issues.
Best of luck!
1 - Make sure your site validates: W3C Validator Currently yours doesn't ( 146 Errors, 16 warning ).
2 - There's an annoying bug in IE to do with margin/padding, if you have any to the left or right of an element, you may need to do display: inline or inline-block;
I've found little things like this can help.
Looking at the W3C results, it looks like you may have too many closing div tags
Related
Can some body tell me, why my menu disappears when I open "Case Studies" and when I put a mouse on it.
I am identify the problem in the transform: translate() property, but do not know how to fix it.
http://dinamickadevelopment.github.io/Nousles/index.html
Many thanks.
remove
#header {
z-index: 55;
}
from index.css line 33
That will bring back your menu when you select Case Studies
DCdaz is correct. I've checked it in chrome, safari, firefox. Firefox displays it just fine (though your :hover for the top-right corner isn't working for firefox). Removing the z-index: 55 fixes it in chrome and safari and does not adversely affect the page in firefox.
You're using a lot of z-indexing on this site. I realize that a lot of this is coming from bootstrap and the like, but you might want to consider a different way of handling it. Chris Coyier presents an interesting idea taken from video game development. However it utilized using a pre-processor for css, so it' might not be an option for you. He does discuss another method that would work, but, for personal reasons, he doesn't like them.
Anyways, long story short, removing the z-index: 55 from line 33 on index.css seems to fix the problem. Your site looks nice enough that I doubt you don't already know most of this, but you say you tried removing it, so here are some ideas why that may not have fixed it:
How did you get rid of the z-index:55? Did you delete it from your files and re-upload it? If you did then make sure you clear your cache before you check to see if the issue is gone away. Chrome and Safari have built in ways to do this. I don't know of a quick way in Firefox, but there are ways. CSS especially can fall prey to this.
If you didn't delete it from the file (which I don't think you did, since I still see it when I check your code), then you might have removed it by using the developer tools directly in your browser. All major browsers (that I know of) have this option. This is the way I checked it and it worked for me (and probably DCdaz), so I have no idea why it wouldn't for you.
If you didn't use either of the methods above then you might have edited and ran your code locally. I have no idea why it wouldn't have worked locally, but that's the last thing I can think of.
If you didn't use any of the above methods I'd love to hear how you went about removing it. I'm always up for learning new ways to skin a cat.
EDIT
I didn't even consider that you may have simply changed the z-index value to something else. I tried changing it and z-index: auto, z-index: inherit, and z-index: initial all seem to work just fine, but any number value (even negative ones) allow the error to remain intact. So either delete it or change it to auto, inherit, or initial.
i have this page.
login: miguel#mail.com
pass: m
As you can see in FF the filter is on the right of the list, but in IE6 not..
How do I fix this problem?
Your HTML code does not validate. This would be my first step in getting it to work in Internet Explorer 6. http://validator.w3.org/.
If this does not fix it, I would check up on IE6's layout bugs. See http://www.positioniseverything.net/explorer.html.
If you still haven't found a solution then try with the simplest page, and make that one work in IE6. Then slowly add all the elements on your page, so that you can identify what is causing the problem.
IMHO getting it to look right in IE6 isn't worth the trouble, as you can see (http://www.w3schools.com/browsers/browsers_stats.asp) only 7.1% percent of people are using IE6 now. Was there any specific reason that you have to get it right in IE6? (ie the company you are with has 600 PCs with IE6 on)
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
My webpage is suffering from two IE6 rendering bugs. Each of them have workarounds, but unfortunately said workarounds are incompatible with each other.
Here's a minimized test case. The behavior in Firefox/Safari is the desired/correct one. IE7 is unknown, since I don't have access to it right now.
First bug: #content has overflow: auto and contains a relatively-positioned div. IE6 incorrectly gives the relatively-positioned div a 'fixed' appearance. Workaround: Set position: relative on #content.
Second bug: The page sometimes shows a modal popup. The z-index on the popup and background are set really high to stop anything behind them from being interacted with. This works fine until I set position:relative on #content, which makes IE6 treat the z-index property completely wrong.
How can I make these bugs play nicely with each other? (Note: Remotely formatting the hard drives of users still running IE6 is not an option, much to my dismay.)
Edit: Here's a second test case that shows what happens when I apply position: relative to content. The first bug ('fixed' appearance of #content-header) is solved, but it causes the z-index bug to kick in and mess up the modal background.
There are a myriad of implementation as to how to avoid the massive issues with ie6 (and below) conformity. The only one that has actually worked for me (to a great extent even) is Dean Edward's solution.
Try to insert the following line in your main header:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]-->
-- and see how it goes from there (and what you still need to handle, since it probably won't fix everything).
The script size is a mere 30kb, and will only be loaded in ie6 and ie7.
The google code url is (obviously) http://code.google.com/p/ie7-js/
Implement something like we've done at Ra-Ajax.org (hint, visit the site with IE ;)
Seriously, even prototype.js and 37signals have STOPPED supporting IE6 now, I think it's time to move on...
I don't think using a library is too bad of a penalty to minimize my time working around ridiculous IE bugs.
We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe "shield" technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn't really all that much) so that I don't have to go crazy about IE6 bleedthru is worth it.
P.S. I think the web developers of the world should start a class action lawsuit to force Microsoft ether to offer the equivilant of firebug for IE6 and IE7, make sure all IE6 and IE7 instances are upgraded to standards, or remove all versions of IE6 and IE7 from all computers on the Internet, or bail-out all web developers with a payment of $1M each for their pain and suffering!
While it may be the wrong solution, and probably way overkill, jQuery can do modal popups similar to this and works on IE6. I'll probably get downvoted for such a simple answer, but it is still worth considering, or at least looking at, other solutions before reinventing the wheel.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Mine would have to be the float and margin bugs...
If you float an element, and then specify a margin for it, it will double the margin.
The solution to this is to add display: inline to the element. This will stop the double margin, and all other browsers will ignore it because only block level objects can be floated.
I wish I'd known that I'd be spending hours trying to fix a bug in IE 6 over and over again for years on end and I really would have been happier delivering pizza.
I wish I knew about quirksmode.org. The compatibility tables, bug reports, javascript examples are all very useful.
Don't code for IE6 first. That's the path to madness.
I wish I'd known that many IE 6 error line numbers are off by one.
Number one thing: hasLayout
If I had known about this from the start most of my worries would've been solved.
I even regard it as a worse problem than IE6's stupid box model.
That if your really anal and spend shit loads of time on it that it pays off and you then become an IE guru fearing nothing but the sad self you have become...
Although it is nice to impress people with your amazing IE bug fixing abilities...
Most IE bugs can be avoided by using different (normally better) CSS methods and super clean logical xhtml
Always clear your floats with overflow hidden (or just hasLayout for IE)
Understand what hasLayout is (basically a css porperty that gives IE a kick in the ass)
When you start devving sites check IE6 all the time, untill your a pro ;¬P
Unfortunately, and I do train a small team of 6 developers, experience is one of the only things that really helps with these problems, stay calm, do good research in google and post your problem to a community if you really are stuck with a good demo of the problem.
Nice links >
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ (although I recommend the PNG fix by Bob Osola /-0)
http://www.gtalbot.org/BrowserBugsSection/ (amazing and funny... great!)
Good luck!
I wish I'd known why Microsoft hated me so much.
I wish I'd known about Position is Everything, but specifically the peekaboo bug has always got me.
I wish I'd known about
the conditional comments to include stylesheets just for IE
xhtml headers to make IE render in compliant mode
the box model problem, so that I knew what to put in my IE stylesheet
After I learned about these things, I haven't really used a lot of time fixing problems in IE6
.Hauge
Transparent PNG should have been supported...
the underscore trick
if you put an _ infront of the css atribute it only gets read by ie6.
ie. _border: 1px solid #000000;
creates a border only in ie6
Probably that SELECT elements dont render with the correct z-order.
For example, if you have a floating DIV with a higher z-order overlayed on top of a select - the SELECT element will still render on top of the DIV.
Infuriating.
The rendering quirk which causes a small white space underneath an image in a table cell if there is any white space between the end of the img tag and the closing td tag.
This renders right:
<td><img src="myimage.jpg"></td>
This renders wrong:
<td>
<img src="myimage.jpg">
</td>
The main problem we have had is with scheduling enough "fix in IE6" time. That and the designers' tendency to come up with stuff that is easy to do in Flash and tricky to achieve in CSS has cost us many days of extra work.
I wish I knew that my code didn't validate. Or that an XML declaration in XHTML puts IE into quirks mode.
http://www.pushuptheweb.com/ or one of many other sites pushing to drop IE6 support. I'm aware that rendering web pages correctly for IE6 visitors is the core of many web businesses, but sooner or later something has to give. I just dont get why MS doesn't force an update >.<
That even with all the PNG hacks in the world, if you're using PNGs as backgrounds in your divs (to make, for example, a panel with rounded borders), you're headed for a world of pain. (Links and other elements not being clickable, IE6 crashing in earlier versions of the png dll, etc.)
In summary: don't use transparent background PNGs if you want it to work in IE6.
The importance of DOCTYPES in IE, and
Web Bug Track
I Wish I'd Known That Internet Explorer Is The New Netscape Navigator 4.7.x
1
hasLayout and this excellent explanation:
http://www.satzansatz.de/cssd/onhavinglayout.html
I had a new lease on life once I'd wrapped my head around it! Ensuring that the containing element hasLayout fixes the vast majority of my problems.
2
jQuery!! Writing IE-specific CSS is bad enough, so I'm glad I rarely have to worry about JS anymore.
I wish I'd known about dev tools like Firebug Lite and HttpWatch that make debugging lots easier.
in addition to other IE bug lists that Ross and Loque gave above (gtalbot.com, what a beautiful site!
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
http://webbugtrack.blogspot.com/search/label/IE7
http://www.enhanceie.com/ie/bugs.asp
http://channel9.msdn.com/wiki/internetexplorerprogrammingbugs/
(like gtalbot, it'll take you hours to scroll thru this
and, hey, IE 8 beta 2
http://css-class.com/test/bugs/ie/ie-bugs.htm
finally, the IE voodoo doll!
http://www.flickr.com/photos/chisa/1349759901/
*{margin:0; padding:0; border:none}
i swear to god this line changed everything. presto! everything is the same size! and then i dove into the rabbit hole that ya'll find me in now. marvelous.