Re: [css-d] how to get rid of scroll bar at bottom of page

[David Laakso]

On 3/23/11 9:37 PM, Matthew P. Johnson wrote:

http://peacetimemachine.com/ecoit/index.shtml

How to do I get rid of the scroll bar at the bottom of the page?

Matthew P. Johnson | Eco I.T.






Try:
body {/*overflow : scroll;*/ overflow-y : scroll; }
Best,
Lady Gaga





--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] how to get rid of scroll bar at bottom of page

[Matthew P. Johnson]

http://peacetimemachine.com/ecoit/index.shtml

 

How to do I get rid of the scroll bar at the bottom of the page? I would
like the "phantom" scroller on the right side to keep balance when a page
that needs to be scrolled down does not shift.

 

Thank you J 

 

Matthew P. Johnson | Eco I.T.

708 Bay Road Mill Valley CA 94941 | 415.254.1563 |  
ecoitsf.com

P Please consider the environment before printing this email.

 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Michael Adams]

On Tue, 04 Nov 2008 15:19:31 -0600
Came this utterance fomulated by Peter Hyde-Smith to my mailbox:

> 
> - Original Message - 
> From: "Michael Adams" <[EMAIL PROTECTED]>
> To: 
> Sent: Tuesday, November 04, 2008 12:12 PM
> Subject: Re: [css-d] how to get rid of scroll bar?
> 
> 
> > On Mon, 03 Nov 2008 19:01:19 -0600
> > Came this utterance fomulated by Peter Hyde-Smith to my mailbox:
> >
> >>
> > [snip]
> >>
> >> IMO, you've got a ton of CSS; maybe want to more distinctly
> >separate> basic layout CSS from fiddley-bits. Also, recommend setting
> >font-size> in % instead of fixed pixels, for browser friendly
> >resizing.>
> 
> Hence, Michael's erudite response...
> 
> > Setting all font sizes in % is not recommended. nested table cells,
> > paragraphs, lists or blockquotes inherit their font size then apply
> > the percent again, so you can get 66% of 66% or 44% as a result.
> >
> 
> Michael:
> 
> I should have been more specific. From an accessibilty/usibilty
> standpoint this delcaration of Bill's CSS 
> http://www.shopkeepers-r.us/stylesheets/application.css?1225143428,
> 
> body, p, ol, ul, td {
>   font-family: verdana, arial, helvetica, sans-serif;
>   font-size:   13px;
>   line-height: 18px;
> }
> 
> may be better served in part,
> 
> body{font: 100%/1.4 verdana, arial, helvetica, sans-serif;}
> 
> with child elements served in ems (or just left alone). I've been down
> the road of nested %'s. It's confusing and ugly.
> 

Which is precisely the way that i do it. The only exception i make is
not using Verdana at 100%. The large x-height can make it look ugly at
'normal' sizes, when it was designed to look good at smaller sizes. Of
course this is subjective.

http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Ionut Gabriel Stan]

Hi Bill,

The body width is not specified. It is by default 100% of the viewport
minus some
margin pixels, depending on browser. So on my 1280px wide screen, in Firefox 3,
the width of the body was 1264px as by default the body element has margin: 8px;
according to Firebug. In IE6 this default is margin: 15px 10px; according to IE
Developer Toolbar. Basically there's no need to give it a certain
width unless you
want a fixed size layout.

In your case the problem resides in that those DIVs, that I mentioned
about in my
previous email, act just like the body element, or any other block
element. They try
to span 100% of the viewport by default. By positioning them
relatively with a large
left offset you're pushing them to the right without changing their
default width, thus
the scrollbar.

Here's a little screenshot that shows exactly how one of those DIVs is
pushed to the right:

http://amenthes.110mb.com/css-d.png

Regarding the float. You should make it a try on your design to see
how it works.
At first it may blow it up completely but it is fundamental to
understand floating in CSS.
In order to float an element a float:left; or float:right; declaration
is all you need, no positioning
required. But, as I said, you'll also need a display:inline; for IE6
to behave as expected.

Hope that helps.


Cheers,
Ionut


On Tue, Nov 4, 2008 at 5:09 PM, Bill Walton <[EMAIL PROTECTED]> wrote:
> Hi Ionut,
>
> Ionut Gabriel Stan wrote:
>> Bill Walton wrote:
>> >
>> > I can't figure out why I have a horizontal scroll bar at
> http://www.shopkeepers-r.us or how to get rid of it.  The current plan is
> for the browser window to be maximized with the screen resolution set at
> 1024x768.  I'd sure appreciate help.  Resource pointers that would help me
> understand why this is happening would _really_ be appreciated.
>>
>> It's because of these elements:
>>
>>  #customer_search_form,
>>  #walkin_customer_button,
>>  #purchase_return_button
>>
>> ...and maybe others.
>>
>> The explanation is that you positioned them relatively
>> with a large left offset but forgot to change them
>> the width value which right now is 100% of the body
>> width -> 1264px in FF3.
>
> Thank you very much for this.  One big question... how / where is the body
> width specified?  I thought it might have to do with body width and went
> through all the CSS (I think) without finding it.  Maybe I'm looking for the
> wrong thing?
>>
>> My advice is to float them left instead of positioning
>> them relatively.
>
> I'll try this, but I thought that an element had to be positioned relative
> in _order_ to float it.  Wrong?
>
>> If you float them left, don't forget to
>> also add a display:inline; after the float: left; declaration.
>> It's for Internet Explorer's double margin floating bug[1].
>>
>> [1] http://www.positioniseverything.net/explorer/doubled-margin.html
>
> The best news is that this _only_ has to be styled for FF ;-)
>
> Thanks very much for your help.  I appreciate it!
>
> Best regards,
> Bill
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Peter Hyde-Smith]

- Original Message - 
From: "Michael Adams" <[EMAIL PROTECTED]>
To: 
Sent: Tuesday, November 04, 2008 12:12 PM
Subject: Re: [css-d] how to get rid of scroll bar?


> On Mon, 03 Nov 2008 19:01:19 -0600
> Came this utterance fomulated by Peter Hyde-Smith to my mailbox:
>
>>
> [snip]
>>
>> IMO, you've got a ton of CSS; maybe want to more distinctly separate
>> basic layout CSS from fiddley-bits. Also, recommend setting font-size
>> in % instead of fixed pixels, for browser friendly resizing.
>>

Hence, Michael's erudite response...

> Setting all font sizes in % is not recommended. nested table cells,
> paragraphs, lists or blockquotes inherit their font size then apply the
> percent again, so you can get 66% of 66% or 44% as a result.
>

Michael:

I should have been more specific. From an accessibilty/usibilty standpoint 
this delcaration of Bill's CSS 
http://www.shopkeepers-r.us/stylesheets/application.css?1225143428,

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

may be better served in part,

body{font: 100%/1.4 verdana, arial, helvetica, sans-serif;}

with child elements served in ems (or just left alone). I've been down the 
road of nested %'s. It's confusing and ugly.

Peter
www.fatpawdesign.com
developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024
checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1
In God we trust, all else bring data...



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Michael Adams]

On Mon, 03 Nov 2008 19:01:19 -0600
Came this utterance fomulated by Peter Hyde-Smith to my mailbox:

> 
[snip]
> 
> IMO, you've got a ton of CSS; maybe want to more distinctly separate
> basic layout CSS from fiddley-bits. Also, recommend setting font-size
> in % instead of fixed pixels, for browser friendly resizing.
> 

Setting all font sizes in % is not recommended. nested table cells,
paragraphs, lists or blockquotes inherit their font size then apply the
percent again, so you can get 66% of 66% or 44% as a result.

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Bill Walton]

Hi Ionut,

Ionut Gabriel Stan wrote:
> Bill Walton wrote:
> >
> > I can't figure out why I have a horizontal scroll bar at
http://www.shopkeepers-r.us or how to get rid of it.  The current plan is
for the browser window to be maximized with the screen resolution set at
1024x768.  I'd sure appreciate help.  Resource pointers that would help me
understand why this is happening would _really_ be appreciated.
>
> It's because of these elements:
>
>  #customer_search_form,
>  #walkin_customer_button,
>  #purchase_return_button
>
> ...and maybe others.
>
> The explanation is that you positioned them relatively
> with a large left offset but forgot to change them
> the width value which right now is 100% of the body
> width -> 1264px in FF3.

Thank you very much for this.  One big question... how / where is the body
width specified?  I thought it might have to do with body width and went
through all the CSS (I think) without finding it.  Maybe I'm looking for the
wrong thing?
>
> My advice is to float them left instead of positioning
> them relatively.

I'll try this, but I thought that an element had to be positioned relative
in _order_ to float it.  Wrong?

> If you float them left, don't forget to
> also add a display:inline; after the float: left; declaration.
> It's for Internet Explorer's double margin floating bug[1].
>
> [1] http://www.positioniseverything.net/explorer/doubled-margin.html

The best news is that this _only_ has to be styled for FF ;-)

Thanks very much for your help.  I appreciate it!

Best regards,
Bill

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Bill Walton]

Hi Peter,

Peter Hyde-Smith wrote:
>
>  Ionut wrote
> >
> > It's because of these elements:
> >
> > #customer_search_form,
> > #walkin_customer_button,
> > #purchase_return_button
> >
> > ...and maybe others.
> >
> > My advice is to float them left instead of positioning them
> > relatively. If you float them left, don't forget to also add a
> > display:inline; after the float: left; declaration. It's for
> > Internet Explorer's double margin floating bug[1].
> >
>
> Bill:
>
> I would say definitely others, including the header, as outlining
> elements in WebDeveloper show a number of elements wider
> than my screen width of 1280px.

Thanks for mentioning WebDeveloper.  I hadn't downloaded it; have been
getting by pretty well (I thought) with Firebug.  This is GREAT!  Amazing
amount of  info / capabilities for layout.  Now I just have to figure out
how to use it all ;-)

> Are you trying for a max page width of 1024px (~78em)?
> You'd set that through CSS, such as
>
> #somewrapper{width: 98%; max-width: 78em;}, as well as using float
> technique above.

Yes, 1024 is our target.  Thanks very much for the code.  I'll give it a try
immediately.

> IMO, you've got a ton of CSS;

Yeah.  My guess is that, if I had a better understanding of CSS, more time,
or both, I'd probably be able to refactor this down to about half a ton
less.

> maybe want to more distinctly separate basic layout CSS from
> fiddley-bits.

Here's a good test re: CSS expertise level: being able to tell the
difference between the two ;-)  I'd sure appreciate any specific
recommendations along that line, or pointers to online content I could learn
from.

> Also, recommend setting font-size in % instead of fixed pixels,
> for browser friendly resizing.

I'm not familiar with setting font-size in %; just em and px.  I thought
em-based sizing was the way to go for accomodating  resizing.  Just goes to
show ya.  I'll look into it.  Any good cheat sheets for making the
translations?

Thanks much for your help.  I appreciate it!

Bill

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Peter Hyde-Smith]

- Original Message - 
From: "Ionut Gabriel Stan" <[EMAIL PROTECTED]>
To: "Bill Walton" <[EMAIL PROTECTED]>
Cc: 
Sent: Monday, November 03, 2008 6:18 PM
Subject: Re: [css-d] how to get rid of scroll bar?


> Bill Walton wrote:
>>
>> I can't figure out why I have a horizontal scroll bar at 
>> http://www.shopkeepers-r.us or how to get rid of it.  The current plan is 
>> for the browser window to be maximized with the screen resolution set at 
>> 1024x768.  I'd sure appreciate help.  Resource pointers that would help 
>> me understand why this is happening would _really_ be appreciated.
>>
>>

 Ionut wrote
>
> It's because of these elements:
>
> #customer_search_form,
> #walkin_customer_button,
> #purchase_return_button
>
> ...and maybe others.
>
> My advice is to float them left instead of positioning them relatively.
> If you float them left, don't forget to
> also add a display:inline; after the float: left; declaration. It's for
> Internet Explorer's double margin floating bug[1].
>

Bill:

I would say definitely others, including the header, as outlining elements 
in WebDeveloper show a number of elements wider than my screen width of 
1280px. Are you trying for a max page width of 1024px (~78em)? You'd set 
that through CSS, such as

#somewrapper{width: 98%; max-width: 78em;}, as well as using float 
technique above.

IMO, you've got a ton of CSS; maybe want to more distinctly separate basic 
layout CSS from fiddley-bits. Also, recommend setting font-size in % instead 
of fixed pixels, for browser friendly resizing.

Best,

Peter
www.fatpawdesign.com
developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024
checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1
In God we trust, all else bring data...

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to get rid of scroll bar?

[Ionut Gabriel Stan]

Bill Walton wrote:
> Greetings!
>
> I can't figure out why I have a horizontal scroll bar at 
> http://www.shopkeepers-r.us or how to get rid of it.  The current plan is for 
> the browser window to be maximized with the screen resolution set at 
> 1024x768.  I'd sure appreciate help.  Resource pointers that would help me 
> understand why this is happening would _really_ be appreciated.
>
> TIA,
> Bill
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
Hi Bill,

It's because of these elements:

 #customer_search_form,
 #walkin_customer_button,
 #purchase_return_button

...and maybe others.

The explanation is that you positioned them relatively with a large left 
offset but forgot to change them
the width value which right now is 100% of the body width -> 1264px in FF3.

My advice is to float them left instead of positioning them relatively. 
If you float them left, don't forget to
also add a display:inline; after the float: left; declaration. It's for 
Internet Explorer's double margin floating bug[1].

Cheers,
Ionut


[1] http://www.positioniseverything.net/explorer/doubled-margin.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] how to get rid of scroll bar?

[Bill Walton]

Greetings!

I can't figure out why I have a horizontal scroll bar at 
http://www.shopkeepers-r.us or how to get rid of it.  The current plan is for 
the browser window to be maximized with the screen resolution set at 1024x768.  
I'd sure appreciate help.  Resource pointers that would help me understand why 
this is happening would _really_ be appreciated.

TIA,
Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/