Another tool that I have found extremely useful recently is called XRAY. This awesome small peice of script is so basic and easy to use there is no reason why you shouldn’t have it available for your site. And the best thing is it works across ALL browsers (that I’ve tried it with so far, with the exception of Multiple IE browsers).

How do I Get It?

All you have to do to get the script is visit the above link and copy, or drag the shown link to your favourites bar. Then, whichever page you are looking at you can use the script on simply by clicking on the link in the favourites bar of any browser. And how does it work? I hear you say. I believe the script is basically javascript and all it does is inspect the element that you click on (much like Firebug for Firefox) giving you plenty of details about it’s name, it’s hierarchy in the document and some of the styles that have been applied to it.

Another good portion of this script is that it highlights the area you are ‘inspecting’ very clearly and even shows the margin and padding applied to the area in different colours. I have found this so very useful for debugging sites in IE where extra margins and padding seem to be applied all the time! Gone are the days where you simply couldn’t see where the problem laid… with this tool you can almost certainly find and correct the problem with ease!

However, more and more frequently I’m finding it a very handy aspect of style in web pages. As long as you know how to use it correctly it can create some awesome looking sites, works very well with javascript, and is relatively easy to use in a good development way.

One of the basic reasons I was always told not to use it is because when you absolutely position something you are taking it completely out of the document flow, which is not usually a good thing, and position attributes (such as top, and left) are values taken from the edges of the browser view pane… or are they?

But wait, that is not the case!

It is only the case if you are positioning elements inside a statically positioned element. To explain this a little easier we’ll use an example. Say we have an HTML document with a div that is 400 px wide, 500 pixels wide, has a 50 pixel margin from the top and is center aligned. If we stick another div in there with width 50 pixels, height 50 pixels and is absolutely positioned, the obvious happens. The small div inside our container div is taken out of the document flow and stuck right in the top-left of the users pane.

Now, try adding ‘position: relative’ to the container div. What happens? The div is now contained inside it’s parent and is positioned in the top and left corner of the container! It’s that easy. When you relatively position a containing div it contrains the proportions that our relatively positioned div can use and basically says ‘you can only be positioned from the edges of me’. This little trick is so very useful and I find myself using it a lot for positioning of elements inside a container that can be stuck exactly where they without worrying about the size of a browser window.

It has also helped our team of CSS Integrators who were having trouble building some CSS Documents around a static HTML page. Some of the items had to be taken out of the document flow in order to get them to position where they should have been.

I’ll admit that I would always still prefer to use floats, margins and padding to get the positioning of the web pages I create correct. But for smaller items that can make full use of absolute positioning, by all means go ahead and have a play with this. It’s a amazing what you can do with it when the correct need arises!


border-width: 1px;
border-style: solid;
border-color: #000;


Or, as a more frequent example:


margin-top: 10px;
margin-bottom: 15px;
margin-left: 25px;
margin-right: 0;


That last example is four lines of code that could so easily be condensed into one simple line. The same applies to (X)HTML markup too. One of the more frequent examples I see of this is putting an image inside a div and using the div class or id to position that image. Save yourself some time and energy and stick the class or id in the image tag and get rid of the redundant div tag (I’ll be coming back to this later)!

In my above two examples of CSS the correct and more ‘lightweight’ way of writing exactly the same thing would be:


border: 1px solid #000;
margin: 10px 0 15px 25px;


For a lot of CSS rules the order in which you place the properties is not overly important, but for others you really do need to know them. For example, here where we have set all four margins in one rule you must always remember the correct order, which is top, right, bottom, left (remember the points of the compass, north, east, south and west). It is simply a case of getting to know which selectors you can apply this to (such as fonts, borders, margins, padding etc.) as well as what you can and can’t include in the property order for that selector.

Going back to the (X)HTML example a lot of the problem comes with a little illness called ‘divitis’, which basically means using divs for everything. I’m going to write an article about semantics later on, which will apply to this post, but for now I’ll just say that you do not need to wrap everything in a div to position it. divs are not the only tags out there for you to use and you should be using the correct tag for the correct page element. So, in the example above we want to move an image to a certain position and give it a border. Wrapping it in a div to do so is creating redundant code that will add to page loading times, and for SEO purposes increase the code-text ratio, which is bad!

Why not stick the id or class of the CSS selector that does all the moving inside the image tag and then make a small modification to the selector that applies it to the image (for IE pruposes, especially when using floats with margin and padding). Example:


#header {
float: left;
border: 1px solid #000;
margin-top: 10px;


… would need to become…


img#header {
float: left;
border: 1px solid #000;
margin-top: 10px;


And there you have it. A stripped div tag with exactly the same effect to the web page. You may be thinking that this is a very slight change and wouldn’t make much difference at all, which is true. But when building large (and especially dynamic) pages you really do need to consider making sure your code is as efficient as possible and by doing this for each redundant tag it will make a difference.

This applies to your CSS too. Once you have built quite a large site you will start to realise that your style sheet is getting increasingly large and filesizes can become a bit of a worry. You could split your stylesheet up a little and only load the relevant styles for relevant pages, but this can become quite tiresome and way too much work (unless you organise yourself to do this from the start). The easier way would be to optimise your style sheet removing any redundant classes and id’s that aren’t used any more and make sure that your rules are compacted into as few as possible.

Of course, to make things easier there are certain programs out there that will do these things for you, and being the kind-hearted soul that I am I’ll post a link to the one I find most effective:

Code Beautifier - Just add your CSS!

CSS Vista can help with this. The way it works is, you open up the program and type in the URL of the web page you want to edit. This can be local or live. Once you are there you can load the specific CSS file that you need to work on and it will appear in the left-hand pane with your site in the right. You can then edit the CSS in ‘real-time’ and see what your changes do to the site. Once you have finished you can save the CSS file and upload it to your server with the changes in place and site looking as it should.

You may be wondering at this point what benefit this gives CSS developers because, for those that use the add-ons for Firefox, this same thing can be done with EditCSS or the developers toolbar. But the great thing about CSS Vista is that you can open IE as a browser within the program and edit THAT in real-time too! You can even open both browsers at once in the right-hand pane, and see how your changes affect both! That is extremely helpful when you need things to look the same, but don’t know what will work!

The best thing about it is, it’s free! It’s currently still in a beta stage, and although it works very well, there are still a few bugs to iron out. But for new developers and those stuck with cross-browser difficulties, it’s a must-have!

http://litmusapp.com/labs

I’ve just been sent a very interesting link about Microsoft’s Internet Explorer 8, that was set to change the way developers code their websites completely, again!

Originally, Internet Explorer 8 was set to burden web developers, like all of the other Internet Explorer releases, this time by requiring the use of an extra meta tag for each page of content, that told Internet Explorer 8 which standards mode to render in… either Internet Explorer 8’s standard mode, or that compatible for Internet Explorer 7. Of course, if Microsoft had gotten things right from the start then there wouldn’t be any problems whatsoever.

The good part was that they had attempted to make it Standards Compliant and it even rendered the Acid2 Test Page correctly… for about a day!

However, as most web developers know, there are so many tricks and hacks needed to create a web site that looks as it should in, especially, Internet Explorer 6. And, although Internet Explorer 7 was a huge improvement, it still didn’t have the completely rendering capabilities of the other major browsers out there.

It was because of this flaw from the start that web developers had to ‘hack’ their CSS using all sorts of weird and wonderful methods, or by creating ‘Conditional Comments’ (the only Microsoft Godsend to help fix their own mistakes) to allow for browser specific styles. So, when you look at a page in Internet Explorer 8, the thought was that you might actually need it to render as Internet Explorer 7 because of the hacks you’d put in place to get things to works for versions 7 and 6. Confused? Good.

However, it is now apparent by the latest posting on the IEBlog that Microsoft have realised (by the amount of feedback recieved because of the original post) that this method is actually not really appropriate and that Internet Explorer 8 should render in complete Standards Compliance Mode and even offers some support for CSS3.

You can read the article here. Feel free to leave a comment as to what you make of this. The conclusion here being that Microsoft, once again attempted to come up with an ingenious way of covering their own mistakes, yet realised (finally) that it’d be a lot more straight forward to just start again! Thank God for that!

Is A Form A Table?

Most commonly forms are marked up in tables and I’ll admit that this is the one use I have for tables that don’t directly indicate tabular data, most likely because it’s the first method I used to code a form and I’ve just never got out of the habit. But building my own personal site that contains comments and other various forms I started to question whether this was semantically correct because a form is not really a table of data.

Is a form a list of fields?

This is probably just about the closest semantic method for creating a form, such as a contact form, because you are looking at a list of input fields so naturally you’d think it was a list? Obviously to switch from tables to proper HTML the easiest way would simply be to stick it in a number of paragraph or division tags, but looking at semantics a form would not naturally fit into either of these.

The great thing about lists is, as soon as you turn off their margins and padding (using the Universal Selector) you can do anything with them. Navigation lists can so easily be created in just CSS by using a ul and an li tag. Forms, I believe should use the same mark-up. This gives you such a wide scope in CSS that you can do with them and they will then look better.

But no, a form should be a fieldset!

Yes, the fieldset. Not many people know of this tag, and it is even less widely used. Web Standards state that a form element should contain some form of block-level element for the input fields to sit in, so this could be a div, or a p, or any other block-level element. But the most semantic is the fieldset that sits nicely around your form and you can apply a legend to it, which can also be styled, giving you a very nice looking form. This article is a nice little guide to the kinds of things that fieldsets can achieve. It may look like a long way to go about things, and there are obvious browser inconsistencies, but it’s not too tricky, very functional and most importantly semantic.

When couple with some nice CSS you can create a really nice form with a legend that does everything you want, or need it to do

For example, did you know that Internet Explorer and every other browser handle heights differently? Shocking I know. Internet Explorer 6 and below do not recognise the CSS property ‘min-height’, which does exactly what it says it should in Mozilla and the other browsers. That is, a section given min-height will never shrink to a height less than that value. This becomes very useful with dynamic sites where you don’t know how much content there is going to be and you would like your page to have some form of height whether there is content to fill it, or not.

Height in every browser other than Internet Explorer will set the maximum height of an element and won’t expand beyond that. We can’t use this in our example because the content might be longer than our set height. Internet Explorer incorrectly adjusts for this stretching the element to fit the contents inside, which should be the functionality of ‘min-height’ not ‘height’. This means that unless we use ‘overflow: hidden’ the element will stretch in Internet Explorer. A real pain that can be.

However, the fix for this can be found in this list and it’s simple to implement as it requires setting a min-height (for browsers that support it), a height (for Internet Explorer), and the middle value with !important resets the min-height for Internet Explorer, whilst not conflicting with the value set for the other browsers.

A very helpful fix and plenty more can be found at Stylized Web.com

It’s probably worth mentioning that I’ve left the sticky footer in there from the last design just for presentation purposes, but I’ve put comments in the stylesheets so the code is easy to identify and rip out if you don’t want it.

The main issue I’ve found with this method of creating fluid CSS layouts is that the footer is only pushed down by the main content area and not the sidebars as they are absolutely absolutely positioned. If you know of a way around this feel free to leave a comment.

So, in the meantime I’ll continue experimenting with some different layout methods which I’ll post about in the near future.

I’ve given the side columns a fixed width and the whole layout a min-width of 800px, simply because this is the standard browser resolution we’re usually asked to develop for.

I’ve incorporated a sticky footer designed by Ryan Fait just because.

I’ve tested the design in MSIE 6 and 7, firefox and opera and found no problems in any. The code is fairly straightforward and valid.

This is the how the layout looks in nice bright colors for the youth.

HTML

<body>
	<div id="wrapper">

		<div id="header"><h1>Header</h1></div>

		<div id="left"><p>Left Sidebar</p></div>

		<div id="center"><h2>Content</h2></div>

		<div id="right"><p>Right Sidebar</p></div>

		<div class="push"></div>

	</div>

	<div id="footer"><h2>Footer</h2></div>

<body>

The CSS

*{
padding:0;
margin:0;
}

html, body{
width:100%;
height: 100%;
}

#header{
width:100%;
height:10em;
background:#e00;
clear:both;
}

#left{
width:25%;
height:100px;
background:#0e0;
position:absolute;
right:0;
top:10em;
}

#right{
position:absolute;
left:0;
top:10em;
width:25%;
height:100px;
background:#00e;
}

#center{
margin-left:25%;
margin-right:25%;
height:200px;
background:#ee0;
}

#footer{
width:100%;
height:10em;
background:#0ee;
}

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -10em;
}
#footer, .push {
	height: 10em;
}

There’s some fairly big changes coming which all tie in with the new layout and some brand new tools which should benefit both businesses and users alike.