nektros - Cynicism in a Hot Dish

Fixing your sidebar in Internet Explorer, Part 2

Posted 29 April 2008 in by Yvonne

In the last part of this bare-bones series, we’ll go through the following remaining steps in fixing your site in IE:

  1. Install Firefox web development extensions (optional)
  2. Modify your CSS settings: width
  3. Modify your CSS settings: margin and padding
  4. Read further on IE rendering problems

1. Install Firefox web development extensions (optional)

Firefox users using a public theme on their site who are not overly familiar with their theme’s structure are advised to install the following extensions to help pinpoint relevant elements in their design:

  • Firebug – ‘Enable’, then ‘Inspect’. Hover over a page of your site. A border outline will appear around each element you inspect.
  • Web Developer – ‘Web Developer’, then ‘CSS’, then ‘View Style Information’. Hover, and click on any element you wish to inspect.

If anything, at this point you’ve transitioned from ‘ooh, pretty page’ novice to designer neophyte in less than five minutes.

2. Modify your CSS settings: width

Imagine your content and sidebar (we’ll assume for the purposes of this tutorial that you have only one sidebar) as a one-metre wide box and a three-metre wide box fitted perfectly inside a four-metre wide crate. Naturally, increasing the width of either box without increasing the width of the crate will create problems.

Kindergarten maths can also contribute to a sidebar being pushed below your site’s content area in IE.

  1. If you don’t know the element name given to your content area or sidebar, use either Firebug or Web Developer and hover over each section of your theme. They are usually named ‘content’ or ‘primary’, and ‘sidebar’ or ‘secondary’.
  2. Open up the IE stylesheet you created in the first part of this series, and do a search for each element name.
  3. For each element name, take note of the width figure. For example: 
    #content { width: 500px; }
#sidebar { width: 200px; }
  4. Returning to Firebug/WD, hover over your page again until you’ve outlined the section containing both your content area and sidebar. It will usually be named ‘page’ or ‘container’, and is usually located just within your theme’s body tags. For example: 
    <body><page>…</page></body>
  5. Going back to your IE stylesheet, take note of the width figure for your page’s element name.
  6. Kindergarten maths time: calculate the total width of your content area and sidebar. Remember this total width along with your page width for the next step.

3. Modify your CSS settings: margin and padding

#page { margin: 20px 10px 20px 15px;
padding: 10px 7px 11px 5px; }

For complete CSS newcomers, you only need to comprehend three things about margin and padding:

  • The margin setting controls the spacing outside of an element.
  • The padding setting controls the spacing inside of an element.
  • Remember this order: top, right, bottom, left. For example, in the above CSS code snippet, the page section has 20px of space outside and 10px of space inside its top border, 10px of space outside and 7px of space inside its right border, and so on.

Kindergarten maths obviouses the fact that margin and padding settings combined with width settings affect how your sidebar sits around your content area in IE. If these settings aren’t in harmony the way IE prefers, the sidebar will be thrown astray.

Two common IE bugs which may alter your design in this way and which you should read up on include the:

In many cases, however, attempting to squash a possible IE bug in your design will not solve your sidebar nightmare.

Your best bet in this case – especially if you’re just starting out with CSS – is to experiment in your IE stylesheet with increasing and decreasing the width, margin and padding settings of your page, content and sidebar sections.

This edit-refresh-edit-refresh technique will mean a lot of lost time in aligning your sidebar with your content area again. But in the end, your site will be better rendered in IE for it, and you’ll truly have entered the world of IE-hating web developers (hint: it’s not the most exclusive club out there).

4. Read further on common IE rendering problems

For more information on how to clean up your sidebar’s positioning along with other site design elements in IE, look no further than:

Questions? Feel free to leave a comment, or contact me by email.

(Go back to Part 1 of this series)

Comments

  1. kristarella
    16.05.08 #

    I kept hearing about Firebug for a while… I finally decided to install it, but it wasn’t immediately obvious to me how to use it. A few months later, my husband did a few clicks and voila… a freakin’ awesome addon!

  2. Yvonne
    16.05.08 #

    Damn straight :)

Leave a comment

Comment form




(Textile Help)

-------