5 CSS tips and hacks for Internet Explorer
Published on 25 May 15
James0
Cascading Style Sheets (CSS) is a markup language that has many versatile uses for web development. It is used by most web developers to produce visually captivating webpages for users to enjoy as well as user friendly application features on web browsers and on smartphones.
The versatility of CSS is derived from multiple sources that are defined in an order of precedence where the definitions of any style element conflict.
CSS is formatted primarily to ensure the separation of document content from document presentation as well as separating presentation instructions from any form of HTML content, whether the content is in a separate file or separate style section.
What makes CSS a great programming tool is that it allows developers to present the same markup page in distinct styles for a wide array of rendering methods such as on-screen or by Braille-based tactile devices. CSS can also be used to display web pages appropriately for different screen sizes and platforms. Other benefits of CSS would be simpler use of HTML programming, Site-wide consistency, bandwidth, page reformatting and accessibility.
However, there are still issues with CSS that I would like to address in this blog post. Besides the common problems such as vertical control limitations and the lack of column declaration that fazed many developers today, one huge issue for the CSS is the Internet Explorer (IE) browser which renders CSS quite awfully.
5 CSS fixes for IE browsers
Fix 1) Fitting a conditional HTML class
To prevent any validation errors when coding CSS under the IE browser, you may want to add a CSS class to the HTML tag by applying IE conditional comments. The comments would examine whether the browser is IE and would then enter a class to its HTML tag.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->Additional Point: You may also like to apply conditional stylesheets to keep your codes valid as well.
Fix 2) Enabling your elements in achieving intended heights
When required to craft out an aesthetically appealing layout, you need to create elements with small heights as custom borders. What you would normally do on other web browsers would be to enter the command “height: (value)px†. But for IE, it would go terribly wrong.
What you should do for IE browsers would be to set the font size to 0 in order to allow your element to 0 achieve its desired size and height. This is because IE rejects the size of any element smaller than its set font size.
For example:
#element{
background: #46DE46;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
}
Another method would be to add the command “overflow: hidden†to allow your element to collapse to its desired height.
For example:
#element{
background: #46DE46;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}Another issue with regards to element height is the min-height attribute that doesn’t work well with IE.
What you can do is this:
/* for understanding browsers */
.container {
width: 20em;
padding: 0.5em;
border: 1px solid #000;
min-height: 8em;
height: auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
Fix 3) Dealing with the double margin float
Only on the Internet Explorer will you have an element that is floated with a huge infuriating margin that follows in the same direction as the float, causing your web to end up with double the intended margin size.
Well, there’s a pretty useful tip you can apply to fix this particular IE bug. Simply apply the “display: inline†rule to your floated element.
An example would be this:
#content {
float: left;
width: 400px;
padding: 10px 15px;
margin-left: 10px;
display: inline;
}
Fix 4) Center your Block Elements
For IE browsers, you may apply this technique to center your block element. Do note whether your size sets is measured in percentages or in absolute values.
Centering an entire page’s contents:body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}Fix 5) Universal IE 6 CSS
Using a special stripped down stylesheet that accommodates smooth CSS performance for all versions of the IE browser. I present to you, the universal IE 6 CSS command function.
For example:<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="ONE-STYLESHEET.css" />
<!--<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="ONE-STYLESHEET.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
HACKS
Next stop on the list let us focus on some nice hacks for CSS on the different web browsers.
A strong reminder: Hacks can be menacing, as they are non-standard exploits, you may not be able to predict the hack’s future behavior for updated browsers.You have your selector hacks:
/* IE6 and below */
* html #uno { color: blue }
/* IE7 */
*:first-child+html #dos { color: blue }
/* IE7, FF, Saf, Opera */
html>body #tres { color: blue }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: blue }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: blue }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: blue }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: blue }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: blue }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: blue }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: blue }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: blue }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: blue }
/* Everything but IE6-8 */
:root *> #quince { color: blue }
/* IE7 */
*+html #dieciocho { color: blue }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: blue; }
}
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: blue }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: blue }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: blue; }
And you have your attribute hacks:
/* IE6 */
#once { _color: red }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: red */ }
/* Everything but IE6 */
#diecisiete { color/**/: red }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: red\9; }
/* IE7, IE8 */
#veinte { color/*\**/: red\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: red !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: red\0/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0\0) {
#veintidos { color: blue}
}With reference from: http://www.paulirish.com/2009/browser-specific-css-hacks/
Well, those are my list of IE fixes and hacks for CSS. Do leave a comment below if you have other recommendations or questions! Also, follow my page on mytechlogy.com for more programmer tips!
This blog is listed under
Development & Implementations
and Mobility
Community
Related Posts:
Post a Comment
