Tag Archives: Internet Explorer

IE6 RIP – Microsoft launches IE6 countdown.


Microsoft’s site Ie6countdown.com is not the first attempt to retire the browser – in May 2010, when Microsoft last tried to enroll netizens into its cause, Redmond said, that using IE6 is like drinking nine-year-old milk because of the risks involved.

10 years ago a browser was born. Its name was Internet Explorer 6. Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.

This website is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web

You can join the cause by using microsoft’s banners at http://www.ie6countdown.com/join-us.html

Thoughts on CSS width:calc()


When I dig through all the CSS3 toys, I ask myself several questions:

How can I use it?

What need does it fill?

How can I work around it for browsers that don’t support it?

I am having trouble with justifying using width:calc()! It is not that it is not needed; IE6 needs it badly; And, coding for other browsers to include non-standards IE6 needs it. But IE6 does not support it!

So when IE6 leaves the picture we have a standard compliant browsers. In a standard compliant world we have padding-left:fixed value and width:100% and absolute:position to overlay content from another divide onto the padding-left space. It works and with or without width:calc() I use two divides and a wrapper, which is the parent document or a parent divide. In other words I only need width:calc() on the browser where overlays do not work to standards and does not support the property as a fix.

To design for IE6 I need <table width=”100%”><td></td><td width=”fixed?”></td></table> something that should make even a hobbyist say, “No! don’t do it!”

I like the property though. I just can not honestly see where I need it. For Javascript makes it possible to change one value instead of two — which can lead to smoother animations — But for attractive animations many properties need to be changed at the same time anyway.

Specifically IE6 has a problem with hiding other content on a <div style=”position:absolute; top:0px;width:100px; float:right”> This should fill a 100 pixel area on the right part of the screen – it does but it blocks the content on the left part of the screen. z-index can correct it when used only with IE6 as IE6 implementation is different and breaks other browsers.

Using jQuery as an alternative to csshover3


csshover3.htc works to add hover to all elements in IE However, it does come with a performance hit. It is always good to have alternative; sometimes different scripts cause problems for each other.

If jQuery is being used hover can be added by this code:

$(".tab").mouseenter(
function (){
$(".dropdown", this).css("display", "block");

}
);
$(".tab").mouseleave(
function (){
$(".dropdown", this).css("display", "none");
}
);

It actually is using the mouse enter event.

A few of the IE bugs to watch out for include.

1> When “LI” is displayed as a block inside a container even when it it filled a position:relative element appears to the right not below the tag. However making the “A” anchor tag a block works properly. Both need to be used as blocks so the drop down remains a child of the ul or li element.

2> When an element is even a position relative element is displayed in a UL, which should not cause the size of a ul to change it does; the ul element needs to be changed to a block with a specific size.

3> When the anchor tag is sized to a block the width of the container the links in the container also overflow and space is created below the link. These tags need to be changed back to display inline with proper usage of CSS rules.

Stats normally confirm that the dropdown get a considerable amount of attention. These should be styled.

width: calc(100%-300px)


CSS calc appears to be supported in the plans for both firefox and IE new releases. Nothing is yet known about Webkit, Chrome and Opera support time frames.

Where this is needed is in floating design styles which have a fixed width element that must be included. So the last column needs to take all the space that is left over; as it stands now the floating element only takes up the space it needs or is given. The background of the element does not extend all the way to the side. The work around is using layers.

HTML5 in IE6 7 and 8 with plugin dubbed “IE Killer”


If you don’t want to uses tiny pieces of code to render pieces standards mode in IE6, IE7, or IE8. If you want the whole thing, all of it, in one shot … including people on WIN XP which will not be able to use IE9.

There is a solution! One script to load one small pluggin and a metatag to turn it on for your html5 pages Chromeframe

Taming Internet Explorer


Many Flash developers do not want to program in JavaScript because Active Script in Flash is a safe and protected environment. JavaScript in browsers means you need to test across browsers – sometimes or mosttimes troubleshoot for one or more versions of Internet Explorer.

When it comes to coding IE6 through IE8 one is faced with the same issues that Flash developers run away from. One tool that can be used to tame Internet Explorer is a IE8 + meta tag

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>

IE=EmulateIE6 causes all internet browsers commonly in use to render as IE6. With IE7 being a minority.

Cross browser CSS3 hover on non-anchor tags


All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created csshover3.htc specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url("csshover3.htc"); }

csshover3.htc must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.

CSS rounded corners in all browsers


IE does not support CSS3 rounded corners at this moment. However IE does have a method of extending their support for different styles which can be included in the style sheet. These IE style extensions are called behaviors.

On Google code site exists border-radius.htc when this file is uploaded to a site. It can be called using:

<style>
.rounded-corners {
behavior: url(border-radius.htc);
}
</style>

The complete solution would then become …

<style>
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
</style>
<!–[if IE]><link rel=”stylesheet” href=”ie.css” type=”text/css” /><![endif]–>

Note: if the behavior: url address is not absolute it is relative from the browser html page not the css page.