I just finished working on a project and while I was in the final testing phase, I realized that there were some check boxes in a form that were not displaying correctly in IE. I found a few answers on Google but, these did not fit to my CSS styling properties and I needed a quick fix without redoing a bunch of CSS.

So, I came up with a simple solution of adding a class to the check boxes.

Here is the my form. Just a list of the days of the week. I need them to display one below the other.

<form id=”stylized” name=”email_reminders” method=”post”>
<label for=”repeat_sunday”>Repeat:</label>
<input type=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

<label for=”repeat_monday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_monday” value=”2″ />Monday<br />

<label for=”repeat_tuesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_tuesday” value=”3″ />Tuesday<br />

<label for=”repeat_wednesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_wednesday” value=”4″ />Wednesday<br />

<label for=”repeat_thursday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_thursday” value=”5″ />Thursday<br />

<label for=”repeat_friday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_friday” value=”6″  />Friday<br />

<label for=”repeat_saturday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_saturday” value=”7″ />Saturday<br />



This was the orignal CSS styling for the form.

font-family:Arial, Helvetica, sans-serif;


#stylized label{

#stylized input{

The problem was caused by the addition of  float:left style to the input box. This made the check boxes display in all possible directions in IE. I could have got the result I needed by saying float:none for the input boxes. But, I  needed the float:left for all the other input fields to align properly. So, I added a class=”checkbox” on all the checkbox fields.

<input type=”checkbox” class=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

Then, I added a CSS style to the checkbox class like this:

#stylized input.checkbox{

This makes sure that while all the input boxes are floating to the left like I wanted, the check boxes are not floating but are displayed one below the other.

The other day, my husband and I had an argument over CSS and Table based layouts for web pages. His point was that tables are more easier to predict and give a structure to the website where as with CSS it is rather difficult to achieve this. I think it is true to some extent. I used to design websites with tables before I learnt CSS. Now, I don’t think I would ever go back to table layouts entirely.  Here are some reasons why CSS based layouts are better.

File Size:

The file size with CSS based layouts is smaller which helps in faster loading of the site. Table based layouts have a lot more tags that result in a larger file size.  It has been found that CSS based layouts usually load 2-4 times faster than table based layouts.  It also takes up less bandwidth. Some hosting providers charge based on the amount of bandwidth used. So, using CSS layouts helps lower those costs especially if it is a large site. Patrick Burt has some good suggestions to reduce file sizes with CSS.

Cheaper and faster redesign:

In CSS based design, the content of the website is separated from its visual appearance. External style sheets

contain all the styling information. Modifying the information here changes the properties across the entire website. So redesigns are faster and cheaper.

With table based design, the content and the visual appearances are mixed together. So, changing it takes a lot more effort and is error prone.


CSS based designs help with Search Engine Optimization. Since the file size is smaller, it is easier for search engines to crawl through the site. In a CSS based layout, the information is organized better than a table layout which also makes the spiders find the important content. More information regarding CSS and SEO can be found here.

Room for more creativity:

CSS makes it easy to code very complex designs. Achieving the same level of complexity with the tables requires a lot of nested tables which increase the file size. It also  has less room for improvement or any changes in the future. CSS based designs are fluid and have more room for creativity.

More accessibility:

Since the flow of information is better in CSS based designs, it is easier to make the pages accessible for the disabled by using screen readers and other devices.

Skill in Demand:

The reason I pushed myself to learn CSS is because, everybody  wants to hire a designer who can create table less layouts. That is pretty much the norm now. So, if learning CSS was going to get me more projects and clients, I thought why not?

CSS does have some drawbacks too . It has browser compatibility issues. Some styling properties need to be modified for the specific browser. Adding simple hacks in the style sheet  makes the pages cross browser compatible. There are number of CSS hacks available on the internet. You can see some of the simple CSS hacks I have collected from many forums and websites.

Even though I love using CSS, I still use tables for any data that needs to be presented in a tabular form. That’s all I use them for. Before learning CSS, I thought tables were the best and I was reluctant to learn the CSS styling properties. It took me time and a lot of effort (since I was doing it on my own) to learn CSS but it was definitely worth it.

Some interesting and useful information about CSS layouts and techniques:



When I am coding the web pages, I frequently run into problems with CSS rendering properly on Internet Explorer. So, the first place I go to for a solution is my best friend Google. Over the time, I have collected some CSS tips from the many forums and other websites and I save them for a quick reference. Here are some of them.

Margins in IE:

Margins are rendered differently in FF and IE – especially IE6. To correct the double margin showed by IE6 add the following:


Margins for <ul> Tags:

<ul> tags have some standard margins. It determines how far the element wants to be from the elements above and below it.
If, the <ul> tag is rendering extra space above or below it, then add this to the style sheet:

margin: 0em;

a:hover in IE:

I was surprised to learn that a:hover properties do not work properly in IE. When I was designing a menu for a client, I had a simple CSS for hovering over the links. This did not show up in IE. For the hover properties to work in IE add position:relative property.

#menu li a:hover{



position:relative; /* This was added for the hover to work in IE */


Writing IE Specific hacks:

This is one of my favorites. If you wish to write a property specific for IE, just add ‘//’ in front of the property.

#menu li a{



padding-left:10px; /*This will work for Firefox and other browsers*/

//padding-left:8px; /*This will work for IE*/.




The most important thing to remember for this hack to work is that you have to write the general rule first and then the hack for IE. The first rule is seen by FF and other browsers. The next property is ignored all browsers except IE.

Feel free to add to the list and come back for some more CSS tips or better yet subscribe to my feed.

Leave a Reply