CSS: Horizontal Centering Jumps in Firefox

This is one of those situation i think most developers find themselves running into somewhere down the line. You’ve created you CSS template using margin:0 auto and everything looks great in the different versions of IE, Firefox, Oprea, Safari etc but for some reason your centering starts to jump all over the place when you click between various pages in Firefox. What’s going on here then?…

The answer is quite simply, some browsers like Firefox don’t display vertical scroll bars unless required and as a result your template’s centering begins to jump around (16px to be exact) when you navigate between a page that has a height that requires scrollbars and one that doesn’t. Its obvious now, i hear you cry! Don’t worry, i did the same… Doh!

The Solution to Firefox Centering Issue

Don’t worry there’s a simple solution to this centering and as usual, CSS comes to the rescue. The solution is to force vertical scrollbars.

There’s actually a few different ways to fix this scrollbar issue but here’s my favourite:

html {
	overflow-y: scroll;

Last time i checked this centering fix worked in Firefox, Safari, IE6 and Opera.

Related Tutorials:

How to display .htaccess in CuteFTP

How to view htaccess in CuteFTP?
How to view .htaccess in CuteFTP?

This tutorial provides a step by step guide on how set-up CuteFTP to display your .htaccess file.

By default CuteFTP’s filtering system can hide the htaccess so it doesn\’t appear within the list of files on your server. I have know idea why this is exactly but I’m guessing CuteFTP is just trying to protect the configuration file from accidental mishaps.

You have two ways to enable the viewing of htaccess in CuteFTP:

Method One: Apply ‘On-The-Fly’ Server Side Filtering

  1. Right click in root folder:
  2. Select Filter
    CuteFTP Filter Option
  3. Enable server side filtering:CuteFTP: enable server side filtering
  4. Type the following filter command:-L-a
  5. Apply, then .htaccess should appear:
    htacess showing in list of files in CuteFTP

Method Two: Setup Site Manager

  1. Right click the site in site manager:
  2. Select Properties
  3. Select Actions tab
  4. Click Filter button:
  5. Type the following filter command:-L-a
  6. Save, then .htaccess should appear from then on:

Things to Consider

As always, be careful when your messing around with stuff like this, the htaccess file is an important configuration file which if modified incorrectly or deleted can completely kill the site. If your not sure what your doing, leave it alone.

Please note, not all hosts allow for users to configure through their site’s through htaccess. If you upload your htaccess file and it doesn’t do anything this is more than likely the problem, contact your hosts for further advice.

Another thing, htaccess is an Apache configuration file and therefore will not work in IIS. You’ll need something like ISAPI rewrite for IIS.

CSS: Learning The Basics

CSS: Learning The Basics
CSS: Learning The Basics

This tutroial is a guide to CSS basics. What are Stylesheets? What are they used for? How do i use them?

What is CSS?

CSS stands for ‘Cascading Style Sheets’. The stylesheet language is used to define the presentation of an HTML document and its associated markup.

Put simply, CSS is there to tell your web browser what your web page should look like. For example, using CSS you can state that your body text is to be pink and your background white, your links green and your font 100px in size – if you’d ever want to do that!…

Here’s a quick example of what the CSS language looks like:

 font-size: 20px;

In this example we are defining the p (paragraph) tag and stating that all p tags are to be red in color (hexadecimal value #ff0000) and to have a font-size of 20 pixels. In the browser this would look something like:

This is a paragraph of text that has been set to have a font size of 20px and be red in colour.


Basic Markup of CSS

Here is a breakdown of what makes up a basic style definition:

 property: value;

Element – the name of the tag, class or id you are defining. (see: using class and ID in CSS)

Property –  the attribute of that element. e.g. The amount of padding, colour, margin, border, font-size, background etc

Value – the appropriate value to be assigned to the property in question. This could be in px, %, a hexadecimal colour value or a border type depending on the property you are defining.


Inline Styles

If you were to look at the source (HTML Code) for the red text example above you’d notice that I’ve used an Inline Style Definition. An inline style definition is a style that is defined within the HTML tag itself, as seen below:

 <p style="color:#f00; font-size: 20px;">This is a paragraph of text that
    has been set to have a font size of 20px and be red in colour.</p>


Using an External CSS File

Now the previous example is all fine and dandy and may get you the result you want, however, to make the most out of CSS it make sense to use an External Stylesheet instead of defining everything inline (see: Why should i use External Stylesheets?).

An external stylesheet is a file with a .css extention (e.g. myStyle.css) which you can upload on to your server. This file can be used to hold all the stylesheet information for your website and be referenced on pages using a LINK tag in the documents HEAD tag:


 <link href="styles/myStyle.css" rel="stylesheet" type="text/css" />

Please note, in the href above i have stated that the file myStyle.css is located in a folder ‘styles’. This is not essential, a stylesheet can be placed on any part of a websites directory structure. For the purpose of keeping everything neat and tidy i prefer to have a dedicated folder for my stylesheets. A QUICK TIP – good housekeeping saves you a hell of a lot of time in the future, trust me!


The Style Tag

There is another way to include styles on your document. The style tag can be placed in the head tag of the page like so:

<style type="text/css">

This can be handy if you need to include a style for particular page. Avoid putting all style information in the head as this will increase page size and cause you a nightmare when you need to make sitewide ammendments! Use an external stylesheet and use the style tag for overides or quick fixes. You’ve been told! 🙂


Basic CSS examples

Here are some examples of what a site’s style sheet may look like, I’ve covered some basic tags and included comments to help guide you on the CSS basics.

/* This is how to make a comment in your CSS
   I've commented the styles to help you see
   the basics of what is being defined in the stylesheet */

/* The body tag is kind of like a parent tag which other tags
   within it inherit certain style information from e.g. the Font-Family */

 /* This defines the font to be used.
    note, the commas used here tell the browser to first try
    to use the 'verdana' font, if this is not available then try
    arial and failing that to use the next available san serif font.  */

 font-family: verdana, arial, san serif; 

 /* Font-size is set to 12 pixels. */
 font-size: 12px;

 /* sets background to black (hexadecimal value: #000000).
    note, you can also use 'Black' and other common colour names.


 /* set text colour to white (hexadecimal value: #ffffff).

/* style the heading 1 / h1 tag */

/* style anchor tags so links are NOT underlined. */


I hoped that helped cover the basics of CSS. If it didn’t, the basics are: learn to used CSS as it’ll help you produce cleaner and more maintainable web pages making them more lightweight and easier to manage.

I’ll be writing a more advanced CSS tutorial soon which will aim to cover a little more than the basics. Come back soon and check it out!.

Tutorial Name: CSS Basics

By: Tom Jepson

Why should I use an External Stylesheet?

why use external stylesheets?
why use external stylesheets?

In this tutorial I want to look at some of the reasons why you should use External Stylesheets and not inline or style tag based definitions.

The tutorial is intended for those learning the basics of CSS and looking for ideas on good practices.

Cascading Style Sheets

Cascading Style Sheets are quite simply a gem in the crown of web development. However, in order to get the most out of them they need to be used porperly. Up until more recently source code and general mark up of an HTML document seemed the last thing on some web developers minds. It seemed all they were interested in was that it looked good in the bowser and not under the hood. As a result website were bloated and full of markup that didn’t correctly define its content.

Luckily we seem to have turned a corner now and most people are stepping up to the mark and looking for ways to improve the markup of their sites and its content. One of the most obivous ways people are doing this is by combining HTML/XHTML and CSS and using them in the manner they were intended.

Whereas HTML defines the relationship of a pages’ content, CSS defines its presentation. Keeping one separate to the other keeps code cleaner, more lightweight and easier to maintain in the future. The following sections look into the three main ways of referencing your pages style and reasons for and against there use.


Using External Stylesheets

External stylesheets allow you to completely separate your CSS from your HTML. Here the style is included in one or more css files and reference from your HTML using the LINK tag:

 <link rel="stylesheet" href="/styles/black.css" type="text/css" media="screen" />

Link Tag Stylesheet Attributes

The link tag has the following attributes:

  • rel – the relationship of the link to the document
  • href – in this case the location of the stylesheet to be included
  • type – the type of file it is (in our case text/css)
  • media – for what media the stylesheet is to be included
    • screen – normal computer browser – on screen
    • print – on paper (printer friendly)
    • aural – for speech synthesizers
    • embossed – intended for Braille printers
    • all – intended for all types of media

The benefits of using an external style sheet are:

  • everything is stored within a single file.
  • once changed/updated, the changes are reflected on all other pages that reference the stylesheet.
  • this makes it easier to maintain larger websites.
  • pages load quicker once the main CSS file has been cached.
  • as a result bandwidth goes down.
  • effectively, you’re able to change the entire look and feel of a website through a single file.


Using Inline Styles

My advice would be avoid using inline style definitions  – they bloat out your code and are a nightmare to update if you have a lot of them.

However, there times when its easier to use inline CSS styles:

  • When you need a quick and instance change
  • To override the main stylesheet
  • When you don’t have access to the main stylesheet e.g. using a CMS (Content Management System)


Using the STYLE tag

The style tag is placed within a page’s head tag and is intended to only modify the style of the page that includes it. It looks a little smething like this:

<style media="screen" type="text/css">
 body{     font-size:20px; }

This is probably the mid point between the external and the inline styles. Like the inline definitions the style tag is good when you need to make changes to a single document but my advice is only use it when you need to. If you have access to the external stylesheet and if other pages are also going to make use of the same style – UPDATE THE EXTERNAL.

Another good time to use this is when you only have to create one standalone page. There’s no use in creating a new file just for the one file so the STYLE tage is ideal.

Hope that helps folks. Please feel free to send any comments or feedback. I never get any so please do as it’ll be really helpful! 🙂

Tutorial Name: Why should I use an External Stylesheet?

By: Tom Jepson