Re: [css-d] Sticky Footer Problems

2014-04-21 Thread Karl DeSaulniers 

On Apr 21, 2014, at 8:43 PM, Karl DeSaulniers  wrote:

> On Apr 21, 2014, at 11:54 AM, Jennifer  wrote:
> 
>> Hello,
>> 
>>  I've attempted to change our footer to a sticky version, so that on 
>> shorter pages, it's always at the bottom of the screen. However, I'm having 
>> a problem with a gap in the content of a short page just above the footer.
>> 
>>  Can someone please tell me what I did wrong?  Here's one of the pages 
>> that shows the problem:
>> 
>> http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5
>> 
>>  Also, if you shrink the window vertically, the footer will cover the 
>> bottom portion of the Navigation Menu.  How can I prevent that from 
>> happening?
>> 
>>  I've tried a lot of different solutions, so the CSS may be a little 
>> messy.  Maybe that's my problem. :(
>> 
>> Thank you!
>> Jenni
>> 
>>  Superior Shelving Systems
>>  The (Storage|Office|Home|Warehouse) Shelving Specialists
>>  Since 1984
>> 
>> Workstation Chairs/Stools:
>> http://www.superiorshelving.com/mfg/nexel/pages/stools.php
>> 
> 
> 
> Hi Jenni,
> I took a look at your code and I "think" I may have fixed it. You can let me 
> know. 
> I would have emailed you directly, but you said you wouldn't get it. 
> So, sorry guys for any clutter.
> 
> http://designdrumm.com/contact-superior-shelving-systems.zip
> 
> HTH,
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com

Oh, one last thing. If you want the footer in my example to "stick" 
to the bottom of the page like a sticky footer should, just change the position 
to fixed on the footer element.
Although,... if you want a sticky footer, know that it is going to cover 
content of the page that scrolls beneath. 
If you want short content to show above the footer, you need to add some 
padding to the bottom inside of the div.twoColLiqLtHdr or container div.
Also, I rearanged the footer to have a smaller foot print, but you should be 
able to paste your old code inside the footer element and it still work if that 
is what you prefer. 
Sorry, should have mentioned I did that in the first email.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
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] Sticky Footer Problems

2014-04-21 Thread Karl DeSaulniers 
On Apr 21, 2014, at 11:54 AM, Jennifer  wrote:

> Hello,
> 
>   I've attempted to change our footer to a sticky version, so that on 
> shorter pages, it's always at the bottom of the screen. However, I'm having a 
> problem with a gap in the content of a short page just above the footer.
> 
>   Can someone please tell me what I did wrong?  Here's one of the pages 
> that shows the problem:
> 
> http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5
> 
>   Also, if you shrink the window vertically, the footer will cover the 
> bottom portion of the Navigation Menu.  How can I prevent that from happening?
> 
>   I've tried a lot of different solutions, so the CSS may be a little 
> messy.  Maybe that's my problem. :(
> 
> Thank you!
> Jenni
> 
>   Superior Shelving Systems
>   The (Storage|Office|Home|Warehouse) Shelving Specialists
>   Since 1984
> 
> Workstation Chairs/Stools:
> http://www.superiorshelving.com/mfg/nexel/pages/stools.php
> 


Hi Jenni,
I took a look at your code and I "think" I may have fixed it. You can let me 
know. 
I would have emailed you directly, but you said you wouldn't get it. 
So, sorry guys for any clutter.

http://designdrumm.com/contact-superior-shelving-systems.zip

HTH,
Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
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] Sticky Footer Problems

2014-04-21 Thread MiB 

apr 22 2014 01:14 MiB :

> 
> apr 21 2014 21:37 Jennifer :
> 
>> It seems that there should be a way to 'fix' this.  I know it works, since 
>> I've tried it on a simple page, so it looks like I'll have to start 
>> stripping out other CSS to see what's interfering with the footer. And I 
>> thought this was going to be a simple task! ;)
> 
> Fireworks tools make that easy. Or Chrome, but I prefer Fireworks even though 
> I don’t use it daily.

Duh! I meant Firefox Developer Tools.

__
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] Sticky Footer Problems

2014-04-21 Thread MiB 

apr 21 2014 21:37 Jennifer :

> It seems that there should be a way to 'fix' this.  I know it works, since 
> I've tried it on a simple page, so it looks like I'll have to start stripping 
> out other CSS to see what's interfering with the footer. And I thought this 
> was going to be a simple task! ;)

Fireworks tools make that easy. Or Chrome, but I prefer Fireworks even though I 
don’t use it daily.

__
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] Sticky Footer Problems

2014-04-21 Thread Tom Livingston 
First of all, I'm glad it's not just me. Second, Mr. Meyer is aware of
the issue.

On Mon, Apr 21, 2014 at 5:17 PM, King's Cat (Cassandra King)
 wrote:
> Hi list
> i got that offensive  email as well Is there a way of banning that account
> from this list? seems to be set to auto-respond on their end...for me, as
> soon as i posted, it immediately appeared in my inbox.
>
>
> On Mon, Apr 21, 2014 at 3:37 PM, Jennifer 
> wrote:
>
>> On Apr 21, 2014, at 12:17 PM, David Hucklesby wrote:
>> > <
>> http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
>> >
>> >
>> > I’m assuming you either don’t need to support IE older than version 8,
>> or give
>> > those geriatric browsers a very simple “generic” style sheet.
>>
>> Hi David,
>>
>> I remember running across that page in my search and trying it.  I
>> just don't remember why I didn't go with it.  I'll try it again, but that
>> way will add a lot more work for me.  I already reformatted quite a few
>> pages before I realized that it wasn't working properly.
>>
>> It seems that there should be a way to 'fix' this.  I know it
>> works, since I've tried it on a simple page, so it looks like I'll have to
>> start stripping out other CSS to see what's interfering with the footer.
>>  And I thought this was going to be a simple task! ;)
>>
>> Thank you,
>> Jenni
>>
>> Superior Shelving Systems
>> The (Storage|Office|Home|Warehouse) Shelving Specialists
>> Since 1984
>>
>> Computer Workstations:
>> http://www.superiorshelving.com/mfg/nexel/pages/lan-workstations-nexel.php
>>
>> __
>> 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-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/



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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] Sticky Footer Problems

2014-04-21 Thread King's Cat (Cassandra King) 
Hi list
i got that offensive  email as well Is there a way of banning that account
from this list? seems to be set to auto-respond on their end...for me, as
soon as i posted, it immediately appeared in my inbox.


On Mon, Apr 21, 2014 at 3:37 PM, Jennifer wrote:

> On Apr 21, 2014, at 12:17 PM, David Hucklesby wrote:
> > <
> http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
> >
> >
> > I’m assuming you either don’t need to support IE older than version 8,
> or give
> > those geriatric browsers a very simple “generic” style sheet.
>
> Hi David,
>
> I remember running across that page in my search and trying it.  I
> just don't remember why I didn't go with it.  I'll try it again, but that
> way will add a lot more work for me.  I already reformatted quite a few
> pages before I realized that it wasn't working properly.
>
> It seems that there should be a way to 'fix' this.  I know it
> works, since I've tried it on a simple page, so it looks like I'll have to
> start stripping out other CSS to see what's interfering with the footer.
>  And I thought this was going to be a simple task! ;)
>
> Thank you,
> Jenni
>
> Superior Shelving Systems
> The (Storage|Office|Home|Warehouse) Shelving Specialists
> Since 1984
>
> Computer Workstations:
> http://www.superiorshelving.com/mfg/nexel/pages/lan-workstations-nexel.php
>
> __
> 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-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] Webkit's wobbly centering

2014-04-21 Thread Karl DeSaulniers 
On Apr 21, 2014, at 1:18 PM, Tom Livingston  wrote:

> On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby  wrote:
>> Making a photo gallery, I want to center a row of thumbnails below the main
>> photo. My code works well in all browsers *except* for those based on
>> Webkit.
>> A cut-down version of the code is here:
>> 
>> 
>> 
>> What am I doing wrong?
>> 
>> Any suggestions gratefully accepted. Thank.
>> --
>> Cordially,
>> David
>> __
> 
> Turning off the word-spacing on .thumbs in Chrome inspector fixed it,
> though the space between thumbnails became less. Maybe that will put
> you on the right track...
> 

Hi David,
Don't know if you got this fixed, but the code below worked for me and allowed 
me to add thumbnails and stay centered.

.plain-list {
list-style-type: none;
margin: 0;
padding: 0;
  width: 40em;
}

.thumbs {
background-color: #fd0;
line-height: 0;
word-spacing: .05em;
  text-align: center;
}

.thumbs > li {
display: inline-block;
}

.thumbs > li > a {
display: block;
background-color: #f43;
width: 3em;
height: 3em;
  margin: 0 inherit;
}

Also, this worked even better (I think)


.plain-list {
list-style-type: none;
margin: 0;
padding: 0;
  width: 40em;
}

.thumbs {
background-color: #fd0;
line-height: 0;
  margin: 0 auto;
  text-align: center;
}

.thumbs > li {
display: inline-block;
  padding: 0 .25em;
}

.thumbs > li > a {
display: block;
background-color: #f43;
width: 3em;
height: 3em;
  margin: 0;
}


Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
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] Sticky Footer Problems

2014-04-21 Thread Jennifer 
On Apr 21, 2014, at 12:17 PM, David Hucklesby wrote:
> 
> 
> I’m assuming you either don’t need to support IE older than version 8, or give
> those geriatric browsers a very simple “generic” style sheet.

Hi David,

I remember running across that page in my search and trying it.  I just 
don't remember why I didn't go with it.  I'll try it again, but that way will 
add a lot more work for me.  I already reformatted quite a few pages before I 
realized that it wasn't working properly.

It seems that there should be a way to 'fix' this.  I know it works, 
since I've tried it on a simple page, so it looks like I'll have to start 
stripping out other CSS to see what's interfering with the footer.  And I 
thought this was going to be a simple task! ;)

Thank you,
Jenni

Superior Shelving Systems
The (Storage|Office|Home|Warehouse) Shelving Specialists
Since 1984

Computer Workstations:
http://www.superiorshelving.com/mfg/nexel/pages/lan-workstations-nexel.php

__
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] Sticky Footer Problems

2014-04-21 Thread Jennifer 
On Apr 21, 2014, at 11:51 AM, King's Cat (Cassandra King) wrote:
> change your footer positioning to position: relative;
> you have a 5px margin at bottom of your
> #container div and a 1px border at bottom as well,
> remove those.

Thanks, Cass.  Unfortunately, that didn't help.  Using "relative" 
instead of "absolute" attached the footer to the container, not to the bottom 
of the screen and the removal of the margins weren't enough to close the gap.  
For some reason  min-height:100%  is not working.


FYI: If anyone responds directly to me about this, I won't get it.  Within 5 
minutes of posting my question, I received 2 rather suggestive emails with 
photos of half-naked girls.  The text in the emails made it clear that they 
thought those emails were going to a male.  It was rather disturbing, as that 
has NEVER happened to me before!  Anyway, I set up a filter that will block all 
replies to my posts if one of the recipients isn't the list.

Thanks,
Jenni

Superior Shelving Systems
The (Storage|Office|Display|Warehouse) Shelving Specialists
Since 1984

Label Holders:
http://www.superiorshelving.com/mfg/aigner/

__
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] Test

2014-04-21 Thread Tom Livingston 
Subscription issue. Sorry about the noise.

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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] Sticky Footer Problems

2014-04-21 Thread David Hucklesby 

On 4/21/14, 9:54 AM, Jennifer wrote:

Hello,

I've attempted to change our footer to a sticky version, so that on 
shorter pages, it's always at the bottom of the screen. However, I'm having a 
problem with a gap in the content of a short page just above the footer.

Can someone please tell me what I did wrong?  Here's one of the pages 
that shows the problem:

http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5


[...]
In addition to Cassandra’s suggestion, I think you’ll find this method probably
the easiest to use. I, too, had many problems with older methods:



I’m assuming you either don’t need to support IE older than version 8, or give
those geriatric browsers a very simple “generic” style sheet.
--
Cordially,
David


__
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] Webkit's wobbly centering

2014-04-21 Thread David Hucklesby 

On 4/21/14, 11:18 AM, Tom Livingston wrote:

On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby  wrote:

Making a photo gallery, I want to center a row of thumbnails below the main
photo. My code works well in all browsers *except* for those based on
Webkit.
A cut-down version of the code is here:

  


[...]

__


Turning off the word-spacing on .thumbs in Chrome inspector fixed it,
though the space between thumbnails became less. Maybe that will put
you on the right track...



Brilliant! Thank you Tom.

Adding margin-right to the  instead seems to give me what I want.
--
Cordially,
David

__
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] Sticky Footer Problems

2014-04-21 Thread King's Cat (Cassandra King) 
Hi Jennifer
Just quickly looking
Try this:

change your footer positioning to position: relative;
you have a 5px margin at bottom of your
#container div and a 1px border at bottom as well,
remove those.

Cass


On Mon, Apr 21, 2014 at 12:54 PM, Jennifer wrote:

> Hello,
>
> I've attempted to change our footer to a sticky version, so that
> on shorter pages, it's always at the bottom of the screen. However, I'm
> having a problem with a gap in the content of a short page just above the
> footer.
>
> Can someone please tell me what I did wrong?  Here's one of the
> pages that shows the problem:
>
>
> http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5
>
> Also, if you shrink the window vertically, the footer will cover
> the bottom portion of the Navigation Menu.  How can I prevent that from
> happening?
>
> I've tried a lot of different solutions, so the CSS may be a
> little messy.  Maybe that's my problem. :(
>
> Thank you!
> Jenni
>
> Superior Shelving Systems
> The (Storage|Office|Home|Warehouse) Shelving Specialists
> Since 1984
>
> Workstation Chairs/Stools:
> http://www.superiorshelving.com/mfg/nexel/pages/stools.php
>
> __
> 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-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] Webkit's wobbly centering

2014-04-21 Thread Tom Livingston 
On Mon, Apr 21, 2014 at 2:12 PM, David Hucklesby  wrote:
> Making a photo gallery, I want to center a row of thumbnails below the main
> photo. My code works well in all browsers *except* for those based on
> Webkit.
> A cut-down version of the code is here:
>
>  
>
> What am I doing wrong?
>
> Any suggestions gratefully accepted. Thank.
> --
> Cordially,
> David
> __

Turning off the word-spacing on .thumbs in Chrome inspector fixed it,
though the space between thumbnails became less. Maybe that will put
you on the right track...


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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] Webkit's wobbly centering

2014-04-21 Thread David Hucklesby 

Making a photo gallery, I want to center a row of thumbnails below the main
photo. My code works well in all browsers *except* for those based on Webkit.
A cut-down version of the code is here:

 

What am I doing wrong?

Any suggestions gratefully accepted. Thank.
--
Cordially,
David
__
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] Sticky Footer Problems

2014-04-21 Thread Jennifer 
Hello,

I've attempted to change our footer to a sticky version, so that on 
shorter pages, it's always at the bottom of the screen. However, I'm having a 
problem with a gap in the content of a short page just above the footer.

Can someone please tell me what I did wrong?  Here's one of the pages 
that shows the problem:

http://www.superiorshelving.com/info/contact-superior-shelving-systems.php#tab-5

Also, if you shrink the window vertically, the footer will cover the 
bottom portion of the Navigation Menu.  How can I prevent that from happening?

I've tried a lot of different solutions, so the CSS may be a little 
messy.  Maybe that's my problem. :(

Thank you!
Jenni

Superior Shelving Systems
The (Storage|Office|Home|Warehouse) Shelving Specialists
Since 1984

Workstation Chairs/Stools:
http://www.superiorshelving.com/mfg/nexel/pages/stools.php

__
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/