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 5  2475 
"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.
"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
"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
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/>
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tony Vasquez |
last post by:
Can someone tell me if there is a universal way to check the available
screen with and screen height for IE, Netscape, and Opera? Is there a
universal syntax? Thanks in advance.
Tony
|
by: Terry |
last post by:
I'm real new at this, so this may be a basic question, but I want to
get off on the right foot.
I thought it would be reasonable to use the following on a page:
body {
margin: 3em;...
|
by: Manatee |
last post by:
Hi group. I have an absolute-positioned sidebar that I want
to stretch the entire height of the page/body, which is
usually taller than the viewport.
As I understand it, the standard CSS for...
|
by: Joakim Braun |
last post by:
How do you give a <body> a 10px margin on every side, then a border? That
is, an inset border.
In the example below, the browsers I've tried interpret "width:100%" as 100%
of the width including...
|
by: Dan Novak |
last post by:
Hello,
I'm trying to apply different backgrounds to a page based on the BODY
element class. It's working on some browsers but not on others.
I've searched Google and the groups, pored through...
|
by: 123shailesh |
last post by:
Hello everyone,
I need some help. I have been working on it for some time but havent been able to think of any solution. Even had thought of making do without it, even though it was a major part...
|
by: david.karr |
last post by:
If in my CSS I set the "background-color" property on the "body"
element, it only covers the background of the elements defined in the
body, up to the current width and height of the page. However,...
|
by: msoliver |
last post by:
I'm trying to figure out why the following creates a vertical scroll
bar.
Browser is IE 7 - using XHTML 1.0. I expand html and body to height
of 100% and then I want to put a border around the...
|
by: Joel Hedlund |
last post by:
Hi!
I've raised this issue on #pygtk and #gtk+ but with no luck. I haven't
been able to solve this even with aid of google, the pygtk reference and
the gtk C source, so pretty please help?
...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
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,...
|
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...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
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...
|
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,...
|
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...
| |
