Phone and FAX
Tel: 0845 121 1194
Fax: 0845 121 1195
Archives:
Meta:
Categories:
IE8 fully CSS 2.1 Compliant - September 12th, 2008
Internet explorer 8 developers have announced that IE8 will be fully compliant to CSS 2.1 standards. This is great news for web designers as IE have always been one step behind when it came to implementing CSS. however if you want to use selectors in IE8 you will have to use the vendor specific tags. You may have seen if you have looked at CSS that some of the selectors might have, ms- or moz- before them. These are browser specific rules and IE8 will use this to fill in the gaps for the CSS 2.1. Its really refreshing to see that IE are really pushing the boat out with how standards compliant they are making the next browser and how much CSS they are implementing. The release of Google Chrome should also buck up the ideas of other browser makers and i would like to see a browser war with regards to them trying to implement CCS into the browsers.
There is also a nice list of CSS 3 features IE8 wil be able to implement including grid layouts which will be a great feature to be able to use. Again some of the CSS 3 features will have the vendor prefix attached in order to work. One comment on the IE blog that released this information was a call to IE to make the CSS engine separately up date-able from the actual browser itself and i think this is the way it should be. Currently if more CSS was to be implemented into the browser a new build of the browser is needed, If the CSS could be updated separately then it could be part of the windows update function and would give IE a massive benefit in how they could update so easily.
IE8 is in Beta 2 version at the moment so i would expect it to be available before the end of this year and ill be here anticipating everything we have read about it
Gary
Web Designer
Use PNG Images in IE6 - August 14th, 2008
Many of us will know that Internet Explorer 6 (IE6) does not support PNG image types. Although this is the case, today, I’ll show you a nifty trick that will allow PNG’s to be used within IE6.
How is this worked around? We use the AlphaImageLoader filter in CSS.
We use two div tags, one which is for IE only and the second for all major browsers. IE7 will be able to view both and so we have to force it to use one only. Confused? Read on.
Let me explain, if we make a button with a transparent background using a PNG image, we first need to make a div for browsers that doesn’t support PNG images and another div for those browsers that support PNG.
Now the code:
HTML:
<div id="ie6_button"><a href="#"></a></div>
<!-- No text here as the other browsers will use the div below -->
<div id="general_button"><a href="#">Click here</a></div>
CSS:
#ie6_button a{
display:block;height:50px; width:100px; float:right;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/button.png', sizingMethod='scale');
}
#ie6_button a:hover{
cursor:pointer;display:block;filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader (src='/images/button_over.png', sizingMethod='scale');
}
Internet Explorer 6 and 7 will be able to read all the code above which other browsers won’t except for the image dimensions.
The code below will target other browsers including IE7
html>body #general_button a {
color:# 66cc99;
display:block;
text-transform:uppercase;
font-size:9px;
float:right;width:100px;
height:50px;
position:relative;
left:149px;
background:url(images/button.png) no-repeat right top;
text-align:right
}
html>body #general_button a:hover{
background:url(images/button_over.png) no-repeat right top
}
AS IE7 recognizes the AlphaImageLoader code, we target it to use AlphaImageLoader only. How is this done? See below:
*:first-child+html #button {
background:none;
/* This makes IE7 use ImageLoader only */
}
Remember to keep the position of the general_button relative so it’s not pushed aside by IE6.
IMPORTANT:
- AlphaImageLoader will not work in IE6 unless you have ActiveX installed.
- This may not be too practical most of the page has a transparent effect. You can consider cutting the PNG short using a background colour or image if possible.
- ONLY USE THIS TECHNIQUE AS A LAST RESORT. Why? It’s not future proof.
Ahmed Bhula
Web Designer