margin-left:auto;
margin-right:auto;
anybody know a alternitive ?You can use negative margins but I don't think that is what is causing your h-scroll. It should work in FF just fine.We'll need to see your full HTML and CSS to really give you any help. Any number of things could be causing the scroll bars.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1"/>
<meta name="author" content=""/>
<meta name="date" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/all.css" media="all"/></HEAD>
<BODY>
<div id=center>
<div id=box>
<div id=logo></div>
<div id=menu></div>
</div>
</BODY>
</HTML>
html,body {background-color:#cccccc;
margin:0;
padding:0;}
#center{text-align:center;}
#box {text-align:left;
background-color:white;
position:relative;
width:800px;
height:100%;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin-left:auto;
margin-right:auto;
}I get no scrollbars in FF/mac.I get no scrollbars in FF/Win either.yes you do try refresh
just a second verifying somethingNope...refresh = no scroll bars.ok seems i narrowed my html and css part a bit to much because there gone now
But they shure are scroll thingies
going to add more css just a secok i got scrollers in ff and not in ie when i add this
#menu{TEXT-ALIGN:left;
FONT-SIZE:14px;
COLOR:#564b47;
position:relative;
width:800px;
padding:20px 0px 20px 300px;}
see there are scroll thingies now
We have scrollbar, I repeat! Scrollbar!Why do we have scrollbar 
relative positions 800px each probably causing scrollbars. That'd be my guess.but width:100%; does the same 
when i do this it works but i dont understand why doh
#menu{TEXT-ALIGN:left;
FONT-SIZE:14px;
COLOR:#564b47;
padding:20px 0px 20px 300px;}wait...can I change my guess;
width:800px;
padding:20px 0px 20px 300px;
800 +300 = 1200 = scrolling.
did you mean to have 300px padding on the left side or is that a typo? 30px maybe?no 300px because that solves the other weird thing about the text-align:right; where the padding pushes the menu to the right over the blank space into the grey area instead to the left when i do this
padding:20px 20px 20px 0px;
again only in ff not in IEanyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ?#box {text-align:left;
background-color:white;
position:relative;
width:800px;
height:100%;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin-left:auto;
margin-right:auto;
}
PS how can you tell firefox to adjust the height to 100% including the overflow like in IE ?
Now i have a 100% box and when scrolling down in ff the text is in the grey area.Originally posted by gert cuykens
anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ? IE would agree with you (hence the purpose of the box model hack). W3.org says width + padding + border = horizontal box sizebut the padding is inside the box ? it would make more sense if it was width + margin + border = horizontal box size but not paddingnever mind what about the 100% height including overflow thing ?Originally posted by gert cuykens
but the padding is inside the box ...but not inside the content of the box... Originally posted by gert cuykens
it would make more sense if it was width + margin + border = horizontal box size but not padding well, that's just the way it is. but not inside the content of the box
ok if i think about it i can more or less see why.Originally posted by gert cuykens
it would make more sense if it was width + margin + border = horizontal box size but not padding
I found the biggest reason this doesn't work is if you have the following situation:
#content {
width: 400px;
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
<table width="100%">
.
.
.
</table>
</div>
If the padding was absorbed into the content area of an element, the 100% table width would be 400px - which is trying to fit into a 360 pixel wide box: 400px - [20px left padding] - [20px right padding].
Play around with IE5-Win to see what I meanyour paddiing of 20px is pushing it out by 20 pixels either side - so instead of it being 800 wide - its actually 840
change the 800 to 760 or remove the 20 padding
margin-right:auto;
anybody know a alternitive ?You can use negative margins but I don't think that is what is causing your h-scroll. It should work in FF just fine.We'll need to see your full HTML and CSS to really give you any help. Any number of things could be causing the scroll bars.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1"/>
<meta name="author" content=""/>
<meta name="date" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/all.css" media="all"/></HEAD>
<BODY>
<div id=center>
<div id=box>
<div id=logo></div>
<div id=menu></div>
</div>
</BODY>
</HTML>
html,body {background-color:#cccccc;
margin:0;
padding:0;}
#center{text-align:center;}
#box {text-align:left;
background-color:white;
position:relative;
width:800px;
height:100%;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin-left:auto;
margin-right:auto;
}I get no scrollbars in FF/mac.I get no scrollbars in FF/Win either.yes you do try refresh
just a second verifying somethingNope...refresh = no scroll bars.ok seems i narrowed my html and css part a bit to much because there gone now
But they shure are scroll thingies
going to add more css just a secok i got scrollers in ff and not in ie when i add this
#menu{TEXT-ALIGN:left;
FONT-SIZE:14px;
COLOR:#564b47;
position:relative;
width:800px;
padding:20px 0px 20px 300px;}
see there are scroll thingies now
We have scrollbar, I repeat! Scrollbar!Why do we have scrollbar relative positions 800px each probably causing scrollbars. That'd be my guess.but width:100%; does the same when i do this it works but i dont understand why doh #menu{TEXT-ALIGN:left;
FONT-SIZE:14px;
COLOR:#564b47;
padding:20px 0px 20px 300px;}wait...can I change my guess;
width:800px;
padding:20px 0px 20px 300px;
800 +300 = 1200 = scrolling.
did you mean to have 300px padding on the left side or is that a typo? 30px maybe?no 300px because that solves the other weird thing about the text-align:right; where the padding pushes the menu to the right over the blank space into the grey area instead to the left when i do this padding:20px 20px 20px 0px;
again only in ff not in IE
anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ?#box {text-align:left;background-color:white;
position:relative;
width:800px;
height:100%;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin-left:auto;
margin-right:auto;
}
PS how can you tell firefox to adjust the height to 100% including the overflow like in IE ?
Now i have a 100% box and when scrolling down in ff the text is in the grey area.Originally posted by gert cuykens
anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ? IE would agree with you (hence the purpose of the box model hack). W3.org says width + padding + border = horizontal box sizebut the padding is inside the box ? it would make more sense if it was width + margin + border = horizontal box size but not padding
never mind what about the 100% height including overflow thing ?Originally posted by gert cuykens but the padding is inside the box ...but not inside the content of the box... Originally posted by gert cuykens
it would make more sense if it was width + margin + border = horizontal box size but not padding
well, that's just the way it is. but not inside the content of the boxok if i think about it i can more or less see why.Originally posted by gert cuykens
it would make more sense if it was width + margin + border = horizontal box size but not padding
I found the biggest reason this doesn't work is if you have the following situation:
#content {
width: 400px;
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
<table width="100%">
.
.
.
</table>
</div>
If the padding was absorbed into the content area of an element, the 100% table width would be 400px - which is trying to fit into a 360 pixel wide box: 400px - [20px left padding] - [20px right padding].
Play around with IE5-Win to see what I mean
your paddiing of 20px is pushing it out by 20 pixels either side - so instead of it being 800 wide - its actually 840change the 800 to 760 or remove the 20 padding