where are all the IE CSS bugs?

Issue: #450-???
Affects: IE6, IE7, IE8 Beta 1(some)

I received an emai1 {ThisSiteTitleWithNoSpaces@gmail.com} from Nelson T. recently asking where all the IE CSS bugs are? There are several of them, many even have their own name! However it makes much more sense for me to provide a link to better documentation and examples rather than try to re-invent the wheel.

I do have some CSS bugs to report that (I don't believe) are listed elsewhere though, and thus I plan to post those very shortly.

IE CSS Bugs:

The following collection is all available at:
Position Is Everything (PIE), complete with test cases and workarounds (where possible)

• Peekaboo Bug


• Inherited Margins on Form Elements


• Expanding Box Problem


• Quirky Percentages in IE Visual Formatting Model


• IE Line Height Bug


• Border Chaos


• Disapearing List Background Bug


• Guillotine Bug


• Unscrollable Content Bug


• Duplicate Characters Bug


• IE Italics Bug


• Double Float Margin Bug


• Duplicate Indent Bug


• 3 Pixel Text Jog Bug


• Escaping Floats Bug


• Creeping Text Bug


• Missing First Letter Bug


• Phantom Box Bug

Bug/Site Feedback |
Submit a bug

bug 114 - border dashing and rounding not an option in Firefox

Issue: #114
Affects: Firefox 2.x
Fixed in: Firefox 3 (Beta 3 & Final)

Rounded corners make simple boxes look so much more appealing on the Web. CSS3 defines the border-radius CSS property, but of course Firefox, Safari and others implemented their own versions long ago before CSS3 was finalized.

In Firefox, specifying "-moz-border-radius: 5px;" for a block element will give a nice gentle curved corner to any box.

However, if your border is more than 1 (one) pixel in width, and you have it set to dashed, or dotted (e.g. not solid), then Firefox will not show the dashed/dotted pattern, but instead show a solid line.

The good news is that Firefox 3 (currently in Beta) appears to have fixed this issue.

Example:

<style type="text/css">
  div.fancy {
    border: 2px dashed #000066;
    -moz-border-radius: 5px;
  }
</style>
<div class="fancy">
This box should have a:<br/> dark blue<br/> 2 pixel<br/> dashed border<br/> with 5 pixel radius<br/> rounded corners.
</div>

This box should have a:
dark blue
2 pixel
dashed border
with 5 pixel radius
rounded corners.

Known Workarounds: None.

Related Issues: None.

Bug/Site Feedback |
Submit a bug