TRINIX

As every mature webdesigner and webdeveloper knows that are a lot of differences between all the different browsers (Internet Explorer, Firefox, Safari,..) Each browser renders a webpage and lay-out a bit differently.

Being the good webdesigner and webdeveloper you want your website / application to look the same in all browser. For this you use CSS hacks and exceptions and so on…

But the problem was usually testing the lay-out in different browsers.
You can install usually different browsers a long each other but there was a problem with installing different versions of browsers.

Example: Internet Explorer 6 still is used a lot, but if you update your windows you get the Internet Explorer 7 (which renders pages very differently from the Internet Explorer 6). So once you upgraded to IE7 there was no real possibility to test or install IE6. This is a widely know problem for most of the webdesigners and webdevelopers.

Until recently you had 2 options:

Option 1: install a VMware OS with for each VMware a different OS with different browser version
This was not ideal because of all performance issues with VMWare and not practical for debugging

Option 2: use a portable version of the browser (as mentioned in my previous post “Portable Internet Explorer 7“)
This was working, but also not ideal since limited and not always stable.

The kind people from DebugBar (IE alternative for Firebug, like mentioned in a previous post “Firebug for IE“) created a new tool “IETester”.
This is 1 tool which has all the different interenet explorer browser engines build-in.

Official description:“IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.”

I tested it and this is what every webdesigner has been looking for, believe me!!!
No more messing around with VMWare and portable version. Just 1 tool for all versions of Internet Explorer, what more do you need.

Download it here: Download IE Tester
Or have a closer look at the official website: http://www.my-debugbar.com/wiki/IETester/HomePage

PS: you find the DebugBar (IE alternative for Firebug) there as well, a most have IE add-on

Screenshot of IE Tester:

If you ever need to build a grid-like structure on a webpage, you have to setup all the different DIV boxes and then start to lay-out and position them with CSS and make the grid cross-browser compatible. This can be quite a hassle and you can loose a lot of your precious time and then you are finished and somebody asks for an extra box. Then you would practically start all over again… You would think

The guys at Yahoo were kind enough to put together a “Grid builder” tool. With this tool you can create your grid and change it as you like with a simple mouse-clicks. When you are happy with the grid you can just save the HTML and CSS code and you are good to go. Saved you half a day of work and perhaps a lot of stress

Yahoo Grid builder: http://developer.yahoo.com/yui/grids/builder/

UPDATE: Somebody made an also a Grid generator. Check it out :: http://grid.mindplay.dk/

CSS is a life saver when it comes to managing the GUI of a website.

Changing 1 style in the CSS file, will affect the whole website (if you implemented CSS in the right manner offcourse )

But even your precious planned CSS lay-out is a victim of the different rendering of the default styles in the various browsers.

For example a H1 is rendered in IE with a specific white margin below its text, while in FF this has a different margin.

Even a form is rendered differently.

To prevent from working with 10 different CSS files, one for each browser existing, it’s easier to reset all the default styles to a specific style.

This can very easily be achieved. You need to set all the default styles in 1 CSS which you include each time as the first CSS file and next you will be working with a CSS lay-out that’s cross browser compatible.

How to reset the default styles and which styles to reset is explained by Shape Shed :: http://shapeshed.com/journal/default_styles_for_css/

Another great explenation can by found at the Yahoo UI Library (which is an excellent reference concerning UI) :: http://developer.yahoo.com/yui/reset/

Go have a look and you will save several hours and a lot off stress and cursing when you start lay-outing your next website or web application to be cross browser compatible.

Today, I came accross the adobe online colorshemer website.

http://kuler.adobe.com/

It’s a flash based colorshemer with everything you need at your fingertips.

You can view popular colorshemes, play around with settings, create your own colorshemes,…

It’s definitely worth bookmarking this site.

http://kuler.adobe.com/

Another CSS lay-out technic for looking default HTML buttons look really slick

View this nice how-to:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Found this really cool website on how to lay-out input and checkbox html items

check it out: http://www.chriserwin.com/scripts/crir/index.php

Everybody who has ever used a Mac, have certainly liked the Dock menu with the nice Mouse-over effect.

This effect is called fish-eye, and the people at n-design-studio have made an nice looking HTML/CSS version of the Mac Dock menu. They used JQuery as Javascript library. JQuery has the Fish-eye effect build-in.
It really works and looks nice, so perhaps you can use this in a Web Application or website.

Example: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html 

Check out this website with an interesting article on how to re-use the Buttom element for lay-outing and extra functionality.

http://particletree.com/features/rediscovering-the-button-element/

Very nifty how-to on lay-outing a file input element with CSS/DOM.
Came in handy when developing my RSS feed reader.

http://www.quirksmode.org/dom/inputfile.html

Extra: another approach

This script will let you use an image for the ‘Browse…’ button and style the textbox. It also clears the path name from both the file and text tags so they stay in synch. I also have it so the image path is displayed on submit so you can see it is working.

<html>
<head>
<script type=”text/javascript”>
function setPath(f) {
document.getElementById(’mypath’).value = f;
}
function browse() {
document.getElementById(’realFile’).click()
}
function clearIt(f) {
f.value=”;
var d = document.getElementById(’browser’);
var olddiv = document.getElementById(’realFile’);
var new_element = document.createElement( ‘input’ );
new_element.type = ‘file’;
new_element.id=’RealFile’;
new_element.onchange = function() {document.getElementById(’mypath’).value = document.getElementById(’realFile’).value;};
d.replaceChild( new_element,olddiv );
}
</script>
</head>
<body>
<form onsubmit=”alert(document.getElementById(’realFile’).value);r eturn false;”>
<input type=”text” style=”width=300px;border:solid 1px #0000FF” id=”mypath” onfocus=”clearIt(this)”>
<a href=#” onclick=”browse()”><img src=”d.gif” border=0></a>
<div id=”browser” style=”display: none”>
<input type=”file” id=”realFile” onchange=”setPath(this.value)”><p>
</div>
<input type=”submit” >
</form>
</body>
</html>