Tag Archives: browsers

Cross browser opacity with CSS

Posted on by
Reply
If you thought you couldn’t acheive cross browser opacity with pure CSS then you were wrong. Appart from the fact it doesn’t validate the following snippet works. Just be careful about the order you declare them in. 
.makeTransparent{
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}

Min-width in Internet Explorer 6 #IE6

Posted on by
Reply

IE6 is still here…

As you probably already know, IE6 does not support the CSS2 property min-width. Thankfully it’s not as widely used as min-height but every so often we are asked to code it.

There are other solutions which use additional mark-up to create a min-width effect but in my opinion the best solution is CSS expressions.

I know, they suck right. Well apart from the performance hit they actually work. Combine them with a IE6 only selector or a conditional comment and you have your solution!

* html #selector{min-width:960px; *width:expression(document.body.clientWidth < 960? "960px": "auto" );}

and if you are wondering... I don't like to use extra mark-up for fixing bugs as I much prefer CSS. Why make everyone suffer for the sake of the minority!

Detect Internet Explorer 6 (IE6) and other popular browsers with Mootools

Posted on by
3
One of the top keyword searches on this blog is ‘detect ie6 mootools‘; As popular as this search term is, it’s not actually covered, so this post should fill that gap! Mootools is a great, stable, open source javascript library which is maintained by a limited number of proffesional developers. It does have a browser detection class built in but it doesn’t natively provide a method to detect the version of Internet Explorer. The Mootools developers are code purists; Extending their browser class would be easy but they do not want to do it. They do provide a method to get the browser build and this could be used along with the remaining browser string to work out the version. Essentially, they like to keep their code relevant and streamlined. In a previous post i covered how to detect IE6 with one line of Javascript. This solves the problem where later builds of IE6 can show a browser string similar to IE7. This can be combined with the Mootools browser class to produce browser variables. 
//declare global variables
var WEBKIT = Browser.Engine.webkit;
var GECKO = Browser.Engine.gecko;
var OPERA = Browser.Engine.presto;
var IE = Browser.Engine.trident;
var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
&& (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);

//test variables (delete)
if(WEBKIT) alert("WEBKIT");
if(GECKO) alert("GECKO");
if(OPERA) alert("OPERA");
if(IE) alert("IE");
if(IE6) alert("IE6");
Placing this code at the top of your JavaScript include will give you simple global boolean variables for each browser platform. Creating one variable per browser at the very start means the calls to the browser class are limited to one and the detection script is ran only once. It also means you have very simple and easy to remember variables to use throughout your code.

Save IE6 – if only Internet Explorer 6 was as good as this site

Posted on by
Reply
Save IE6 screenshot Just like every other web designer i can’t wait for Internet Explorer 6 to be gone. There are some people who do not share this view. Maybe IE6 does have some good points. Just maybe it might be worth saving… visit Save IE6 Ha! Tongue is definately in cheek. Forget about IE6 for a second and you are looking at a nice site, it even works perfectly in IE6. Check out the download link where you are forced to complete a compatibility test first and then sign the petition. I’d like to think the writing is on the wall for IE6 and that it won’t be around for much longer. In that case it really does need your help. Let’s hope it’s too late!

iPhone emulator built with Safari 3

Posted on by
Reply

iphone_emulator

Ajaxian recently posted a link to blackbaud.com and the release of an iPhone Browser Simulator. The guys over at blackbaud labs have carefully skinned a full version of safari 3 into a windows compatible program. The iPhone is apparently based on an older version of Safari than the current released one so this provides an excellent way to check your websites compatibility without having to bug your friends who own an iPhone!

Detect ALL versions of internet explorer 6 with one line of javascript!

Posted on by
Reply
One of the projects i am currently working on required me to determine if the user’s browser was Internet Explorer 6 or not. The website’s menu came slightly out of alignment by a few pixels. I would normally use a conditional statement to add extra CSS but since this was a javascript menu my choice was limited to one.. ..change the variable by a couple of pixels! After some quick googling i found a way of doing it by using the user-agent string. The Future of the Web » Detect Internet Explorer 6 in JavaScript This seemed perfect until i read the comments and stumbled across something. I was already aware that there are several different versions of IE6 and IE7 in existance but i didn’t know that some IE7′s return ‘msie 6‘ as it’s user string. An oversight by Microsoft perhaps? Thankfully the user who pointed this out also offered a solution. Kudos to James King (comment number 8)! 
var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
 && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1)

Firefox 3 is here!

Posted on by
1
Firefox 3 is released!

Firefox – a compliant browser

After months and months of hard work the peeps over at Mozila.org have released the latest copy of Firefox. If you haven’t heard of Firefox before WHERE HAVE YOU BEEN? It is the best independently developed compliant browser in the world.. FACT! In a world dominated by Microsoft, and their policy of ignoring any web design standards, Firefox offers a breath of fresh air. It is fully compliant to W3C standards and fully supports CSS 2. Version 3.1 will offer even more and will start supporting CSS 3 selectors!. It also supports open source plugins, themes and of course add-ons such as Flash or Java. It even now supports things like the Turntool Viewer. Added together with the auto-install and update features it is easy to keep up to date with the newest releases. Basically to sum up… Firefox works and it makes the web look beautiful again. If you’re not a fancy dan with your lovely purrrdy mac then you need to install this!

Plugins – browser heaven

One of the best features of Firefox is the ability to install plugins which enhance your net use. As a web developer these plugins are even more fantastic as they can cut development time, help find bugs and generally make your day to day job easier. Some of the plugins that i use include: Web Developer – This tool bar is so useful i almost forgot it was a plugin. It has an amazing array of features, too many to list, each one is super useful. I guess the best ones would be disabling CSS or Javascript or Flash, cookies, forms, images, displaying meta info, clearing the browser cache, outlining elements, resizing the window, viewing source code in colour and validating your code. Firebug – this plugin allows you to edit html, CSS, Javascript ‘LIVE’ in a web page. The results are show in the browser and if you have ftp support you can even save the edited file. This is great for correcting CSS bugs or layout issues. Another great feature is its debugging tool, if you write any form of JavaScript you will find this feature irreplaceable! ColorZilla – This tool has more features that you might think! The two main ones that I use are the colour dropper tool which allows you to sample a colour from anywhere within a web page, and the outline tool which displays a dashed red line around all elements. This is especially useful when designing CSS layouts as you can view divs and other elements. Screengrab! – Anther simple but great tool! It simply allows you to screen capture a web page and either output a png file or copy it to your clipboard where you can then paste it into your authoring software. This is especially useful as it can screen grab the whole web page and not just the visible partition. ViewSourceWith – A simple idea but nether-the-less immensely useful. View the web pages source directly in your authoring software ie Dreamweaver! Live HTTP headers – This plugin displays your web sites live HTTP header requests are they are sent and received. Tamper Data – If you should want to do such a thing as tamper with your HTTP headers then this is the plugin for you. Just start it up and it intercepts all the headers, you then edit them and submit away!! FireFTP – Turn Firefox into a ftp client GSpace – You will never need your USB key fob again. This uses gmail as a ftp remote folder. You can upload anything directly to your gmail inbox. It will use the gmail mp3 player to stream mp3’s and you can view images by thumbnail. One downside is gmails 19mb cap per upload but you can split your files. One bonus.. my 6gig gmail account! English Dictionary – Speaks for itself. Right click a misspelt word and just select the right one. Bing bang bosh PicLens – A 3D virtual wall for displaying photo albums and videos. The sites have to be compatible but with flickr, facebook and myspace in the loop it’s a winner already Download Status Bar – If the download pop-up annoys you this is what you need. It integrates the download status into you status bar and has many extra features to make downloading a neat and tidy business. So first impressions are good. The interface is smart but clean. Everything seems to work. I guess this is what it must be like to own a mac!