Cannot Upgrade From IE6 to IE8 - Internet Explorer
Jun0
The #fail of the day goes to Microsoft for the inability to upgrade from IE6 to IE8 using the download link on their IE Home page. You would think that Microsoft would test this scenario heavily, but I hit this problem from two different machines running IE6. Clicking on the download link put me on a blank page with a script error, and no amount of refreshing or clearing the cache would fix it.
The only way I could eventually make the script error go away was to clear my cache, then hit back, then hit reload, and finally attempt to download. I’m curious to see what happens next!
Stylesheet Not Loading in IE - Opera KB Support
Jun0
In an apparent oversight, Opera’s Knowledge Base page doesn’t load the stylesheets at all in all versions of Internet Explorer. Browsera automatically detected this bug by noticing the layout was very different. On this page, Opera is using
<link rel=”stylesheet” href=”/css/screen.css” type=”text/css” media=”projection,screen and (min-device-width:950px)” />
and “min-device-width:950px” isn’t supported in IE. We know you want people to switch to Opera, but I think this is just going too far.
DIV drop in IE6 due to expanding DIV - Apple’s “Why Mac” page
Jun1
In running a test against the brand everyone loves or hates, Browsera found a couple of IE6 layout bugs on the Apple “Why You’ll Love Mac?” page. This one is caused by attempting to put two floating div’s into a parent div that is not wide enough. Here is the relevant code:
<div class=”grid2col” style=”width: 100%”> <!– this width was 844px for me –>
<div class=”column first” style=”width: 565px; float: left”>
</div>
<div class=”column last” style=”width: 200px; float: right”>
<img id=”model” height=”382″ width=”288″ alt=”Macbook” src=”http://images.apple.com/getamac/whymac/images /pleasure_model20090106.jpg”/>
</div>
</div>
Even though the parent div width of 844px seems plenty wide enough to fit the two floats with the specified widths (565px + 200px = 765px), Internet Explorer 6 will automatically expand the div containing the image to fit it. Once you add these widths together (565px + 288px = 853px) the elements cannot fit on the same line, and the image gets dropped down. If you set
overflow: hidden
on the “column last”, IE6 will no longer expand the div and the elements will fit together correctly. Note that this will cause the image to be slightly clipped on the right hand side. Alternatively, the containing div can be expanded to fit the image, though this will slightly change the layout of the page.
IE6 100% Width Float Drop - Bing Community
Jun0
On Bing’s Community pages, there are avatar icons next to the users post activity. But, Browsera detected a float drop issue in IE6 where the user’s avatar is not properly aligned with their activity.
Here is the relevant HTML with CSS styles inline
<div class=”list-rockers” style=”width: 100%”>
<div class=”thumb” style=”width: 50px”> [USER AVATAR]</div>
<div class=”user-info” style=”width: 163px”>[USER ACTIVITY]</div>
</div>
I think the problem is that the 100% width is causing IE to calculate this width before it has completed its layout, and thus, the actual width of the containing div is 212px. Setting this width to an explicit value of 220px in IE6 makes the container wide enough to hold both floats and margins.
IE7 Ignores Submit Button Padding - Twitter Homepage
Jun0
In testing Twitter, Browsera detected a problem in IE7 with the “Sign In” button dropping below the line with the “Remember Me” checkbox. Surprisingly, it is on the correct line in IE6. Here is the Twitter input wrap problem as detected by Browsera.
The problem seems to be that Internet Explorer 7 is using its own padding instead of that in the stylesheet. (In this case, it’s using too much padding.) This turns out to be really easy fix, credit to Mr Kirkland for figuring this out. Applying the style
overflow: visible;
to the “Sign In” submit input button forces IE7 to honor the padding as specified in the stylesheet. With that, the homepage will be consistent across browsers. Horray!
Float Drop Issue in IE6 - Bing Travel
Jun1
Microsoft’s new Bing brand, which is basically rebranded Live, which used to be MSN Search, launched a couple weeks ago. You’d think that MS would have been very diligent to cross-browser test their pages, however, Browsera detected some unsightly layout issues occuring in IE6.
The first is on the Bing Travel page. You can see that the “search hotels too” radio button is misplaced in IE6. Here is Browsera’s detection on the float drop on the Bing Travel page.
This problem appears to be caused in Internet Explorer 6 by the <div class=”clearAll”> inside the <div class=’submitButton’> not having an explicit width and thus expanding to 100%. Applying style
width: ‘1px’
to that clear div fixes the problem and pulls the radio button into the right spot in IE6.