|
|
Posted by Gιrard Talbot on 05/10/07 03:25
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!
>
> --
> James
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
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
[Back to original message]
|