• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Centering w/o Absolute

May 25, 2011 by Webhead

Problem:

I needed to add some jquery popups to my code, but the popup appeared at the very top outside the viewing area.  The popup uses absolute positioning and so it is relative to the nearest element with a “position” attribute.  Since I centered my page with the following code, I didn’t have a nearest element with a “position” attribute so the popup was relative to the document.  And the document was just a sliver at the top because the elements within it were positioned absolutely…  here’s I mean:

The yellow highlight is the body tag.

Using Firebug, you can see, the yellow highlighted area is the width/height of my body element (it’s actually the margin and the width/height is zero).  So the popup appeared in that area instead of the entire page.

 

Solution:

The quick solution would be to change this  code:

#Table_01 {
    position:absolute;
    left:50%;
    top:0px;
    height:auto;
    margin-left:-500px;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

To the following code.  The following code doesn’t use absolute, instead it uses display: table and margin: 0px auto;

#Table_01 {
    display: table;
    margin: 0px auto;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

And of course, we need some special code for our special browser Internet Explorer:


        
body { text-align: center; }
body * { text-align: left; }
#Table_01 {
    zoom: 1;
	display: inline;
}

 

Table_01 is the first element inside of the Body tag.  For a full explanation head on to where i found the solution.  Also do not forget the Doc Type for IE to work propery.

 

Filed Under: Coding Tagged With: css, IE crap

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools