Decent browsers (Firefox, Opera, Safari etc) hide the scrollbar until it is needed which nicely provides a little extra space to play with, but if the next page on the website is quite long and requires a scrollbar or if you use css/javascript to show/hide content the page appears to jump when the srollbar is displayed.

This looks tacky.

I am not a big fan of tacky so looked into a solution to stop this from happening, I envisaged some nasty javascript hack but luckily css has a nifty little answer to the problem.

html {
            overflow-y: scroll;
}

That tiny piece of css forces a vertical scrollbar on your browser. Unfortunately Opera doesn`t support this but there is an Mozilla alternative

overflow: -moz-scrollbars-vertical

Job done, scrollbars on the page even if the content on the page doesn`t need them. No more nasty jumping around on the page.

Here’s what I mean

Thisis a div which consists of a background image for the blue background, a paragraph for the text and an image of a heart to finish. Ideally I do not want the extra few pixels at the bottom showing my backgroudn through.

<div class=’testimonial’>
<p>“Thank you so much for your help. I met Bob through the site after less than a month, and we are still together and happy all these months on. Thanks Motorway dating ”
<br /><br />
<strong>Katie x</strong>
</p>
<img alt=’Motorway dating testimonial’ src=’images/testimonial_bottom.gif’ width=’178′ height=’76′ />
</div>

You would think that adding margin: 0px; padding: 0px will sort the problem but nope, nadda.

I tried googling but couldn`t find anything on the subject apart from suggestions of zero margins and paddings despite many people coming across this very annoying problem.

So I put the good old thinking cap on and remembered this nifty little piece of css

vertical-align: text-bottom;

Hurray! Place this onto your image css

.testimonial img {vertical-align: text-bottom;}

and voila, no extra space beneath your image. Just to prove it here is what my testimonial looks like now

Hope this helps.

The last time I put transparency onto a website was back in the days when css was rarely used and was in it’s infancy. I remember utilisng a backgroudn image in the transparent area to mimic the idea of opacity, a good workaround that worked a treat. But what happens when the user expands the text size and the containing div is expanded, all goes to cock!

So, I am a few years older, a few more grey hairs on my head (still not receeding though, phew) and css has come on a long way, so have web browses I hope!

At time of writing this post, website opacity is not a w3c recommendation although it has been adopted by the major web browsers.

Mozilla and Firefox have supported css3 opacity since 2004 but our old nemesis IE had not, that is until the recent release of IE 7 .

So lets do it in our website;

• the css3 standard for setting transparency is opacity: 0.5
• Mozilla uses -moz-opacity:0.5
• IE uses their own messed up method of filter:alpha(opacity=50)

Working example

As ever we need to ensure our website is developed for all web browsers, so in our css lets style for all three variations

opacity: 0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);


This sets 50% transparency, just change the values, a lower values makes the layer more transparent. Oh and remember to set a background colour background-color: #ffffff or something to get the true effect of the transparency.

I trawled the Firefox website and Googled galore for an answer to this but found bob all, so this afternoon fed up of having to manually goto google.co.uk for my searches, I thought I would have a dig around.

I found the solution!

Ok, if anyone else has this problem (probably not seeing as there is nothing on the web about it at the moment!), just follow these steps to enlightenment;

1. Browse to C:\program files\mozilla firefox\searchplugins
2. Open “google.xml” in a text editor such as notepad or wordpad
3. Look for any references of http://www.google.com/
4. Change/edit the “www.google.com” to your locale which for me is “www.google.co.uk”
5. Save it and close
6. Restart Firefox and test the search bar

Your result should now be from google.co.uk. By the time you read this the bug may have been fixed in the next update but hey, I tried )

So what was wrong with pixel text sizing?

Nothing in theory, most web broswers are capable of scaling the text up and down depending on the local browser/operating system settings. Great, lets develop websites towards those – wrong! The most popular (well, most commonly used) web browser our old friend Internet Explorer cannot scale pixel text size. So what do we have available?

Ems text sizing

Ems was frowned upon back in the day, it had the reputation of being unreliable and a general pain in the ass to use. But on closer inspection it is just as easy as pixels but gives you increased flexibility, lets look at it…

Most modern browsers default text size is 16px, a little eager on the text sizing methinks. So by default, 1em = 16px. We liked pixel text sizing because it was easy to use, 10px, 12px, 14px etc etc. So lets adapt the browsers default text size in one line of code to make ems text sizing more familiar.

By using the body tag to resize the default text size of 16px, we can then use ems in a much simpler and easier way. lets look at the code first;

BODY {font-size:62.5%}

So why did we do this? We want to use a base pixel size of 10px for it’s simplicity, 10px is 62.5% of 16px, hence the line of code above. Now we have set the em text size 1em = 10px for all child elements i.e. everything. You want a paragraph to be 12px, simple we now use 1.2em. A header should be 16px, you get it, we now use 1.6em. Last example, your footer text needs to be 8px, we use 0.8em.

There must be a catch?

Well actually yes there is, although some would argue that this is a great feature os em text sizing. Em text sizing takes it’s size from it’s parent element (which is why we placed the 62.% text size declaration within the body css). Lets say we have a content area within our website and we set the text height of this content area to be 1.2em (12px).

#CONTENT {font-size: 1.2em}

Within this content are we now have a list menu that we want to be slightly larger than the main body text. As the li element will be a child of the #CONTENT div with a text size of 1.2em, we are now working on the basis that 1.0em is now 12px, not the 10px we set via the body tag. So to make the li text size 14px we use 1.2em again.

#CONTENT LI {font-size: 1.2em}

Similarly, if we wanted the list text to be back down to 10px, we need to use some maths. 1.0em will set the text size as 12px because the parent div sets the text size as 12px using it;s own declaration of 1.2em. To get the size back down to 10px we need to use

10 / 12 = 0.8333

So our css looks like this

#CONTENT LI {font-size: 0.83em}

One more tiny problem, again it is down to the fact that em text sizing takes it’s value from it’s parent element. What happens if this list contains another child list? The text within it would be sized at 83.3% of the text above it and so forth for subsequent lists. This is easily corrected however using another simple css tag

LI LI {font-size:1em}

This will ensure that all child lists are the same size as the parent, you may want to use this technique for other tags within your website such as paragraphs should you nest other tags.

So to conclude

Yes on the surface em text sizing is a little extra work but the benefits by far outweigh the two seconds it will take to add the extra lines of css. Your text can be resized across all browsers and platforms which makes the visitors to your website happy. Give them a go, and why stop at text, size your layers using em, you will never look back to pixels again.

In the past week I have come across several websites that display fine in IE but fail in standard compliant web browsers such as Firefox or Opera. One of the main problems is the ‘null content bug’.

Many people use css in their websites to display an image as a background, leaving the div itself empty;

<div id=’advert’></div>

#advert {position: relative; float: right; width: 20em; background: url(background.gif) no-repeat top left;}

IE works fine with this, it will take the height of the image and set the height of the div to that of the image, however standard compliant web browsers look at the content within the div to ascertain the height. As in the example above the div is empty so collapses to 0 height. This means that the entire div including the background image is effectively invisible.

The solution

This is a simple one but one that catches many an experienced web developer out, add the height attribute to your css. Just by adding say height: 10em will give all web browsers a set height of the div and display correctly as you intended.

The morale

Always check your website in as many web browsers as possible, al web developers should do this as standard course.

I am all for speeding up my development processes and today I found a nifty little tool in the Firefox Web Developer plugin. If you don`t klnow what this it, it is a toolbar that sits in Firefox allowing you to do wonderful things to websites, such as check validation, remove all images, highlight layers etc. The list goes on.

I have been using the plugin for several years now but only today did I notice the edit css function. Open up a website in Firefox, I have been playing with my localhost website setup. I now want to play with the css of the website and make some changes.

In the Web Developer Plugin toolbar, select the css tab then edit css. Beneath your website a window appears containing the website’s css file. You can make a change to this and see the change in realtime.

Right, I hear some people asking what is so hard in saving the css file, opening your browser and pressing refresh but my God, this feature of the Web Developer toolbar is genious! Over the course of a few hours, making small tweaks and checking the output on your website it saves time and you never leave your css file.

The only problem is, I have been playing around with this and ended up wasting a lot of time as I have been opening up some websites I developed previously and destrying the css. Call me a geek but that’s loads of fun!

Chris Pederick who created the Web Developer toolbar has a blog where he writes about new releases, view his blog here.

What a lot of hard work just to print a website! I can create a print this page script in one line of code, using my old favourite, css.

The layout of websites often aren`t print friendly, especially for older printers with set margins available to them. On the web we can use an abundance of images and colours which agai throw a printer into a panic.

So, up steps the web superhero, css. When a web browser views a page it looks for a stylesheet, something like this;

<link rel=’StyleSheet’ type=’text/css’ href=’/css/mystylesheet.css’ media=’screen’ />

The key part of this is the media=’screen’. As a browser looks at a stylesheet designed specifically for display on a monitor (screen) it also looks for one when you try to print. So when you press print, if the browser finds a stylesheet telling it how the page should print, it will use it. OK, less of the waffle, here’s how to tell a website browser how to print the page;

<link rel=’StyleSheet’ type=’text/css’ href=’/css/mystylesheet.css’ media=’print’ />

It is really as easy as that. All you have to do to create the most effective print this page script is to build another stylesheet specifically for printing.

So what are the common things to specify in a print stylesheet? You will want as much contract as possible so you may wish to set the page page background to white and the font colour to black.

body { background: #ffffff; color: #000000; }

Strip out navigation and only print content

#navigation { display: none; }

Or you may also wish to remove all images

img { display: none; }

You have all css commands at your disposal to tweak your website to print exactly how your users will want it. This is great for your users if they need to print your website and requires no complex javascript or extra maintenance.

Give it a go and have fun!

We know by now that IE has a problem displaying a fieldset background colour or image incorrectly. The colour is bled out and overspills into the legend tag. But we don`t want our websites to look scratty, so lets fix it.

You can use css here or continue for the image based mathod.

The image method is quite simple really. Typically IE renders the fieldset background 8 pixels above the top of the fieldset. We can set a background image or even a single colour background image with an 8px header built up of transparent pixels.

<a href=”http://img255.imageshack.us/my.php?image=fieldsetbackgroundwg8.gif” target=”_blank”><img src=”http://img255.imageshack.us/img255/2502/fieldsetbackgroundwg8.th.gif” border=”0″ alt=”Free Image Hosting at www.ImageShack.us” /></a>

See what I mean. Adding the 8px of transparent pixels still leaves us with the same problem of the background image overlapping the legend tag however now we just can`t see it.

Simple really )

The problem IE faces when rendering fieldset background is that it applies the fieldset background to the legend, as well as the fieldset itself.

The solution to this is to seperate the fieldset from the legend. Here’s how I do it, you may be able to figure out another method but this one works perfectly fine for me;

We disassociate the legend from the fieldset we need to absolutely position it, so lets apply position: absolute to the legend css. Rememebr though this absolute positioning needs to be relative to it’s parent element (the fieldset) to prevent it from being positioned at 0,0 (top left) of the page. To do this we relative position the fieldset using position: relative.

OK, so now we have the legend and fieldset as seperate. Try it out. You will notice that because we used absolute positioning the legend is at 0,0 to the fieldset, so lets make it look like a legend should do and move it over to the right and little and up a bit. You should now have something like this

fieldset {position: relative;}
legend {position: absolute; top: -5em; left: 5em;}

Adding a background color to the fieldset will now only fill in the fieldset and will display correctly in all web browsers! You might want to play around a little with margins and padding of the fieldset and legend to create your own unique layout.

Didn`t like the css method, try the image method instead