Internet Explorer CSS bug fixes

The <!--[if IE]> Tag

Problem: Various sizes, margins and padding attributes can display differently in Internet Explorer, this coded snippet can help you sort out these problems.

Add this code with your required settings underneith your pages <style> or external style link:

<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->

These setting will now only be loaded when your page is viewed in Internet Explorer. I often use this setting to tweak areas of my layout that do not quite display the same as in other browsers.

Minimum height bug

Problem: When trying to create a DIV tag and the height will not go below about 12px

Simply add the following attribute to the DIV tag

{line-height: 0px;}

If this does not work try adding the line-height attribute to a <p> paragraph tag within the <div> tag itself.

Your final code should resemble one of the following:

<div style="line-height: 0px; height: 5px;"></div>

<div style="height: 5px;"><p style="line-height: 0px;"></p></div>

Margins appear larger in Internet Explorer

Problem: Setting the margin attribute for any CSS element in Internet Explorer it will often appear either double the size or with added width, which can seriously disrupt detailed layouts.

Simply use the {display: inline;} attribute on the tag containing your margin setting.

Your final code should resemble the following:

<div style="display: inline; margin-left: 5px;"></div>

CSS Light box Adobe Flash fix

Problem: The CSS Light box script will not appear on top of a Flash movie, this disrupts the actual function of the script.

Add the following setting(s) to the Flash HTML code:

<param name="wmode" value="transparent"/>

Also add this to the <embed> tag

wmode="transparent"

Be sure to add both of these settings for this to work properly, your final flash code should look similar to this:

<param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /><param name="movie" value=" movie.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src=" movie.swf" quality="high" bgcolor="#000000" wmode="transparent" width="232" height="218" name=" movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

Technorati Tags: Minimum height bug

CSS3 features in IE8

I began writing this post in IE8*, something I didn’t think I’d be doing just a short while ago; the IE team have certainly been busy in the last 18 months! As it’s beta software there are obviously quite a few rough edges and we can’t consider it feature complete, but I thought I’d take a look at what features of CSS 3 have made it in already.

The short answer: not many! In fact, the only ones I can find are the substring matching attribute selectors:

E[att^='val']
E[att$='val']
E[att*='val']

These allow you to choose elements based on substrings of their attributes; that begin with, end with, or contain (respectively) the provided value. Update: As has been pointed out in the comments, these were already available in IE7; I should have known that, as I wrote the (now outdtated) compatibility table! In my defence, it was very late when I wrote this post…

Other than that, nothing I can see. Although it’s not new to CSS3, generated content is supported, which is good news. Using the :before and :after pseudo-elements, you can add text content (and images according to the spec, although they don’t seem to work in IE8);

E:before { content: 'foo'; }
E:after { content: 'foo'; }

No opacity or RGBA yet, which is a shame as they’re supported in almost all of the other browsers. Still, it must be remembered that there’s still time for new features to be added before release.

* I had to switch to Firefox; IE8 is not ready just yet!

IE8 and CSS 2.1 Testing

Since I joined the IE team at the beginning of 2007, it has become clear to me how important it is for web developers to predict how a given browser will work.  I’ve certainly heard and read how very important it is to web developers to minimize the cost of supporting each additional browser version.  In apparent contradiction to this, everyone needs continued innovation in the browser to create new online business opportunities.

One of the most important ways to ease development costs is to support a well-defined set of web standards in all the browsers.  This frees up developers’ time to spend on their site innovation rather than porting and testing work.  However, sometimes there are ambiguities or optional items in the specifications, such as the behavior of tables.  This naturally results in browsers that behave differently.

 

The Internet Explorer team is serious about enabling web developers to be the most effective and efficient as possible.  One very important way we can do this is to support and contribute to the web standards.  For the Internet Explorer team, we will do this in multiple ways including implementing support for standards and driving to cut the ambiguity in these industry standards’ specifications.

 

I believe the way to cut through the ambiguity is to have a set of tests that can help define how the implementation should actually work.  The W3C’s CSS Working Group has a set of 487 tests today in the CSS Working Group’s level 2 revision 1 test suite.  We just submitted over 700 tests to the W3C for possible inclusion into the official test suite.  We’re providing these using the BSD License.  We wrote these to test the CSS 2.1 behavior in IE8 beta 1.  The coverage they provide is for both basic property support and the scenarios called out in the CSS 2.1 spec.  We strongly believe in the W3C and how its test suites can ultimately help the web developers of the world spend more time creating new web experiences and less time dealing with browser differences.

 

The feedback regarding the first set of submitted CSS 2.1 tests will help us improve these tests and strongly guide our future test submissions to the CSS Working Group and others.

The IE Test Team welcomes your feedback about our CSS 2.1 tests including our interpretation of how they test the CSS 2.1 support in IE8 Beta 1.  If you’re interested in commenting on the tests, I encourage you go to join the existing W3C’s 2.1 Test Suite Mailing List discussion on the topic.  I truly believe that starting with IE8 Beta 1 we’ve begun a journey toward making it easier for you to build the web in a standards-based, predictable way.