By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

body and viewport puzzler

P: n/a
I want a centered body, 680px wide, having a red bottom margin. The
following works well in galeon, but not in IE5, where the bottom
margin steals the full width of the viewpoint. That is, the red line
stretches from one side of the screen to the other and is not 680
pixels long. Why isn't the bottom margin 680 pixels?

body {
...
width: 680px;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
padding-bottom: 1em;
border-bottom: solid #C00 4px;
}
...
#IE-hack {
margin: auto;
width: 680px;
text-align: left;
}

...
<body>
<div id="IE-hack">
...
</div>
</body>
...

(I need the margin-left and margin-right set to auto for the body
element in order to get the IE-hack block to center.)

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a

"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
I want a centered body, 680px wide, having a red bottom margin. The following works well in galeon, but not in IE5, where the bottom margin steals the full width of the viewpoint. That is, the red line stretches from one side of the screen to the other and is not 680 pixels long. Why isn't the bottom margin 680 pixels?


Put a big-daddy div nested just inside the body with the style
you set for the body. All content goes within that div. That
should work.
Jul 20 '05 #2

P: n/a
"Neal" <ne**@spamrcn.com> writes:
"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
I want a centered body, 680px wide, having a red bottom margin.

The
following works well in galeon, but not in IE5, where the

bottom
margin steals the full width of the viewpoint. That is, the red

line
stretches from one side of the screen to the other and is not

680
pixels long. Why isn't the bottom margin 680 pixels?


Put a big-daddy div nested just inside the body with the style
you set for the body. All content goes within that div. That
should work.


Well, yes, I realize that creating a div just to hold the attributes
would probably work, but for a couple reasons, I had wanted to avoid
that. When I do try it, the inner block is not centered. Here's the
code:

body {
background: #CCC;
background-image: url(../bin/bk.png);
}
#outer-block {
text-align: center;
border-bottom: solid;
border-color: #CC0000;
border-width: 4px;
margin: auto;
width: 680px;
}
#IE-hack {
margin-left: auto;
margin-right: auto;
width: 680px;
text-align: left;
}
<body>
<div id="outer-block">
<div id="IE-hack">
<h1>Test</h1>
</div>
</div>
</body>

This markup does fine on galeon, and, as you suggest, it does limit
the red border to just the 680 pixels. However, this the IE-hack block
is not centered on IE5, but is aligned left. On galeon, it is aligned
center as it should be.

I don't understand why, but the outer-block requires the margin
attribute for the IE-hack block to center.

Am I to conclude that it is impossible to use the body element to hold
the attributes here assigned to the outer-block?

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

Jul 20 '05 #3

P: n/a
"Neal" <ne**@spamrcn.com> writes:
"Haines Brown" <br****@teufel.hartford-hwp.com> wrote in message
news:87************@teufel.hartford-hwp.com...
I want a centered body, 680px wide, having a red bottom margin.

The
following works well in galeon, but not in IE5, where the

bottom
margin steals the full width of the viewpoint. That is, the red

line
stretches from one side of the screen to the other and is not

680
pixels long. Why isn't the bottom margin 680 pixels?


Put a big-daddy div nested just inside the body with the style
you set for the body. All content goes within that div. That
should work.


I took your advice, which of course, got the border line to appear
properly. I suspect in the body element, it was treated like the
background image, which steals all the available space. I think my
border was stealing all the available width.

Howver, I can no longer center a block because of the IE5 problem. I
put the attitributes into an outer division, and now find that I can't
get the inner block centered in IE5, even though as best I can tell
I'm using the standard work-around. Why doesn't the following work?

body {
background: #CCC;
background-image: url(../bin/bk.png);
}
div.outside {
width: 680px;
text-align: center;
border-bottom: solid;
border-color: #CC0000;
border-width: 4px;

}
div.inside {
margin-left: auto;
margin-right: auto;
width: 680px;
text-align: left;
}

...

<body>
<div class="outside">
<div class="inside">
<h1>test</h1>
...

The "Test" header appears to left of the inner div as it should, but
the inner div itself to the left rather than centered. Works OK on my
galeon browser.

--
Haines Brown

Jul 20 '05 #4

P: n/a
Haines Brown <br****@teufel.hartford-hwp.com> wrote:
Howver, I can no longer center a block because of the IE5 problem. I
put the attitributes into an outer division, and now find that I can't
get the inner block centered in IE5, even though as best I can tell
I'm using the standard work-around. Why doesn't the following work?

div.outside {
width: 680px;
text-align: center;
}
div.inside {
margin-left: auto;
margin-right: auto;
width: 680px;
text-align: left;
}

...

<body>
<div class="outside">
<div class="inside">
<h1>test</h1>
...

The "Test" header appears to left of the inner div as it should, but
the inner div itself to the left rather than centered. Works OK on my
galeon browser.


The outer div has a width of 680px. The inner div has a width of
680px. Doesn't matter whether the inner div is centered within the
outer one or not. For any centering to be evident the parent must be
wider than the child.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5

P: n/a
Steve Pugh <st***@pugh.net> writes:
The outer div has a width of 680px. The inner div has a width of
680px. Doesn't matter whether the inner div is centered within the
outer one or not. For any centering to be evident the parent must be
wider than the child.


Yes, it works as you suggest. What got my off on a byway is my
ill-advised effort to reduce the three nested blocks (body, outside,
inside) to two (body, inside). That cause the border to mess up, for
apparently the body border steals all the available space. Then I
tried to set the width of body, but that didn't work. Looks like I'll
just have to resign myself to the triple nest.

Thanks for gently pointing out what should have been obvious to me.

--
Haines Brown

Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.