Here are mine:

• Operating System - XP
• Graphics Program - Adobe Fireworks
• Programming IDE - Visual Studio 2008
• Languages - ASP.NET, C#, JavaScript, CSS
Source Control - Subversion
• FTP - SmartFTP and FileZilla
• Browser - Firefox and IE7
• Mail Client - Gmail
• Anti-Virus - AVG Antivirus
• Firewall - ZoneAlarm
• Others - Firebug, Trillian

What are yours?

Note that position:fixed doesn't work in IE6 and under so you will need to be using another browser although we will try to accommodate IE6 with some alternate styling.

Fixed to What?

Fixed positioning varies from other positioned elements in that the element is always placed in relation to the viewport and not a local stacking context. Even if you add position:relative to a parent of the fixed element it is still placed in relation to the viewport.

This can present problems if you want to place the fixed element inside a centered layout and then place it at a certain position within that centered layout.

In order to have a positioned element inside a centered layout you can simply let it occupy its normal position in the flow and not specify any position values for top, bottom, left or right at all. This will enable the element to become fixed at that point while the rest of the content scrolls.

We'll work through some simple examples to show this in effect.

We'll start with this simple Example

Figure 1

As you can see from the example above this places the fixed element exactly at the top of our outer div and it remains there even though content will scroll. Try scrolling the page up and down and you will see that the fixed element always remains in view.

Let's see what happens if we now try and add some positioning to move it into another position.

Figure 2

The fixed element has now jumped out of the centered container and is placed 100px from the left of the viewport. It ignored the centered container's position altogether!

This is because as mentioned above fixed elements are always placed in relation to the viewport so we cannot use top, bottom left or right when we want to position within another element.

Margins to The Rescue

Fortunately we can use margins to push our fixed element around inside our centered block.

Figure 3

That pushes the element nicely into position as shown in Figure 3 above.

Although we have shown that the fixed element can in fact stay in tune with our centre element it should be noted that the fixed element won't be constrained by this parent and should content stretch the fixed element wide it would just overflow at the edges of the centred container. You would need to set a specific width if you wanted to constrain the width to match its current location.

Fixed Footer

We have now established that we can't use positioning inside our centered element so how can we place a fixed footer at the bottom of this container? A top margin can't be used this time because we don't know the height of the element and it will of course vary depending on content. If we use the position value of "bottom" then the fixed element will jump to the bottom of the viewport and not the bottom of the element we are concerned with.

In fact the answer lies once again in first using the normal rules of positioning to achieve the layout you want and then fixing the element once the layout is correct.

First of all we achieve the look we want without using fixed positioning.

One way this can be done is to absolutely position an element at the bottom of our layout and then add an inner element that is set to position:fixed. This means the element will be placed at the bottom of the layout and then it will be fixed at that exact position.

Here is the example:

As you can see in Figure 4 the element is now placed at the bottom of our layout but because #outer isn't scrolling it appears to be doing nothing different from an absolute element.

Figure 4

If we shorten the viewport to cause scrolling then we find that our fixed footer has been fixed below the viewport and is invisible as shown in Figure 5 or see for yourself in this Example 2.

Figure 5

This brings up an interesting problem when using fixed positioning in that when the element lies outside the viewport it becomes unreachable. Bear this in mind and always make sure you can reach the element in some way. This usually means making sure the fixed element is high in the viewport or is at least fixed to the viewport in some way.

We can't really use this method for our fixed footer because it serves no purpose if we can't see it. A change of tact is needed and we will need to fix the footer to the bottom of the viewport using the bottom property while not specifying left or right positions so that our element holds true to the centered layout. However we will also need to use a 100% high centered layout if we want borders to meet the footer, otherwise it may look a bit detached. (Read my explanation on 100% height in the middle paragraphs here.)

Here is the example and the resulting code is as follows.

You will note from the above code I have added some padding to the last element so that the text is not covered up by the fixed element. Otherwise the last piece of text would sit underneath the footer and not be seen. I have also added a hack so that IE6 and under just gets a position absolute footer and will still be quite functional although it won't be a fixed footer. In dynamic situations (e.g. dynamically inserted content of JavaScript content switches) IE6 can forget where the absolute footer is so you need to take care when using it in dynamic situations. (Although as an aside I have found that if you are doing a content hide and show with javaScript you just need to nudge the footer with some JavaScript also and then it remembers where it was.)

If you really want IE to join the party then the easiest way is to use an IE expression to imitate position:fixed.

Here is another example that will work in IE6.

The expression is as follows.

Be aware that expressions only work when javascript is enabled. You can read more about expressions here and if you are also unfamiliar with conditional comments you can also read up on them here.

There is a CSS way of imitating position fixed in IE6 without using expressions or Javascript but it takes a lot of effort and is rather a risky process. If you want to take a look then I have some examples below but I will not explain them today (and they are mainly experimental and not something I would advocate using). However they are quite interesting.

Example1
Example 2
Example 3
Example 4

I hope that your CSS is now well and truly fixed!

Why was this question that hard to answer? I actually feel that I am quite knowledgeable about both CSS and JavaScript. I've built probably close to a dozen websites using entirely CSS-based layouts over the last few years. In addition, I have used JavaScript quite often to enhance those websites, usually with Ajax and spiffy web widgets like the Comment Info Tip Plugin. I may not be as knowledgeable as Paul O'Brien when it comes to CSS or Jonathan Snook when it comes to JavaScript, but I certainly am competent. So again, what's the problem?

The problem is the damn cross-browser problems that still trip a person up from time to time. Almost every time I ask Paul for his help with CSS it has to do with a cross-browser issue: something works in Firefox, but not in IE or vice versa. Same with JavaScript; think addEventListener method in Firefox and attachEvent for Internet Explorer. This is a bloody mess for the developer and I suppose makes me question my abilities at times.

Such cross-browser issues make it hard for a developer. I don't know about you, but I've often spent more time trying to make a site work across all browsers than on the actual design of the site.

There are people that I know and respect that have chosen not to learn JavaScript at all because they were so put off by such difficulties. Also consider how difficult it's been to get people to leave HTML table-based designs behind in favor of CSS layouts. It's been slow at best. No doubt due much to the differences across browsers.

What's your take? How has the difficulties in trying to achieve all browser support effected your attitude of CSS and JavaScipt?

Those are our ten things any web developer worth their spit should know. What do you think? Did we leave anything off the list that you think we should have included?

This is a very large photo I took of a mountain near Choquequirao, Peru. Figure 1 shows it set as a normal background image without playing with CSS's background-position or anything else and only a rather boring corner of it (not that the whole image is that exciting either) is visible:

Figure 1

Figure 2 shows the same thing, except that the image has been centred using background-position:center:

Figure 2

It's even more boring! Now, with CSS we can still improve this a bit, by using the img element instead of a background image. Yes, this is not as beautifully semantic, but for the purposes of this example will do:

By setting the width and height of #bg and the image to 100%, we can fill the viewport up with the image, but of course the aspect ratio of the image will not be maintained and the stretchiness can look horrible, particularly if the browser window is resized.

Time for some JavaScript, then. The first thing to do is to make sure the image has actually loaded before we try to resize it. I've decided on the following approach:

The key thing here is that we first set an onload event listener on bgimg (the image we're resizing) which will fire when the image has finished loading. However, it will only fire if the src attribute is set, so we do that in the following line (it doesn't matter that it's the same src, fortunately).

The last three lines fire resizeBg when the browser window is resized and cater for decent browsers and IE. Here is resizeBg:

The first two lines obtain the width and height of the viewport. There is a small caveat here: For document.documentElement.clientWidth to work (since IE does not support self.innerX), IE must not be in quirks mode, i.e. the page must have a valid doctype. Not much of a caveat, really, since your pages should have valid doctypes anyway.

Following that, we just employ some simple mathematics. The first if block will set any image to the same width as the viewport. It also works out the new height for the image so that the aspect ratio is preserved.

The next if-else block is important. If the first block's calculations means that the new image's height is smaller than the viewport, we need to make it a bit bigger. This means setting the width to bigger than the viewport, so to preserve the aspect ratio, we centre it by shifting it left by half the difference.

If the height of the new image is bigger, then we need to centre it vertically, which is what the else if bit does.

Now, as shown in Figure 3, we can get a nicely-fitting centred image as the background!

Figure 3

See the finished example page (which Figure 3 links to too) and the accompanying JavaScript file. The JavaScript file includes code to run the resizing function when the DOM has loaded, using Dean Edwards' script, so the init function will look a little different to the one on this page.

Before anyone says anything, yes, the script could be made truly nice and unobtrusive by creating the HTML elements for the background image with JavaScript as well, but that is not the focus of this post, so it can be left as an exercise for the reader!

Firefox already has more than 18 percent of the global market, according to Net Applications. With the release of Firefox 3, Mozilla could see a boost in downloads and market share. Microsoft's next version of Internet Explorer won't come to market until later this year.

Tomorrow, Mozilla will release Firefox 3. After more than 34 months of active development and the contributions of thousands of people, Firefox 3 will be downloadable free from the Mozilla Web site. Mozilla is promising this is the best browser -- period."

[ more here and here]

Automatic properties provide you with a shorthand for defining a new property. No more do we have to create the private property and then use Getters and Setters to access and set that property. Here's the old code:

Now here's the code using automatic properties:

Oh my! How nice is that? The C# compiler creates the Getters and Setters and the private fields for you automagically!

2. Initializers

We've talked about initializers before, but let's review anyway. You can use initializers to reduce the amount of work it takes to create a new instance of a class. Instead of this:

We can do this:

Short and sweet -- the way I like it.

3. Type Inference

This new feature takes a page out of JavaScript's book. When you take advantage of type inference, you allow the C# compiler to determine the type of variable at compile time. Here's an example of how you use type inference with C#:

Looks like JavaScript eh? Notice that we didn't declare a type? The C# compiler can infer the type of variable (it's a string) from the value you use to initialize the variable.

No performance impact results from using type inference. The compiler does all the work figuring out the data type at compile time.

Notice the use of the keyword var? You declare a variable of type var when you want the compiler to figure out the variable's data type all by itself.

Enjoy those three shorthand shortcuts and happy coding.

Sorry guys for the slow week, but I just had an addition to the family. My wife and I just had a baby boy! His name is Landon Sean Angeletti and he's fantastic. I'll be back in action next week. I'll cya then.

Mark