Here's the site in question: http://cbcsettlementfunding.com/dev/
Almost finished up with development, just have a few bugs left to fix in IE6, one of which is particularly annoying: horizontal scrollbars on every page of the site.
Firstly, I can't readily identify what is causing this since it's only happening in IE6 (7, 8, and 9 beta are unaffected).
Secondly, the one trick I had hoped to quickly fix this issue for the time being, setting "overflow-x: hidden" on the html and body tags, isn't working either.
I've been staring at this code for days and can't find anything wrong, so I'm hoping it's just something small that I may have overlooked like forgetting to close a tag or something small.
Thanks in advance for your help!
Try adding <style type="text/css">#sb-container { left:0; }</style> to the head section of your pages.
I know that this might be considered as a non-answer, but if it's eating away at a lot of your time I would strongly recommend simply letting the scrollbars be. Unless the client has a substantial amount of IE6 traffic, this might be the perfect time to let "graceful degradation" take its toll. Especially since an extra scroll bar on the bottom (probably) isn't breaking the layout.
Related
[edit]
Please note that this is not a duplicate thread, though it revolves around the same topic as a previous one.
[/edit]
Only a day or two ago I created a similar thread, and got some much needed answers, but as the thread didn't have much focus, I do hope you'll forgive this rewrite, so to speak.
So basically I've done this before though, as I found out, there was a few questionable approaches, which I should have fixed now. Among other things I don't use display: table-cell any more, but instead display: inline-block.
So what's the problem then? well, I want to achieve some degree of perfection and as I'm easily confused, I'd very much like some of you to look it over and pass along your comments and suggestions. Maybe take a few minutes to do me the favour of tidying up the CSS, etc.
Now I have no expectations and I realise that I'm not the only person in need, but if you have the time, I'll be very grateful.
Here's a link to a working example. http://jsfiddle.net/7fD4S/
The html should be fine, though it annoys me quite a bit that I can't present the list probably, due to the way it affects the inline-block property, but I can live with that.
Regarding the CSS, as explained, I easily confuse my self. I think the CSS need some tidying up, but honestly I can't manage it.
All in all I guess I just want approval. that it's done correctly, that there are no major issues and such.
It should be noted that this is only supposed to work with IE9 and other newer browsers. All in good time, support for IE8 may be included, but that has yet to be decided.
Well, that's all.
Hoping that you'll spend a few minutes looking it over, thanks in advance and best regards.
Edit:
Updated example: http://jsfiddle.net/7fD4S/1/
Edit:
Updated example: http://jsfiddle.net/7fD4S/2/
Changed position top from 21 to 20px to avoid gap.
Only thing I really noticed was that you should change:
header div {
top: 21px;
}
To
header div {
top: 20px;
}
Otherwise there is a dead zone # the 1px border that doesn't seem to trigger the :hover effect, and thus makes it choppy.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
I'm debugging a site to make it work for IE6 (god, please, let this be the last time). I've gotten pretty far with getting the the layout look right. There's just one more thing bugging me.
Some elements like links, when they get hovered, the body of the site shrinks.
I have built a dropdown with javascript. When it should show, the body of the site shrinks.
There is a slideshow, made with javascript, which changes the z-index of the images, everytime it changes the z-index, the body shrinks.
Now I found some information that IE6 creates this specific shrinking behaviour when using a fixed position element. But this is not the case. Someone here have some ideas for solving this? Thanks!
I use situations like these as an argument to convince the users to finally switch from this monstrosity of a browser.
I hate to ask the question.... but are you using?:
<!--[if IE 6]>
Enter "special" styles for IE 6
<![endif]-->
It will get you out of a jam.
Regarding dropping IE6 support for sites, I have found that complaining to clients about it doesn't work very often. But what does work is showing them in their Google Analytics that only 5% of their site visitors use it, and its ok if it doesn't match exactly, as long as the content is accessible. That niche 5% costs a lot of extra development time and money to cater too. But your screwed if it says 11% :-)
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.