PDA

Click to See Complete Forum and Search --> : why are there scrollbars in firefox when you do this ?

gert cuykens
01-20-2005, 08:27 AM
margin-left:auto;
margin-right:auto;

anybody know a alternitive ?
Triumph
01-20-2005, 09:23 AM
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.
toicontien
01-20-2005, 12:01 PM
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.
gert cuykens
01-20-2005, 04:22 PM
<!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="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;
}
Triumph
01-20-2005, 04:38 PM
I get no scrollbars in FF/mac.
Triumph
01-20-2005, 04:46 PM
I get no scrollbars in FF/Win either.
gert cuykens
01-20-2005, 04:49 PM
yes you do try refresh :)

just a second verifying something
Triumph
01-20-2005, 04:50 PM
Nope...refresh = no scroll bars.
gert cuykens
01-20-2005, 04:52 PM
ok seems i narrowed my html and css part a bit to much because there gone now :D

But they shure are scroll thingies :D
going to add more css just a sec
gert cuykens
01-20-2005, 04:58 PM
ok 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 :p
Triumph
01-20-2005, 05:06 PM
We have scrollbar, I repeat! Scrollbar!:D
gert cuykens
01-20-2005, 05:07 PM
Why do we have scrollbar :confused:
Triumph
01-20-2005, 05:08 PM
relative positions 800px each probably causing scrollbars. That'd be my guess.
gert cuykens
01-20-2005, 05:11 PM
but width:100%; does the same :(
gert cuykens
01-20-2005, 05:16 PM
when i do this it works but i dont understand why doh :confused:

#menu{TEXT-ALIGN:left;
FONT-SIZE:14px;
COLOR:#564b47;
padding:20px 0px 20px 300px;}
Triumph
01-20-2005, 05:20 PM
wait...can I change my guess; :)

width:800px;
padding:20px 0px 20px 300px;


800 +300 = 1200 = scrolling. ;)
Triumph
01-20-2005, 05:22 PM
did you mean to have 300px padding on the left side or is that a typo? 30px maybe?
gert cuykens
01-20-2005, 05:26 PM
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 :p
gert cuykens
01-20-2005, 05:30 PM
anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ?
gert cuykens
01-20-2005, 06:28 PM
#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.
Triumph
01-20-2005, 07:22 PM
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 size
gert cuykens
01-20-2005, 07:35 PM
but the padding is inside the box ? it would make more sense if it was width + margin + border = horizontal box size but not padding :confused:
gert cuykens
01-20-2005, 07:37 PM
never mind what about the 100% height including overflow thing ?
Triumph
01-20-2005, 07:45 PM
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 :confused: well, that's just the way it is. :)
gert cuykens
01-20-2005, 07:48 PM
but not inside the content of the box

ok if i think about it i can more or less see why.
toicontien
01-21-2005, 12:11 PM
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 :D
kevinmcqueen
01-21-2005, 12:15 PM
your 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