By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

old issue revisited: IE hack for block centering

P: n/a
I thought I had understood this issue and implemented a work around,
but now when I check on IE5, it is not working:

...
#IE-hack {
margin-left: auto;
margin-right: auto;
width: 20em;
text-align: center;
}
#inner-div { text-align: left; }
...
<body>
<div id="IE-hack">
<div id="inner-div">
<h1>TEST</h1>
<hr />
</div>
</div>
</body>

The inner-div ends up to the left.
--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Haines Brown <br****@teufel.hartford-hwp.com> wrote:
I thought I had understood this issue and implemented a work around,
but now when I check on IE5, it is not working:

...
#IE-hack {
margin-left: auto;
margin-right: auto;
width: 20em;
text-align: center;
}
#inner-div { text-align: left; }
...
<body>
<div id="IE-hack">
<div id="inner-div">
<h1>TEST</h1>
<hr />
</div>
</div>
</body>

The inner-div ends up to the left.


The inner div has no width or margins set, so it takes the full width
of the outer div.

The outer div is on the left in IE5 as IE5 doesn't support centering
via margin: auto;

You've successfully centered the inner div inside the outer div via
the text-align bug; but that makes no difference as the inner div
takes the full width of the outer div.

The correct CSS would be:

#IE-hack {
text-align: center;
}
#inner-div {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 20em;
}

cheers,
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Steve Pugh <st***@pugh.net> writes:
Haines Brown <br****@teufel.hartford-hwp.com> wrote:
I thought I had understood this issue and implemented a work around,
but now when I check on IE5, it is not working:
The correct CSS would be:

#IE-hack {
text-align: center;
}
#inner-div {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 20em;
}


Thanks, Steve, but I'm now stuck because the floppy drive on my
windows laptop just gave out. While I'm fixing that, allow me to add
to my question. Here's what I've got that works under Linux, but note
how I'm using the body element. Is it legit to do this?

<style type="text/css">
<!--
body {
width: 40em;
text-align: center;
border-bottom: solid;
border-color: #CC0000;
border-width: 4px;

}
#IE-hack {
margin-left: auto;
margin-right: auto;
width: 30em;
text-align: left;
border-bottom: solid;
border-color: #00CC00;
border-width: 4px;
}
-->
</style>

</head>
<body>
<div id="IE-hack">
<h3>Should align left</h3>
</div>
</body>
</html>

Haines Brown

Jul 20 '05 #3

P: n/a
Haines Brown <br****@teufel.hartford-hwp.com> writes:
Steve Pugh <st***@pugh.net> writes:
Haines Brown <br****@teufel.hartford-hwp.com> wrote:
I thought I had understood this issue and implemented a work around,
but now when I check on IE5, it is not working:


I found that the apparent source of my difficulty was that I had
substituted the attribute max-width for width in the inner division
(IE-hack). I don't know why that would break the centering of IE-Hack,
but it apparently did. The following now seems to work:

<style type="text/css">
<!--
body {
text-align: center;
}
#IE-hack {
margin: auto;
width: 40em;
text-align: left;
}
-->
</style>

</head>
<body>
<div id="IE-hack">
<p>This text aligns left in a centered 40-em wide
division</p>
</div>
</body>
</html>
--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.