IE phantom borders (aka the ‘mazda bug/fix’)
I believe every web developer has probably had to deal with this at one time or another. It all starts out with a beautiful layout and a few floats, you check the design in FireFox, then in Safari, you open Chrome, and finally you even test in Opera. Everything looks fantastic, you are all smiles and blue skies...
Firefox3 No Border Problems
But there's a problem, lurking beneath the genius of your layout is a CSS border on one of the div's, and inside that bordered div is a floated object/element. Normally with modern/compliant browsers, this isn't an issue, but IE is neither modern nor compliant by any means. So you crack open IE7 (the lesser of current evils) and notice that your border seems to 'disappear'. More weirdness, you scroll around the page and the borders re-appear (similar to the peek-a-boo bug, but no this is different).
IE7 with Phantom borders
So you crack open your VM (cos by now you'd better only have ie6 in a VM - or using xenocodes ie6.exe... unless you have office 2k7 installed, at which point your existing installation of ie7 may go suicidal on you - another story for another post) and you check to see how ie6 renders the page.
It looks like IE6 broke your internets
Wow, you can't see it (because I cropped the image), but the entire layout of the page has exploded, I fixed it originally with extra css, but before I did, I had div's coming out of the containing-div, odd margins, and the container has gained 20px on the right. Oh, and the borders are still disappearing and reappearing on me.
So what are you supposed to do when this happens? Well first I tried changing the flow of the page, taking out the float and lining things up with out it. I already had a separate ie6 and ie7 style-sheet, so it was almost working. I say almost because I really did need to float an image and no matter how I changed the presentation (CSS) I could not get it to line up AND have the borders appear normally. This is when I stumbled onto the greatest IE discovery since dd_belatedPNGfix:
#reviews-all-box { zoom: 1; } |
Yep, that's it, "zoom: 1;" -hence the term 'mazda', get it?- on your div that has the border. This forces IE to turn on the IE only 'hasLayout' tag which then changes the way the page is drawn in IE. Yes, there is a lot more to it than that (read here), but the quickest way to enable 'hasLayout' is to just throw zoom in your css. After using the above code on my ie6 and ie7 style-sheets the problems went away, both IE versions have magically obeyed CSS formatting, and the borders are where they are supposed to be (without disappearing).
This is IE7 with zoom: 1 (yes IE6 looks the same)
So what have we learned? M$ is in league with the auto industry (think of SYNC...!). No I'm just messing with you, what we learned is that if you decide to make a browser, please for the love of the internet, please, please, I beg of you, please, make it W3C standards compliant so that we don't have to keep using these ghetto hacks to make it act like it should.
Print This Post
IE6 and form submit fixery
Yesterday presented a problem I was unfamiliar with, and while ie6 continues to be the bain of all web developers existance, I finally was able to emerge triumphant, with the head of the demon tucked nicely under my arm... for now. The problem of course is trying to submit a form through javascript with ie6.
After poking around the large interweb I stumbled on another site that had run into the same problem. a slightly more indepth description of the problem is that you have a form, but rather than use a submit button, you have an image wrapped in an a-tag that you have assigned a click-event too that submits the form (or sends it to some js validation, and then submits the form). This is all fine-and-dandy with any 'modern' web browser, but for some reason that only m$ can tell us, when ie6 follows the a-tag, it gets lost without ever submitting the form, it doesn't even attempt to load the page.
Some people have reported that adding an empty anchor to your a-tag fixes the problem (you know, a simple >a href='#'<), but we like code that validates, so we usually insert ye olde 'javascript:void(null);' into our a-tags when we handle them with onclicks, or jQuerify them.
The solution that we ended up using was to use a setTimeout(); around the form submit in the js. For some reason, this allows ie6 to remember what it was supposed to do and get it done. I like to think of it as a virtual kick in the teeth to the browser. Anyway, here is some sample code to help you visualize the problem and solution.
Here is our form, (yes, it has a smattering of JSTL in it 
, you can ignore that if it bothers you)
<div class="review-form-input"> <a href="javascript:document.reviewForm.submit();"> <img src="<c:out value="${jspStoreImgDir}" />en_US/submit.gif" alt="Submit" /> </a> </div> |
And here is our sample javascript code BEFORE being fixed (note the jQuery goodness, that I can't use enough of)
$(document).ready(function(){ $(".submit a").click(function(){ $("#reportForm").submit(); }); }); |
Note that the above code works fine in Opera 9+, Safari 3+, Firefox 3+ (and most-likey but untested in Firefox 2+), and yes even the black-sheep of the browser family ie7 can render and run this code just fine.
Here is the fixed javascript...
$(document).ready(function(){ $(".submit a").click(function(){ setTimeout('$("#reportForm").submit();', 50); }); }); |
Yep, that's it, a very subtle change, just inserting the setTimeout() method fixes the ie6 stupidity.
Print This Post