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.
Related
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
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.
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)
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.