Margin 0 auto in Internet Explorer

I dont know how I missed this fix(!) of so common problem for these long days. Whenever I started some template related work i found IE the most irritating. What I am talking about is using Margin: 0 auto, mostly used to center a container ( DIV or table anything ). But before few days ago I believed that IE is not gonna support this easy way and i must have to write some additional IE fixing in my css files. However now i got to know that the DOCTYPE type declaration is the thing I was using incorrectly. As soon as I fixed my DOCTYPE declarations the IE started working perfectly. However in a nutshell it is really a better practice to use proper DOCTYPE in your web applications. Please refer to the wiki for detail understanding of using DOCTYPE. Here I am giving a code snap. Just run it in your IE with and without the DOCTYPE declaration at top and watch out the differences.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
    <head>
    <style type="text/css">
    .container{
        margin: 0 auto;
        border: 1px solid blue;
        height: 200px;
        width: 200px;
    }
    </style>
    </head>
    <body>
        <div class="container">
            This is a long test to check the cenerification of a DOM container in IE
        </div>
    </body>
</html>

You know what!! after this I started liking IE a little bit ;-D

Comments

  1. UnknownOctober 08, 2009

    Yeah, good tip. I almost always discarded the importance of the DOCTYPE element. Good to know it makes IE behave in a better way.

    ReplyDelete

Post a Comment

Popular posts from this blog

Ajax form submission with tiny MCE editor

Hi, I was working with a Ajax form submission where the form contains a tinyMCE wrapped textarea. I was using prototype library for Ajax. Problem is when I called Form.serialize('form_id') , it couldn't retrieve the value of the textarea as it is wrapped by tinyMCE. At last I got a solution by just calling a tinyMCE method before the Ajax operation. Here is the stepwise detail: 1. My tiny MCE declaration was very simple like: <script type="text/javascript" language="Javascript"> tinyMCE.init({ theme:"simple", mode:"exact", elements:"desc" }); </script> 2. Following is my HTML form: <form onsubmit="return processForm()" name="submitForm" id="submitForm" method="post" action="request.php"> <label for="name">Name: </label><br /> <input type="text" name="name" i...
Read more

Samsung BADA, Starting with sample application

Image
Hurrayh!! You downloaded all the required stuffs right? ( Didnt get my point :( ? Please refer to the earlier post  ;) .  Hope you already installed the IDE with language packs. If so just run the IDE. Specify your BADA workspace where all your projects are supposed be resided. And continue... So! Now we are totally ready to go for the sample applications right? Its really easy and fun at the same time. Hope the BADA IDE is running behind your web browser. Now all you need to do is follow the steps given here to run some sample applications. Playing with these applications will make you familiar with this IDE, as well as give you a brief idea over the BADA SDK. Anyway, lets stop my tattling and start working. 1. Open the window of BADA SDK samples window. Go to “Window > Show view > Other”. This will show you a dialog like following. Select Bada SDK samples from this dialog. Click OK. The window of sample application list is opened. 2. Right click on any applica...
Read more

Bada tutorial: Application basics

Image
Now as we know how to create a project and already met the containers , we can start writing our application right away. And for this we will need to have a little concept about some basics of starting up an application. So today's post is on some elementary stuffs. May seem little bit boring but yet required!!  I will not repeat the words already said in bada API doc. I put the links of API doc with each description. Please read the doc and find some additional concerns in this post. First lets look at the following state diagram of an application.  Fig: Application life cycle. Collected from bada API doc. You probably already have seen this earlier. To start with an application we need to know exactly how to handle all the methods indicated in the diagram. Lets start with the first one... OnAppInitializing: At the time of launching your application the system will call OnAppInitializing method to initialize it. Take a look at the bada API doc for this...
Read more