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

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
hrhsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
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
 
s8webCommented:
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
 
hrhsAuthor Commented:
Thanks...
0
All Courses

From novice to tech pro — start learning today.