source – engadget.com/ by Tim Stevens

Remember back when Germany’s Federal Office for Information Security said that Internet Explorer just wasn’t good enough for its citizens? The Office is doing its civic duty once again, this time warning against that formerly lean and mean upstart competitor: Firefox — for a little while, at least. The Office “recommends the use of alternative browser until Mozilla has released Firefox version 3.6.2,” due one week from today, and while it doesn’t make a recommendation on which browser you should be using in the interim, we’re thinking Lynx users can keep on surfing with confidence.

Update: Just as this post was going live Mozilla released the 3.6.2 Firefox security update that Bürger-CERT was looking for. Their press release has been changed to recommend updating your browser to the new version ASAP, and if you really did jump over to Lynx we would recommend closing that terminal window and getting back to reality ASAP.

via loldwell.com

IE6 – Oh IE6… Why Must We Live With You?

Well we all know IE6 is poo, that’s just a given. So we wont get into any sort of rants about ‘don’t we have enough browsers to test on?‘, ‘it’s not even supported anymore‘ or discuss such things as phasing out, browsers comparisons, percentages etc etc. It has been done to death… Although saying that, for those of you viewing this site in IE6, Cough… Firefox, Safari, Chrome, Opera or, to be fair even this would probably work better.

I have no doubt in my mind that what the digital revolution is doing for television, one day common sense will do for internet browsing and we will be rid of it forever, but until that day comes, we must live with IE6. So with that painful recognition, I thought I would put together and share a few common IE6 bugs, along with some helpful hints and tips to combat this crummy browser!

First, some advice

We can of course before we get into any bugs and fixes, help ourselves along by making sure all our code is built using semantic markup which validates and works in modern browsers. Never build your site for the older browsers first, always build for the newer ones then apply fixes for the older ones. This means you are future proofing your site. Also make sure a valid doctype is declared. If you do these things then you may not experience any bugs or issues. If you do come across a bug, fix it when you discover it as it is much easier to handle than trying to fix a boat load at the end of a project.

A handy CSS tip!

One trick I use regularly is the ‘* html‘ rule. This rule is ignored by all browsers other than IE6, allowing us to apply specific rules and styles for IE6 problem areas. This code in use could look something like:
p{
font-size:14px;
color:#fff;
}
* html p{
font-size:12px;
color:#000;
}

Using the above example, the font would be 14px and white in all modern browsers, but in IE6 it would display at 12px and be black. I sometimes use this rule to overcome some of the specific bugs highlighted below, also as a light weight alternative to replace pngs with gifs in IE6 instead of using the iepngfix.htc PNG fix which we will cover shortly.

The Double Margin Bug

Lets say we have an element on our page, a div for example. We need this div to be 500px wide and want to float it right with a margin-right of 10px. The CSS for this would look like:
div {
width: 500px;
float: right;
margin-right: 10px;
}

IE6, due to it being a genius browser will double the margin, so instead of 10px it makes it 20px. Marvelous!

Solutions:

1. You can set the element to have the property ‘display: inline;‘ which immediately remedies the issue, but this causes an element which does not have a float property attached to lose its static width. So this is not always a viable option.
2. Do not add margin-right to your element, but instead add padding-right. Again not always suitable as you may have a border or different background colour applied to your element.
3. Remove padding and margin all together from the element, and instead add a padding to the elements parent.
4. The * html fix mentioned above!

None ideal, but no bug fix is!

The Box Model

The Box Model is quite an annoying and very common IE6 bug and it involves a miscalculation of any element with a declared width. Your code could look something like:
div {
width: 500px;
padding: 20px;
}

IE6 calculates the width of the div to be 500px, whereas modern browsers will calculate the width of the div as 540px incorporating the 40px padding.

The solution:

The answer to this problem is to not add padding to the outer element, but instead embed an element, perhaps a ‘p’ tag or another div inside the parent div, and add your padding to this element instead. Creating:
div {
width: 500px;
}
div div {
padding: 20px;
}


The Stepdown Bug

This is an issue commonly found when creating elements like horizontal menus. It is caused by IE6 adding a line break after the floated element, which in turn knocks the next floated element down a line and so on.

The solution

There are two ways around this problem.
1. Set the elements that are floated, lets say the ‘li’ in a list to be ‘display:inline’, then display the embedded element as ‘display:block;’ An example of this would be:
ul li{
display:inline;
}
ul li a{
display:block;
}

This allows us to remove the float property from the parent element, in turn removing the bug.
2. You can set the parent elements line-height to 0 causing the break to attain 0 height.

None Collapsable Elements

This is quite an annoying little bug, if you are trying to set an element with a 1px or 2px height property, IE6 ignores this and will not collapse the element down further than the height of the base font-size.

The solution

Simple solution to this one, we just need to add ‘overflow: hidden;‘ onto the element in question. This then ignores the height of the font in IE6 and sets the height of the element accordingly. Example:
div {
width: 400px;
height: 1px;
overflow: hidden;
}


No Hover States

In modern web design, we like interaction, meaning we try to add hover states to more things than just links. Most modern browsers support hover states on elements such as ‘li‘ ‘inputs‘ etc, but not IE6.
You can only have a hover state on an ‘a‘ element and it must include an ‘href‘.

The solution

Unfortunately the only solution to this problem is using a JavaScript fix, something similar to this, or you will just have to live with your users experiencing less interaction on IE6.

Alpha Transparency PNG

IE6 does not support transparent images, and it was only until IE7 was introduced did Microsoft decide to say, OK we will allow people to have pretty websites! Not a quote! Yes if you try to include a nice transparent png image on your website, IE6 will throw in a lovely Grey coloured background for you.

The solution

There are again a few workarounds to this issue.
1. Use the * html fix I highlighted above to specifically add a gif instead of a png image to your site. This does mean creating 2 images every time you want to use a png but it is very flexible and allows you to keep your code clean. something like the following would work:
div{
background-image: url('images/BG-image.png');
}
* html div{
background-image: url('images/BG-image.gif');
}

2. You can use a iepngfix.htc. This works by cleverly replacing the background with a blank 1px x 1px gif image. There are many different versions of this file, some only work with inline images, some can handle background images. The one I turn to can be downloaded here. It is simple to implement and contains instructions on use.

To Conclude

These are just some of the bugs we as web designers need to face when dealing with IE6, and these are some of the ways I deal with them. Not all are the best way, but they seem to work! If anyone has any preferred and tested methods covering some of the issues above, please feel free to post them below.

for more interesting posts on the above subject pls visit branded07.com/

Opera Software today released Opera 10.50, which it touts as “the fastest Web browser thus-far produced for Windows computers” (which, in turn, calls for a comprehensive speed test – anyone?). The desktop browser has also been given a completely new design, adopting some of the style elements Google Chrome users will be familiar with.

Additionally, Opera 10.50 comes with a private browsing feature that enables people to browse for porn surprise gifts for their partners without leaving any traces.

The desktop browser, which is free to use, lands on Windows at a time when Microsoft has just rolling out its ballot screen for European users of the OS, presenting them with a choice in browsers (supposedly random, but not in reality, as we pointed out last week).

The Norwegian software maker calls Opera 10.50 the fastest browser they’ve ever produced, courtesy of a brand new JavaScript engine (Carakan) and a graphics library (Vega). The browser is also said to include improved standards support for HTML5 and CSS3.

For Windows 7 and Vista users, there are some more goodies: Opera now fully supports Aero Glass, Aero Peek and Jump Lists. You can easily access your Speed Dials, tabs and more from the Taskbar.

Opera 10.50 is available for Windows in 42 different languages – Mac and Linux versions are “coming soon”.

In a move that may actually impact people who’re still using Internet Explorer 6, YouTube has set a date for the last day they’ll support IE6: March 13th. And while that doesn’t mean YouTube videos will stop playing after the 13th, the big warning on YouTube could have a big influence on getting people to upgrade. So what exactly will the impact be on IE6 users?

• Stopped support essentially means that some future features on YouTube will be rolled out that won’t work in older browsers.