Getting Fieldset Backgrounds and Legends to Behave in IE is an elegant way to cure an annoying quirk of IE's CSS rendering when it comes to how the background for a fieldset seems to "spill" out of its borders and encase the accompanying legend. Very cool and very useful.
I can't for the life of me understand why anyone would want to code for IE5 Mac, but if you're serious about making your site display for browsers with a 0.01% browser market share you should check out IE 5 Mac: CSS bugs and oddities to save yourself some headaches.
What is the IE6 Multi-Class Bug?
"In essence, it is the failure of Internet Explorer to render backgrounds for elements that have both an ID and a Class defined."
The simple solution to the problem is listed in the sonspring post, but knowing about this could save some headaches for sure.
Ok, so I'm building a website and I have two browser problems.
1. In Firefox three links which used to be clickable are now.. not. the mouse doesn't change to the correct cursor either. They work fine in IE, and they used to work fine.
2. We used this snazzy little trick to make nice boxy-borders for content. The problem is that when we write height: 3px for an empty box that only has a border in it, IE refuses to listen to the height requirement. It displays perfectly in FF. I tried changing the line-height to shrink down the edges, but this cause the bottom edges to be misaligned.
The page is located here:
I didn't upload the graphics etc. So it will look a little weird, the two problems are the smallnavbar in the top right (view cart, my account, register), and the border boxes (for example in the footer).
I appreciate any help you can offer. I'm still kind of new to CSS (though I've had a crash course these last few days), so the code may be a little awkward. Especially since it took me awhile to get the suckerfish to work.
I'm filing Sitepoint.com's recent article titled Introduction to Browser-Specific CSS Hacks in the browser bugs category because if you are using browser-specific hacks it's probably because of some non-compliance on the part of a specific browser. So, for all those properties not supported and all the layout issues that revolve around box model inconsistencies this article will better enable you to execute your site's design.
I was having an issue with IE 6 where sometimes text was disappearing. It seemed to be occurring pretty randomly until I realized that it was the background color over-lapping the text for some odd reason. It was easy enough to take out redundant background styles (where they were left over from the development process), but there remained times when I wanted to use the background color to signify different things.
Even after reading the exact solution to one of my IE 6 bug dilemmas, I didn't get it. Finally, after finding part 2 of a qsdqsd.free.fr article: "float: right bug" I connected the dots. I didn't get it the first time I read it, but regardless, I get it now -- and it's probably because I applied the position:relative; to the proper elements this time, and the example was nearly 100% identical to the set-up I was using. Oh, and I had my elements float:left; so I'm not sure it's specific to float:right;.
Ok, I am sure that somewhere within this collection of words and mark-up is the solution to all of my IE display slipping, jumping, spasm nightmares. I've read How To Attack An IE/Win Bug a couple times and still haven't been able to get the display for Side Job Track right in IE, in fact, the last round of attempts made it worse. But I have faith that the answer lies within somewhere and there's no sense waiting to have found that answer before posting the link.
Anyways, it's a great article and probably the final word on 90% of IE display bugs that occur when using floats.
From maxgeek.com interesting information regarding an IE 6 spacing bug: "When the space is removed between the pseudo element and the first curly brace, the selector will not be applied."
via Mezzoblue dailies
Mezzoblue has an awesome assortment of bugs related to IE's CSS support. The author specifically addresses: Lack of Scalability, Lack of support for min-width and max-width, Lack of Alpha Channel support for PNG, Lack of :hover Support, Lack of child and descendent selectors, and provides a link to Position Is Everything's awesome index of IE bugs.
An example of slipping text creates a great discussion at Stopdesign.com. Effecting IE/Win only, this bug is created by nesting 2 or more elements (divs) where the outside element has both a left border and bottom padding. That combination when repeated 2 or more times will slide the enclosed text to the left in proportion to the width of the border. Position is Everything has an excellent write up that was linked to in the [very helpful] comments in the Stopdesign thread.
- For Beginners New to standards-based design?
- Simple Tips & How To General articles, effects and tricks.
- CSS Showcase Sites Showing off great CSS design.
- Browser Bugs How to work with the browser working against you.
- CSS Literature CSS & Standards-Related Books, Magazines
- Unsupported CSS Styles only supported in specific browsers.
- X-Nation Everything X-related, XHTML, XML, XSLT, etc.
- Web-Related Articles Essays and articles regarding web-standards.
- Web Reference Lists or directories of valuable information.
- Assorted Goodness Other Helpful Information