Right margin in IE?

J

James A

Hi,

I'm trying to create a 10px wide margin on the left and right of a page
using CSS. Those margins need to be 10px whatever the width of the page.
Firefox and Opera work fine, but in IE6 the right hand side has no margin
and a horizontal scroll bar appears as the page is a little wider than the
window (10px maybe). My test page is here:
http://www.felston.com/temp/test.html

And the code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 0;
background:#CCCCCC;
}
#content {
margin: 0;
padding: 0;
width: 100%;
height: 600px;
}
</style>
</head>

<body>
<div id='wrapper'>
<div id='content'>
</div>
</div>
</body>
</html>

"content" just represents the content of the page that I will add later.

From reading another usenet post, I believe the issue is that IE has no
reference to use with "right". But I can't find a solution. I tried
replacing the left and right with margin-left and margin-right, which again
works fine with Firefox and Opera, but produces the same no right margin
result with IE6.

Could someone please offer a solution that works with IE? Many thanks!
 
B

BootNic

James A said:
[email protected]
Hi,

I'm trying to create a 10px wide margin on the left and right of a
page using CSS. Those margins need to be 10px whatever the width of
the page. Firefox and Opera work fine, but in IE6 the right hand side
has no margin and a horizontal scroll bar appears as the page is a
little wider than the window (10px maybe). My test page is here:
http://www.felston.com/temp/test.html [snip]
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 0;
background:#CCCCCC;
}
#content {
margin: 0;
padding: 0;
width: 100%;
height: 600px;
}
</style> [snip]
Could someone please offer a solution that works with IE? Many thanks!

<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#wrapper {
background:#CCCCCC;
margin:0 10px 0 10px;
}
#content {
margin: 0;
padding: 0;
height: 600px;
}
</style>

--
BootNic Tuesday, May 08, 2007 6:50 PM

When men are pure, laws are useless; when men are corrupt, laws are
broken.
*Benjamin Disraeli*
 
J

James A

BootNic said:
[email protected]
Hi,

I'm trying to create a 10px wide margin on the left and right of a
page using CSS. Those margins need to be 10px whatever the width of
the page. Firefox and Opera work fine, but in IE6 the right hand side
has no margin and a horizontal scroll bar appears as the page is a
little wider than the window (10px maybe). My test page is here:
http://www.felston.com/temp/test.html
[snip]

<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#wrapper {
background:#CCCCCC;
margin:0 10px 0 10px;
}
#content {
margin: 0;
padding: 0;
height: 600px;
}
</style>

--
BootNic Tuesday, May 08, 2007 6:50 PM

When men are pure, laws are useless; when men are corrupt, laws are
broken.
*Benjamin Disraeli*

That's superb! Many thanks BootNic. Working perfectly.
 
J

Jonathan N. Little

James said:
BootNic said:
[email protected]
Hi,

I'm trying to create a 10px wide margin on the left and right of a
page using CSS. Those margins need to be 10px whatever the width of
the page. Firefox and Opera work fine, but in IE6 the right hand side
has no margin and a horizontal scroll bar appears as the page is a
little wider than the window (10px maybe). My test page is here:
http://www.felston.com/temp/test.html
[snip]
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#wrapper {
background:#CCCCCC;
margin:0 10px 0 10px;
}
#content {
margin: 0;
padding: 0;
height: 600px;
}
</style>

And the moral of this story... "Do not use absolute positioning until
you full understand what it means..."
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

James A a écrit :
Hi,

I'm trying to create a 10px wide margin on the left and right of a page
using CSS. Those margins need to be 10px whatever the width of the page.
Firefox and Opera work fine, but in IE6 the right hand side has no margin
and a horizontal scroll bar appears as the page is a little wider than the
window (10px maybe). My test page is here:
http://www.felston.com/temp/test.html

And the code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
position: absolute;
left: 10px;
right: 10px;
top: 0;
background:#CCCCCC;
}
#content {
margin: 0;
padding: 0;
width: 100%;
height: 600px;
}
</style>
</head>

<body>
<div id='wrapper'>
<div id='content'>
</div>
</div>
</body>
</html>

"content" just represents the content of the page that I will add later.

From reading another usenet post, I believe the issue is that IE has no
reference to use with "right". But I can't find a solution. I tried
replacing the left and right with margin-left and margin-right, which again
works fine with Firefox and Opera, but produces the same no right margin
result with IE6.

Could someone please offer a solution that works with IE? Many thanks!

Why do you first remove the default margin of the body, then create an
unneeded, non-necessary DOM node duplicating the function of the body
and then set some absolute positions that exactly equate and act like
margins on the body? All of what you are trying to do could be done by
simply redefining the default margins on the body, and that, without a
wrapper div and without absolute positioning.

<style type="text/css">
body
{
margin: 0px 10px;
padding: 0;
background-color: #CCC;
height: 600px;
}
</style>
</head>

<body>
.... content ...
</body>
</html>

Gérard
 
J

James A

Gérard Talbot said:
James A a écrit :
Why do you first remove the default margin of the body, then create an
unneeded, non-necessary DOM node duplicating the function of the body and
then set some absolute positions that exactly equate and act like margins
on the body? All of what you are trying to do could be done by simply
redefining the default margins on the body, and that, without a wrapper
div and without absolute positioning.

<style type="text/css">
body
{
margin: 0px 10px;
padding: 0;
background-color: #CCC;
height: 600px;
}
</style>
</head>

<body>
... content ...
</body>
</html>

Gérard

Hi Gérard,

I copied the code you've supplied to this test page:
http://www.felston.com/temp/test2.html
and it produces a background colour of grey (#CCC) that extends to the
corners of the screen with no 10px margin. That's not what I was after in
fact. I know I did not specify that requirement in my original text, sorry.
The code with the wrapper as suggested by BootNic is doing what I want as
shown here http://www.felston.com/temp/test.html If that can be achieved
without the extra wrapper div then I would be very happy to implement it
that way, thanks.
 
B

BootNic

html {
background-color:#fff;
}
The code with the wrapper as suggested by BootNic is doing what I
want as shown here http://www.felston.com/temp/test.html If that
can be achieved without the extra wrapper div then I would be
very happy to implement it that way, thanks.

I did not suggest any HTML content at all, I did suggest some css that
would produce the effect I believed you wanted, with your HTML.

Adding a background color to the html in the example Gérard provided
may produce the effect you desire.

--
BootNic Friday, May 11, 2007 10:43 PM

All my humor is based upon destruction and despair. If the whole
world was tranquil, without disease and violence, I'd be standing on
the breadline right in back of J. Edgar Hoover.
*Lenny Bruce US comedian, satirist, author*
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top