views:

1216

answers:

22

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.

+17  A: 

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.

eyelidlessness
haha. Well everytime it happens, it only happens once. A lot of web developers are a walking index of IE6 bugs. I wonder how much money has been lost by web companies working to fix problems in IE6.
alex
I don't know but there should be a class action suit.
eyelidlessness
Imagine what life will be like when IE8 is out, and it's as standards compliant as they claim. Add a few years and IE6 *might* be all but gone.. IE7 is slightly less of a pain to develop for, with CSS anyway.
alex
@alex: The next Windows Mobile is going to include the IE 6 engine. So much for it going away anytime soon.
eyelidlessness
Also, to be fair, while IE 8 is fixing a lot of the obvious CSS problems, they aren't doing much to fix the DOM, Chris Wilson pretty much admitted as much: http://ajaxian.com/archives/ie-8-and-the-user-features#comment-266339
eyelidlessness
@eyelidlessness: Are you serious? What a pain in the ass that will be.What is wrong with IE8's DOM? The javascript caching issue?
alex
Almost everything that's wrong with IE 7's DOM, which is everything that's wrong with IE 6's DOM. Which is huge swaths of the spec, including everything from an incorrect implementation of Range to a complete absence of Mutation events to a completely broken event system itself.
eyelidlessness
ahh. Can jQuery abstract this away? I have fell in love with this framework, although I feel I shouldn't rely on it.
alex
jQuery doesn't touch Range and cannot (without lots of overhead or requiring you to use only jQuery DOM manipulation methods) simulate Mutation events; it abstracts the event model except it still can't support event capturing. There are other problems but those have been my biggest headaches really
eyelidlessness
So what do these IE shortcomings mean to me as a developer? I'm sorry I'm not as knowledgeable about Javascript. You seem to know your stuff!
alex
Oh, I forgot this one. At least through IE 7, Trident doesn't maintain its internal DOM structure as a tree, meaning you can actually end up with nonsense like a single DOM node spanning two adjacent parent nodes. You'd think innerHTML is the only way to do this, but it can happen with MSHTML too.
eyelidlessness
The Range problems make working with text selections (especially in richtext) infuriatingly painful. No Mutation events means polling for DOM changes is expensive even though the browser must do it internally and could expose it. The fallout of the event model isn't as huge but can cause problems.
eyelidlessness
(This didn't fit in the last comment.) Basically, it makes using the web as a serious application platform really difficult.
eyelidlessness
I see now. If it's internally done, I would imagine it wouldn't be too difficult to provide events for Javascript to hook into? I assume Gecko/Webkit/Presto do this?Why can't a rogue MS employee just provide a forced update of Firefox 3 :P
alex
Apparently there are no rogue MS employees, only XUL. Wait, that's the wrong line. I asked Chris Wilson (I think in the link I posted above) why they wouldn't simply embed Webkit in standards mode, and he informed me that this would break ActiveX (cont'd)...
eyelidlessness
So I asked, why not include ActiveX as a browser plugin and everyone's happy? "ActiveX can’t be done by another plugin" Orly? Then a few weeks later, Google releases a beta of Chrome which does *exactly that*.
eyelidlessness
And to answer your question, Gecko 1.9 (FF3) and at least the current release of Webkit support (most of) those events. Presto doesn't. But the point is that the engine *must* internally handle the events as specified, or reflow/redraw with CSS/DOM manipulation would never work.
eyelidlessness
haha. Sounds like Microsoft! I didn't have any issues until I became a web developer with Microsoft. Oh well. Who knows they might make a last minute implementation.
alex
Just to be clear, the Chris Wilson I mentioned earlier, who pretty much admitted the DOM is getting the shaft in IE 8, is the "Platform Architect of the Internet Explorer Platform team at Microsoft" (from his about page).
eyelidlessness
They should do what Google did... throw away Trident and incorporate Gecko and as you said use the ActiveX Plugin. And they can make their stupid little GUI. And everyone would be happy :)
alex
Sorry that was meant to be Webkit. But Gecko would work equally as good.
alex
Webkit would certainly work better for their purposes. But could you imagine Microsoft using an open-source Apple project in their most popular software?
eyelidlessness
Haha. Well it was originally from Konquerer wasn't it? Maybe they can grab it in it's Konquerer phase and *somehow* update it without making it the next Trident. They incorporated jQuery into their next .NET didn't they? I think they are beginning to get a far off scent of the coffee
alex
To be clear, KHTML was replaced with Webkit in Konquerer.
eyelidlessness
I think they'd find using Webkit unpalatable. "Hey PC, what's that new browser you're using?" But I would LOVE to see them use Gecko. And they wouldn't have to lose as much face.
Nathan Long
Oh, let's be clear. The IE team has much more enmity with Mozilla than Microsoft has with Apple. I'm sure that Apple would rather announce that kind of cooperation as a partnership than as a sucker punch. I'm sure you've heard that Ballmer mentioned Webkit might be in IE's future?
eyelidlessness
I have heard that in a conference in Australia. But do you actually think they'd do it? Apple and Microsoft playing nice? perhaps...btw, I delivered pizzas, and it was almost as stressful as css for IE6 (almost!)
alex
+5  A: 

Transparent PNG should have been supported...

VonC
And the javascript/propriety hack is very ugly.. Why can't they at least add a update in a service pack to support 24bit PNG's alpha channels.
alex
Single color transparent png's are supported though. I used that for a website with lots of 4 bit images and single color transparency, for they were usually smaller than their gif counterpart.
Martin Kool
Yeah but alpha transparencies are way cooler!!!Single colour (I'm Australian :P) transparencies in PNG's are the same as GIF aren't they?
alex
+2  A: 

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.

Adam
I guess the only way to fix this is with IFRAMEs? yuck!IE6 must just paint that form control directly over everything
alex
I've written code that will set the style to display:none for select elements which are positioned underneath the floating div. Kind of a hack, and you can see it disappear when it's only partially covered. But way better than the select covering up your floating menus.
Kibbee
+1  A: 

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 >.<

Karan
+7  A: 

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.

Joshua
+17  A: 

I wish I knew about quirksmode.org. The compatibility tables, bug reports, javascript examples are all very useful.

cofiem
link goes to quirksmode.org but text says quriksmode.org.
Ray
@Ray: that's an IE bug for sure.
eyelidlessness
@eyelidlessness, I call that an IR bug
Jimmy
+6  A: 

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

Hauge
You don't need any "xhtml headers" (IE does not support XHTML *at all*). Standards mode is triggered by certain DOCTYPEs, including HTML4 Strict DOCTYPE. Make sure DOCTYPE you use has URL.
porneL
+6  A: 

I wish I'd known about Position is Everything, but specifically the peekaboo bug has always got me.

Ross
ForbiddenYou don't have permission to access /explorer/ on this server.
Chris Porter
I think this is the link you intended: http://www.positioniseverything.net/explorer.html
Chris Porter
Fixed the first link.
Quinn Taylor
+2  A: 

I wish I knew that my code didn't validate. Or that an XML declaration in XHTML puts IE into quirks mode.

roryf
+6  A: 

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...

  1. Most IE bugs can be avoided by using different (normally better) CSS methods and super clean logical xhtml
  2. Always clear your floats with overflow hidden (or just hasLayout for IE)
  3. Understand what hasLayout is (basically a css porperty that gives IE a kick in the ass)
  4. 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 >

  1. http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ (although I recommend the PNG fix by Bob Osola /-0)
  2. http://www.gtalbot.org/BrowserBugsSection/ (amazing and funny... great!)

Good luck!

Using overflow:hidden to clear floats is handy, but it won't work in all situations. Sometimes you need something (say, a graphic or rollover) to "spill out" of the div it's in, but overflow:hidden will clip it off
Andy Ford
+10  A: 

Don't code for IE6 first. That's the path to madness.

Ben Scheirman
Amen. I develop everything primarily using Firefox 3 (and IE7 using IE Tab) as a test bed, then once I get everything working and looking good, I start trying to make it look the same in IE6 (and to a lesser extent FF2) without breaking it. Doing it the other way really sucks.
CMPalmer
I agree, Firefox seems to be the best choice for developers. Develop for Firefox 3, then make compatible with other browsers. This seems to be the best way to keep your sanity.
Liam
You might want to throw in Webkit (Chrome or Safari) and Opera in there for testing. Standing on the "FireFox is the WC3 standard" high horse can lead to a rather painful fall. FireFox has a lot of CSS rendering bugs, especially around UI controls ('input type=button' ignores the WC3 box model for example, which can cause alignment problems with other controls when viewing in standards compliant browsers). No browser currently works entirely as the WC3 standard dictates (Don't get me started on Opera's butchering of the CSS2 printing attributes) and I doubt they ever will.
David
Ben Scheirman
+2  A: 

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.

pdc
+1  A: 

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.

Dave
+1  A: 

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/

Gene T
+1  A: 

The importance of DOCTYPES in IE, and

Web Bug Track

scunliffe
+7  A: 

I wish I'd known why Microsoft hated me so much.

nickf
This made me laugh out loud.
Nathan Long
If IE6 was a person - he would have gotten a very very ugly slow humiliating and painful death by me. I would enjoyed every second of it.
DMin
+10  A: 

I wish I'd known that many IE 6 error line numbers are off by one.

Robert J. Walker
I didn't know that...
alex
Well, you just learned something new! (Doesn't that deserve an upvote?)
Robert J. Walker
+3  A: 

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

+1  A: 

I Wish I'd Known That Internet Explorer Is The New Netscape Navigator 4.7.x

Eli
+1 for the unfortunate truth
scunliffe
-1 for spelling of Navigator.
porneL
So we've progressed from "crashes at the very sight of CSS or any other WC3 standard" to "Renders CSS content, except when it doesn't and adds extra space anywhere it feels like"?
David
+1  A: 

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>
Kibbee
whats the best solution to this?
Simon_Weaver
line-height:0px;
s_hewitt
+1  A: 

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.

chipotle_warrior
seriously, CSS is more than enough. Thank god(or John Resig) for jQuery.
DMin
+1  A: 

I wish I'd known about dev tools like Firebug Lite and HttpWatch that make debugging lots easier.

Annie