Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Div not centering and loses pad at the top in IE (Compatibility Mode)

Posted on 2012-03-20
3
Medium Priority
?
218 Views
Last Modified: 2012-03-27
I have a table row that is not centering completely and it loses padding at the top in IE (Compatibility mode)?

Here is the code.


#gaugetitle
{
      font-family:Arial, Helvetica, sans-serif;
      margin-left:auto;
      margin-right:auto;
      width:50%;
}

The HTML.

<div id="gaugetitle"><h3>Lab Balance Score Card Metrics</h3></div>

The div is sitting between two tables.

Thanks,

Dave
0
Comment
Question by:hrhs
3 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 200 total points
ID: 37745542
Earlier versions of IE do not apply auto margins properly. It is necessary to assign text-align: center to the parent element in order for the div to center. Be sure to assign text-align left to the centered div in order to override the parent div setting. Example:
<div style="text-align: center; width: 300px; border: solid 1px #000;">
	<div style="text-align: left; width: 150px; margin: 12px auto; border: solid 1px #000;">This div is centered in it's parent div with left-aligned child text.</div>
</div>

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 37746534
If xmediaman's suggestion doesn't do the trick, please post your full, browser parsed code or a link (preferred). Your snippet doesn't provide the whole picture.
0
 

Author Closing Comment

by:hrhs
ID: 37772739
Thanks...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question