468,140 Members | 1,449 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,140 developers. It's quick & easy.

margin-left: auto; etc and MSIE 5.5

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
Jul 20 '05 #1
4 4391
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 */
}
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<ma**@annevankesteren.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.

Regards, Alex
Jul 20 '05 #3
Alex Bell wrote:
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<ma**@annevankesteren.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/>
Jul 20 '05 #4
On Fri, 19 Dec 2003 12:17:00 +0100, Anne van Kesteren
<ma**@annevankesteren.nl> wrote:
Alex Bell wrote:
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<ma**@annevankesteren.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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Richard Barnet | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
3 posts views Thread by Blacksmith | last post: by
1 post views Thread by Marek Mänd | last post: by
13 posts views Thread by Cool Guy | last post: by
3 posts views Thread by xen | last post: by
2 posts views Thread by Steve Richter | last post: by
27 posts views Thread by didacticone | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.