Monday, November 1, 2010

IE CSS Bugs That’ll Get You Every Time

ie-bug


IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6′s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:


The Box Model


This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:



IE 6 will calculate the width of the box to be 100px.

Modern browsers will calculate the width of the box to be 124px.


This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.


I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.


The Double Margin Bug


Using our box example from above, let’s say we need that floated to the right:



IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?


I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.


No Min Widths / Min Height


Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.


Stepdown


Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.


No Hover States


Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, andeven then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.


No Alpha Transparent PNG Support


Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.


*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!


So…


All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.

17 comments:

  1. Awesome blog. I would love to see true life prepared to walk, so please share more informative updates. Great work keeps it up. SY0-501 exam braindumps questions answers

    ReplyDelete
  2. Good content, but it would be better if in future you can talk about more about this subject.
    Pro4people

    ReplyDelete
  3. The new system enables app design company analytics. User interface design team excels in understanding the work and executing it quickly. They deliver clear and frequent communications.

    ReplyDelete
  4. This blog post is really great; the standard stuff of the post is genuinely amazing.
    web design company

    ReplyDelete
  5. SEO experts, professionals in this field provide various types of services for optimizing websites. An expert can help you with SEO products, services, and tips to maximize your website’s popularity. It is a hard work to maintain an Internet presence. With some help from professional, everything becomes easier. https://www.thallalokesh.com/seo-consultant-tirupati/

    ReplyDelete
  6. Despite some slowdowns in the global just web design agencies team stuck to timelines and met top design agencies project needs from start to finish.

    ReplyDelete
  7. Their level of dedication, along with an exceptionally talented team, made them feel like a true partner.
    UI company

    ReplyDelete
  8. The team's creativity and flexibility to approach issues and find solutions enhanced the site's organization, but still retained its core message.
    branding agencies San Francisco

    ReplyDelete
  9. Their commitment to regular communication and proactive communication ensured on-time delivery.
    San Francisco design agencies

    ReplyDelete
  10. This is really an excellent blog as well as its content.
    digital design agency

    ReplyDelete
  11. Thusly, Enterprise Resource Planning programming represents frameworks made to actually deal with an endeavor and its assets, information, and business processes. ERP is a bunch of uses that permits you to robotize bookkeeping, finance, business tasks, between division correspondence, and considerably more, contingent upon one's necessities.

    This product is very like CRM arrangements, yet comes a lot greater than that and gives a substantially more complete scope of administrations, including client cooperation errands and overseeing different inner cycles of the organization.

    Prominently, as indicated by the Panorama Consulting Group 2020 report, 93% of organizations that went to ERP arrangements noticed its positive effect on their organizations. No big surprise that ERP counseling organizations are sought after these days, and the worldwide market for ERP counseling will arrive at $86B by 2027, as indicated by the gauge of 2019 Allied Market Research>> independent erp consultants

    ReplyDelete
  12. elza energy claims that it is one of the biggest green energy suppliers. Its energy comes from a variety of solar, wind, renewable sources, hydro, and geothermal facilities.

    ReplyDelete
  13. Microsoft Dynamics CRM solutions offer robust security and data protection measures, ensuring that customer data is kept safe and secure. If you are interested in learning more about this then I advise you to start with ice cognition with dynamics crm development. It seemed to me this is quite interesting.

    ReplyDelete
  14. If you want to know anything about CSS Bugs then this post can help you a lot. This post is posted by experts. Here you will also get to see a glimpse of the paragraph reviser tool. You might not know about this tool. This tool is very useful for students. Every student must use this tool.

    ReplyDelete
  15. The process of selecting which objects to annotate in images and videos requires careful consideration to ensure accuracy and usefulness of data analysis. I typically look for those elements that are most significant or relevant within the media, such as specific people or objects or broader themes or concepts. This helps me create a comprehensive and meaningful representation of the media for future research or analysis. Object Labeling Dedicated Experts

    ReplyDelete
  16. Heyyyyy, I used to read the PMP blog articles on this one every morning before I started work since I like to learn new things.

    ReplyDelete