473,594 Members | 2,651 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 4597
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
5788
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
4890
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
2972
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
4043
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
2417
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
1985
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
2664
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
3906
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
11120
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
7941
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8246
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...
1
8000
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8231
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...
1
5738
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
5404
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
3854
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...
0
3895
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1205
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.