HTML and CSS Reference
In-Depth Information
To debug this, let us use Firebug Lite to check what styles are being applied
on these elements. You can install Firebug Lite as a bookmarklet on IE7 ( ht-
tp://getfirebug.com/firebuglite ) . Clicking on that bookmarklet would enable us to use
a constrained version of Firebug on IE7.
Using Firebug, we see a debugging window, as shown in the following screenshot:
Checking into our main.css , it seems like our media query-based styles are all
being parsed and interpreted by IE7, irrespective of the conditionals within! For ex-
ample:
.t-unit-1-2{
width: 100%;
}
The previous style was declared within the media query @media only screen
and (max-width: 750px) , which is supposed to override the existing rule (.t-
unit-1-2 { width: 50%; }) only if the query is satisfied. But IE7 simply ignores
the features mentioned and blindly applies all the style rules it finds.
Thanks to conditional CSS class names, we can fix this trivially by adding an addi-
tional style rule to the original CSS declaration to prevent this override in IE6 to IE8.
The Appendix , You Are an Expert, Now What? covers conditional CSS class names
in greater detail.
Search WWH ::




Custom Search