473,699 Members | 3,159 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 4607
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.annevankest eren.nl/>
Jul 20 '05 #2
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<ma**@annevanke steren.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**@annevanke steren.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.annevankest eren.nl/>
Jul 20 '05 #4
On Fri, 19 Dec 2003 12:17:00 +0100, Anne van Kesteren
<ma**@annevanke steren.nl> wrote:
Alex Bell wrote:
On Thu, 18 Dec 2003 12:15:22 +0100, Anne van Kesteren
<ma**@annevanke steren.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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
5793
by: Richard Barnet | last post by:
This site: http://www.westciv.com/style_master/academy/css_tutorial/properties/margin.html states that "An element does not inherit the margin property of the element which contains it." (under the "Is it inherited?" section). Is that true? I thought it was the opposite. If true, can it be forced using "margin:inherit"?
19
4897
by: Thomas Mlynarczyk | last post by:
Hello, The following gives different results in IE and "Non-IE" browsers: <div style="background-color: green; width: 200px"> <div style="margin-top: 20px; background-color: red"> Hello </div> </div>
3
2973
by: Blacksmith | last post by:
Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but am having problems in certain browsers. Basically, I want a horizontally centred box with a fixed width of 750px, with a 100px high header, a 50px high footer, and a contents box that grows to fit the contents. I also want a margin at the top and bottom of the centred box of a fixed height (30px). I have the following HTML file which gives the desired results in...
1
4051
by: Marek Mänd | last post by:
I have question regarding (clearing) floats and margin-top on DL and HR elements. http://www.hot.ee/idaliiga/testcases/dl/language-chosing-selector.htm Namely the IE6 doesnt calculate the margin-top on the DL (definition list) element correctly. It starts to add topmargin at current fontsizes and layout when i tell him to have 38px topmargin. Can this be fixed somehow to normal?
2
2419
by: Stanimir Stamenkov | last post by:
I'm trying to clear some sizing issues relative to the initial containing block and the root document element. The sample document I'm trying with: http://stanio.info/viewport_fill.html Basically, for some tests I want to specify the height of an example DIV element inside the BODY using percentages of the viewport height. For this to work the BODY container should fill the viewport height where I'm using:
13
1991
by: Cool Guy | last post by:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> </head> <body> <div style="height: 100px; width: 100px; background-color: red;"> <div style="height: 50px; margin-top: 50px;
6
2344
by: boclair | last post by:
I have been approached over a page that has a horizontal menubar displaying over a banner. The problem advised that the menubar is not displayed and the banner moves up to the position the menubar would otherwise occupy. I don't see this in my version of Foxfire but I do see it in my Opera browser. A reduced demo is at http://www.boclair.com/margin-test/ I would think this is a collapsing margin problem. Declaring a nominal height...
1
2670
by: Edward | last post by:
I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three right-boxes in Internet Explorer? 2. How can I put a 4px margin BETWEEN the right-boxes, "border-top: 4px" didn't do it and if I put in a "margin-top: 4px;" it shows the red underneath instead of the brown background graphic.
3
3912
by: xen | last post by:
Hey there, In my html file I use a <div class="quote">. In my css file I define .quote I need to specify the margins for <pinside the <div> Today I learned that I can do this using ..quote p { margin-top: 5px; margin-bottom: 5px;
2
11151
by: Steve Richter | last post by:
I want my panel to have an inner margin. Problem is label text does not appear to recognize the margin. In this example, the TextBox aligns on the margin, the label does not: <asp:Panel id="Panel1" runat="server" BackColor="gainsboro" Scrollbars=Both Style="margin:25px;" Height="200px" Width="300px">
0
8633
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9199
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8902
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7787
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6552
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5891
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4392
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2366
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2016
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.