margin-left: auto; etc and MSIE 5.5

#1

I am developing at
http://www.members.iinet.net.au/~abell1/test/index.htm with city.css
at http://www.members.iinet.net.au/~abell1/test/city.css. Both
validate.

In index.htm there is a block of text that I want to be centered and
left justified. I have used this technique
<p class="indent">
11 Frederick Street<br />
Launceston<br />
Tasmania 7250<br />
6343 6676 6331 4900<br />
</p>

with the relevant css being
..indent {
width: 10.5em; /* Needs to be adjusted for content */
margin-left: auto;
margin-right: auto;
font-size: larger;
}

I've used a similar technique to centre the menu options in the
navigation div.

The technique works well in MSIE 6, Opera 7.23, Mozilla 1.3, and
Netscape 6.2. But in MSIE 5.5 it does not work at all; the block of
menu options is flush with the left edge of the viewport and the block
of text is flush with the left edge of the container div.

Am I doing something wrong? Or is this a known problem with MSIE 5.5?
I haven't seen any mention of this on the 'Position is Everything'
site.

If MSIE does not honour width:...; margin-left:auto; margin-right:
auto; how can I get the effect I want of having lines of text centered
in the content div and left justified? And having the menu options
centered in the navigation div? Of course I would want it to work in
as many other browsers as possible besides MSIE 5.5; but I've tried to
hide the CSS from earlier browsers.

Thanks in advance.

Regards, Alex

#2

Alex Bell wrote:

Quote:

The technique works well in MSIE 6, Opera 7.23, Mozilla 1.3, and
Netscape 6.2. But in MSIE 5.5 it does not work at all; the block of
menu options is flush with the left edge of the viewport and the block
of text is flush with the left edge of the container div.

parent-element{
text-align:center; /* IE HACK */
}
element{
margin:0 auto;
width:element-width;
text-align:left; /* end IE HACK */
}

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

#3

On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<mail (AT) annevankesteren (DOT) nl> wrote:

Quote:

Alex Bell wrote:
The technique works well in MSIE 6, Opera 7.23, Mozilla 1.3, and
Netscape 6.2. But in MSIE 5.5 it does not work at all; the block of
menu options is flush with the left edge of the viewport and the block
of text is flush with the left edge of the container div.

parent-element{
text-align:center; /* IE HACK */
}
element{
margin:0 auto;
width:element-width;
text-align:left; /* end IE HACK */
}

Thanks, Anne. I'm not sure I understand it, but I'll play with it
until I do.

Regards, Alex

#4

Alex Bell wrote:

Quote:

On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
mail (AT) annevankesteren (DOT) nl> wrote:

Alex Bell wrote:

The technique works well in MSIE 6, Opera 7.23, Mozilla 1.3, and
Netscape 6.2. But in MSIE 5.5 it does not work at all; the block of
menu options is flush with the left edge of the viewport and the block
of text is flush with the left edge of the container div.

parent-element{
text-align:center; /* IE HACK */
}
element{
margin:0 auto;
width:element-width;
text-align:left; /* end IE HACK */
}

Thanks, Anne. I'm not sure I understand it, but I'll play with it
until I do.

Maybe this structure will save you some time:

<parent-element>
<element>
Centered in most browsers, like IE5.0 and Mozilla1.6
</element>
</parent-element>

Of course you are using HTML and you choose other elements, probably
something like:

<body>
<div id="ie-hack">
centered content
</div>
</body>

You could also center the <body> itself, but that isn't supported in
IE5.x:
(<http://annevankesteren.nl/archives/2003/12/03/your-body-element-is-just-a-div>)

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

#5

On Fri, 19 Dec 2003 12:17:00 +0100, Anne van Kesteren
<mail (AT) annevankesteren (DOT) nl> wrote:

Quote:

Alex Bell wrote:
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
mail (AT) annevankesteren (DOT) nl> wrote:

Alex Bell wrote:

The technique works well in MSIE 6, Opera 7.23, Mozilla 1.3, and
Netscape 6.2. But in MSIE 5.5 it does not work at all; the block of
menu options is flush with the left edge of the viewport and the block
of text is flush with the left edge of the container div.

parent-element{
text-align:center; /* IE HACK */
}
element{
margin:0 auto;
width:element-width;
text-align:left; /* end IE HACK */
}

Thanks, Anne. I'm not sure I understand it, but I'll play with it
until I do.

Maybe this structure will save you some time:

parent-element
element
Centered in most browsers, like IE5.0 and Mozilla1.6
/element
/parent-element

Of course you are using HTML and you choose other elements, probably
something like:

body
div id="ie-hack"
centered content
/div
/body

You could also center the <body> itself, but that isn't supported in
IE5.x:
(<http://annevankesteren.nl/archives/2003/12/03/your-body-element-is-just-a-div>)

Thanks again, Anne

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

margin-left: auto; etc and MSIE 5.5

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

margin-left: auto; etc and MSIE 5.5 - 12-18-2003 , 03:57 AM

Re: margin-left: auto; etc and MSIE 5.5 - 12-18-2003 , 05:15 AM

Re: margin-left: auto; etc and MSIE 5.5 - 12-19-2003 , 04:47 AM

Re: margin-left: auto; etc and MSIE 5.5 - 12-19-2003 , 05:17 AM

Re: margin-left: auto; etc and MSIE 5.5 - 12-19-2003 , 04:53 PM