Categories
CSS-Tutorial

Vertical Centering Problem found in IE9 for side by side two DIVs

Vertical Centering Problem found in IE9 for side by side two DIVs. When two DIV elements placed side by side.

Vertical Centering Problem found in IE9 when two DIV elements placed side by side. A tutorial by Bikram Choudhury, Web Design Tutor, Kolkata.

Only the following problem exists in Internet Explorer 9 (may be IE10), not in any other browser. So I suggest you to visit this page using Internet Explorer 9. You can try other versions also.

I think you should know about the problem I have faced in my website, when I have tried to implement this vertical centering method (Table Cell Method) for side by side two DIVs.

Erroneous Code : I have seen that it works perfectly in Firefox, Chrome, Safari, Opera etc but get scrambled in Internet Explorer 9.0. Visit this webpage using different browsers including IE9, may be IE10 but I did not test it yet.

You will check that nothing wrong in any browser except IE9, in IE9 side by side DIV comes one under another. Visit the source code here and find out the problem yourself

Click here if you want to view how the actual page should look like in Internet Explorer 9 (may be IE10).

How I solved the problem : The Table-Cell method is simple and I thought it will work seamlessly in my webpage and implemented it. But when I saw the problem I thought- may be my webpage’s existing styles causing the problem. So I deleted all external stylesheet references and JavaScript. But saw the problem persisted.

Then I created a new HTML file and put the DIVs in the new file using Dreamweaver CS5 and copy pasted the only necessary stylesheet portions in new file. I saw it worked and IE9 shows it perfectly like Firefox.

Then it became more problematic for me to find out why my old original file was not working in IE9. I was also puzzled

I follow a silly method when some trifle coding problem exists which is so silly that I cannot find out the exact point of error and it seems all codes are correct, then I just drop the coding for the day, take a sleep and again starts debugging next day. And I easily get the point of error next day which was invisible to me yesterday. This method works for me most of the time.

Today I also discovered the error and found old DOCTYPE was faulty and I have used wrong DOCTYPE in the pages and Firefox, Chrome, Safari, Opera all ignored this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Then I changed the doctype to

<!DOCTYPE HTML>

and all worked perfect even in Internet Explorer 9 and problem solved.

Again I have created a new HTML file using dreamweaver CS5 and the automatically generetated doctype is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This DOCTYPE also worked.

I have copy pasted the code below- try to find out the error yourself if you can –


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>rankingoogle.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div#main_content_home {
                        width:1000px;
                        margin: 0 auto;
                        clear:both;
}
div.box {
                        width:100%;
                        clear:both;
}

.rel { position:relative; }
.abs { position:absolute; }
.left { float:left; }
.right{ float: right;}

.tab { display:table; }
.table-cell {
                        display: table-cell;
                        border-right: 1px solid black;
                        vertical-align: middle;
                        background-color: #CCC;
}

.divcenter {
                        margin:0 auto;
                        padding: 1em;
                        background-color:#3C6;
                        overflow:hidden;
}

.all-border { border:1px solid black; }
.border-bottom { border-bottom:1px solid black; }

</style>
</head>
<body>

<div id="main_content_home" class="home_page_large_txt">

<!– Wrapper box starts –>
<div class="box tab border-bottom">
               <div class="table-cell" style="">
                        <img src="images/seo-images/on-page-seo/on-page-seo-pic1.png" width="300" height="300" alt="On Page SEO Deals with page content">
               </div><!– table-cell ends –>

               <div class="table-cell">
                              <div class="divcenter all-border" style="width:70%">
                                             <h1 class="home_h1">On Page SEO : Optimize your webpages</h1>
                                             <h3>Analysis of your website pages targeting Google Yahoo top placement</h3>
                              </div>
               </div><!– table-cell ends –>
</div> <!– Wrapper box ends–>

<!– Wrapper box starts –>
<div class="tab box border-bottom">
               <div class="table-cell" style="width:40%">
                              <div class="divcenter" style="width:70%;">
                                             <p>Check whether your website is SEO friendly or not.</p>
                              </div>
               </div>

               <div class="table-cell" style="width:40%">
                              <div style="width:80%">
                                             <span>Use keywords naturally</span>
                              </div>
               </div>

               <div class="table-cell" style="width:auto">
                              <div style="width:80%">
                                             <span>This is a webpage of <a href="http://www.rankingoogle.com">rankingoogle.com</a></span>
                              </div>
               </div>
</div><!– Wrapper box ends–>

</div> <!– main_content_home Div ends –>

<div id="footer">
Copyright ©2014 <a href="http://www.rankingoogle.com" title="RiG SEO Service">RiG SEO &amp; PPC Company, RankInGoogle.com</a></p>
</div>
</body>
</html>

Conclusion : Wrong DOCTYPE can ruin your effort, for some unknown reason I have used a wrong doctype and only for this reason IE9 was not showing it.