Centering Problem

The first ever that I found important to be discussed is this problem. Whenever you want to construct a fixed page website, you would like to position it in the centre. The best way that one chooses would be to use margin: auto. This has a problem with IE. Um. Basically it doesn't work. The solution is to use in the following method.

    .parentContainer {
      margin: auto;
      text-align: center;
    }
    .child {
      text-align: left;
    }

Now this will work and be careful with the alignment of the children. To be noted that the this is not disturbed in other browsers. The only problem is that you have to manually specify to all the children of the "parentContainer"class. To do make this a little more effective just add class "child" to all the children.

    <div class="parentContainer">
      <div id="innerContainer" class="foo child">
        <!--HTML-->
        <div id="menu" class="child">
        </div>
      </div>
      <div class="bar child">
      </div>
    </div>

Another way to dynamically add class would be to use JavaScript. In JavaScript you have to write much code for this simple Solution. So if you use jQuery in your program, this can be effected by using $(".parentContainer").find("div").addClass("child"); This conflicts when you want center aligned text in some div OR this doesn’t work when JavaScript is disabled.

Include ie.css if browser == InternetExplorer

I’m pretty sure that every web designer would have found himself stuck with one ore more of IE’s annoying bugs and usually ended up using some CSS hacks to isolate the problem. But these CSS hacks should not be used in general, because, we don’t know what adverse effects these would bring in the future updates of browsers. Fortunately, Microsoft provides a neat solution to this problem by using conditional comments. I would give an example, and it is self-explanatory about what conditional comments are. These statements are much more future-proof than hacks can ever be.

    <!-- [if IE 6] -->
        <link href="./ie.css"/>
    <!-- [endif] -->

... and on and on. I’m sure you would have figured out how it works. Still if you want to know further you can get it from MSDN pages.

Reset Styling

Every designer writes CSS code expecting the browser would respond properly with all the elements positioned according to his script, and all with proper styling that he defines. This fails somewhere when HTML interrupts by providing its own styling to a particular element. We, coders of CSS would not want that part. So it is recommended that you clear the styling provided by HTML to all the possible elements that can appear in our web page. Yahoo does it in a way by calling "reset.css" first and then the other styling after that.

I’ll discuss more about tweaks for IE in next coming posts. To know much about how IE supports CSS, visit Compatible features that IE has its support for CSS.