/    Sign up×
Community /Pin to ProfileBookmark

why are there scrollbars in firefox when you do this ?

Copy linkTweet thisAlerts:
Jan 20.2005

margin-left:auto;
margin-right:auto;

anybody know a alternitive ?

to post a comment
CSS

26 Comments(s) ↴

Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — 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.
Copy linkTweet thisAlerts:
@toicontienJan 20.2005 — 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.
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — <!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;

}
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — I get no scrollbars in FF/mac.
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — I get no scrollbars in FF/Win either.
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — yes you do try refresh ?

just a second verifying something
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — Nope...refresh = no scroll bars.
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — 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 sec
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — 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
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — We have scrollbar, I repeat! Scrollbar!?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — Why do we have scrollbar ?
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — relative positions 800px each probably causing scrollbars. That'd be my guess.
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — but width:100%; does the same ?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — 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;}
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — wait...can I change my guess; ?

width:800px;

padding:20px 0px 20px 300px;


800 +300 = 1200 = scrolling. ?
Copy linkTweet thisAlerts:
@TriumphJan 20.2005 — did you mean to have 300px padding on the left side or is that a typo? 30px maybe?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — 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
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 20.2005 — anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 21.2005 — #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.
Copy linkTweet thisAlerts:
@TriumphJan 21.2005 — [i]Originally posted by gert cuykens [/i]

[B]anyway you have to agree that you would suspect that width 800 + 300 padding = width 800 right ? [/B][/QUOTE] IE would agree with you (hence the purpose of the box model hack). W3.org says width + padding + border = horizontal box size
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 21.2005 — but the padding is inside the box ? it would make more sense if it was width + margin + border = horizontal box size but not padding ?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 21.2005 — never mind what about the 100% height including overflow thing ?
Copy linkTweet thisAlerts:
@TriumphJan 21.2005 — [i]Originally posted by gert cuykens [/i]

[B]but the padding is inside the box [/B][/QUOTE]...but not inside the content of the box... [i]Originally posted by gert cuykens [/i]

[B]it would make more sense if it was width + margin + border = horizontal box size but not padding ? [/B][/QUOTE] well, that's just the way it is. ?
Copy linkTweet thisAlerts:
@gert_cuykensauthorJan 21.2005 — but not inside the content of the box[/QUOTE]

ok if i think about it i can more or less see why.
Copy linkTweet thisAlerts:
@toicontienJan 21.2005 — [i]Originally posted by gert cuykens [/i]

[B]it would make more sense if it was width + margin + border = horizontal box size but not padding[/B][/QUOTE]
I found the biggest reason this doesn't work is if you have the following situation:
<i>
</i>#content {
width: 400px;
padding: 20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="content"&gt;
&lt;table width="100%"&gt;
.
.
.
&lt;/table&gt;
&lt;/div&gt;

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 ?
Copy linkTweet thisAlerts:
@kevinmcqueenJan 21.2005 — 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
×

Success!

Help @gert_cuykens spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...