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, A new era of Samsung smart phones begins

Image
Yes! Samsung presenting a new mobile OS for the smart phones. This is BADA. You can take a look at the press release of BADA . This one is developed on top of the Samsung's legacy operating systems, but with a target for providing high end smart phone features. Besides, this is open for developers in the whole world. Just register in developer.bada.com and get joined with BADA community. Develop your smart application for your Samsung Smart phones and let others have fun with the excellent BADA applications. As I am developing BADA applications, I will try to keep a focus on BADA app development in my following series of blogs. Today here is a very basic introduction with BADA. So lets start... Start with the community: Here is the BADA developer website (  http://developer.bada.com ). Register there and get connected with lots of resources on BADA and also find very active BADA forums to share your learnings, problems, suggestions and recommendations. Find the forums here
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 application ( Sa
Read more