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!
Click to expand...

<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
Click to expand...
[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*
Click to expand...

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
Click to expand...
[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>
Click to expand...
Click to expand...

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!
Click to expand...

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
Click to expand...

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.
Click to expand...

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

Similar Threads

Align img inside nav tabs section 5
Image shifts to the right when export the page to pdf 4
Help with Visual Lightbox: Scripts 2
Align separate li to right 2
How can I add arrows to my FAQ 0
Dropdown menu in a fixed navbar 2
Help with my responsive home page 2
I need help fixing my website 2

Members online

Total: 64 (members: 3, guests: 61)
Robots: 292

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top