Stylesheets - margin-left: auto; etc and MSIE 5.5

Author

margin-left: auto; etc and MSIE 5.5

Alex Bell

2003-12-18, 8:46 pm

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

Anne van Kesteren

2003-12-18, 8:46 pm

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/>

Alex Bell

2003-12-19, 9:45 pm

On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<mail@annevankesteren.nl> wrote:

quote:

>Alex Bell wrote:
>
>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

Anne van Kesteren

2003-12-19, 9:45 pm

Alex Bell wrote:

quote:

> On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
> <mail@annevankesteren.nl> wrote:
>
>
>
>
> 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/...t-is-just-a-div> )

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

Alex Bell

2003-12-19, 9:45 pm

On Fri, 19 Dec 2003 12:17:00 +0100, Anne van Kesteren
<mail@annevankesteren.nl> wrote:

quote:

>Alex Bell wrote:
>
>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/...t-is-just-a-div> )

Thanks again, Anne