Acceptable CSS Hacks/Fixes

Acceptable CSS hacks/fixes

This is a good place for well-documented and well-tested browser bugs and the hacks allow you to work around them:

http://www.positioniseverything.net/

How to override !important?

Overriding the !important modifier

Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

Some examples with a higher specificity (first is highest/overrides, third is lowest):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

But, it's useful to know how to override it, if you sometimes have to.

Conditional comments or IE specific hacks

Conditional style sheets are the way to go. The word hack itself implies that you're doing something that you shouldn't. But a few short words on both:

Conditional style sheets

(+) Cleaner CSS code
(+) Easier to manage
(+)Easiey to understand for other developers
(+) CSS validates
(-)More CSS files (thus more server load)

Hacks

(+) Faster (possibly)
(-) Messes up your CSS
(-) CSS doesn't validate
(-) Very unclear for other developers (especially non-experienced one's)
(-) Could cause problems with newer versions of IE

What is the practical benefit to keep CSS 100% validated?

Practical....hmm, I suppose that you can say to the client "it's 100% validated"? In practice if you're doing anything complex (e,g, opacity) it's extremely difficult to maintain 100% valid CSS, conditional stylesheets it a way to eliminate most of these cases, but not everything.

Do what works in this case, not what the validator tells you. That being said, don't ignore validation errors that are legitimate errors not there for a specific reason.

What is the correct -moz-appearance value to hide dropdown arrow of a select element

This is it guys! FIXED!

Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

or workaround

For those wondering:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)

Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html><html> <head>  <title>IE10/11 Media Query Test</title>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <style>    @media all and (-ms-high-contrast:none)     {     .foo { color: green } /* IE10 */     *::-ms-backdrop, .foo { color: red } /* IE11 */     }  </style> </head> <body>  <div class="foo">Hi There!!!</div> </body></html>

Clean CSS fix of IE7's 'float: right' drop bug

Introduction

Your title indicates a desire to see a fix for the float: right drop bug, but your text implies some broader scope desire to see solutions to “problems with elements floated right in IE7.” There are many general problems with floated elements (right or left) in that browser. Even though one may question whether support of the IE7 browser is worthy of much attention any more, it undoubtedly will remain so for some people for some time. Therefore, I’m going to take the opportunity here to address numerous issues at once regarding floats in that browser. Note that many experiments and references below come from an excellent resource: http://www.brunildo.org/test/index.html.

CSS for the Containing Element

For a containing parent to the floated element the following css should be set:

.container {
    overflow: auto; /* forces clearing of the child float */
    zoom: 1; /* give it layout (this can be some other css that does likewise) */
}

Making sure it hasLayout is important to prevent types of margin and padding errors, a type of peek-a-boo bug, and allowing the overflow to clear. For a sequence of floats, some html may need changing if padding on the container is desired to work properly.

With regards to one “drop” issue with a float: right, you may want to avoid setting an explicit height or max-height on the container. A min-height is okay. Setting a height and then having the float be taller than the container makes IE7 not behave with following elements. There is no pure css solution that I have found noted.

If the container is itself position: absolute there can be issues with positioning a float that may require that float itself to be set to position: absolute instead of being floated.

References:

For overflow to clear -- http://www.quirksmode.org/css/clearing.html
Margins -- http://www.brunildo.org/test/IEFloatAndMargins.html
Peek-a-boo -- http://www.brunildo.org/test/iew_boo.html and http://www.brunildo.org/test/iew_boo3.html
Float sequence padding -- http://www.brunildo.org/test/IEmfloa.html
Avoiding height -- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/, http://www.brunildo.org/test/fenc7.html (and his similar problem link on that page).
Container is absolute -- Floating Too Far Right!

CSS for the Floated Child

For a the floated child element, the css (besides float: right) to set depends on two things:

Absolute Container

Again, as noted above, a containing parent that is absolute may require a change in how the child is handled.

Float is Also a Clearing Element

If the float is also going to have a clear set on it, then there are numerous issues that can arise depending totally upon the html and css of the elements around it. There is no single canonical fix, so look at the references below.

References:

Container is absolute -- Floating Too Far Right!
Also having clear -- http://www.brunildo.org/test/IEWfc.html, http://www.brunildo.org/test/IEWfc2.html, http://www.brunildo.org/test/IEWfc3.html

CSS for Child Elements of Container Before the Float

If the float: right follows an element in the html structure that should be to its left (and not above it), then that preceding element(s) must be float: left.

CSS for Child Elements of Container After the Float

A Clear Element

For an element after the float that has clear set, then if it has padding and background-color, make sure it also hasLayout to avoid a doubling of the padding; also this prevents extra space above the clear due to container padding, and avoids other margin issues.

References:

For padding -- http://www.brunildo.org/test/IEClearPadding.html and http://www.brunildo.org/test/IEFloatClearPadding.html
For margins -- http://www.brunildo.org/test/Op7_margins_float.html (look down the page for IE7)

A Paragraph Before a Clear Element

Having a paragraph with a margin-bottom and shorter in height than the float, located between the floated element and a clearing element, can create an extra gap between the clear and the float equal to that margin. There is no known pure css fix other than giving the paragraph a zero bottom margin (which may not be acceptable if the paragraph may go taller than the float).

Reference:

Paragraph following -- http://www.brunildo.org/test/IEFloatClearMargin.html

Conclusion

I cannot guarantee I have addressed every issue that may occur with a right floated object, but certainly many major ones are covered. As to “why” these things happen, it is all “bugginess` in IE7.

Acceptable CSS Hacks/Fixes