[css-d] box-shadow don't display on the right side

2011-11-15 Thread mem 
Hello all,

I'm building the following:

http://help.nuvemk.com/floatedFluidLayoutHtml5/
http://help.nuvemk.com/floatedFluidLayoutHtml5/style.css

Line 125 and next I have:

#navigation-and-slideshow {
width: 100%;
overflow: hidden;
background-color: #fff;
padding: 10px 1%;
box-shadow: 1px 1px 3px #999;
}

The right shadow will however appear if I change the width to: 97% or less;

How can I fix this behavior in order to have the shadows properly showed with 
the proper width ?

Tested on FF 7.0.1 Mac Os X;

Thanks a lot,
mem
__
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] box-shadow don't display on the right side

2011-11-15 Thread Tim Arnold 
On Tue, Nov 15, 2011 at 3:15 PM, mem talofo.l...@gmail.com wrote:
 Hello all,

 I'm building the following:

 http://help.nuvemk.com/floatedFluidLayoutHtml5/
 http://help.nuvemk.com/floatedFluidLayoutHtml5/style.css

 Line 125 and next I have:

 #navigation-and-slideshow {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding: 10px 1%;
    box-shadow: 1px 1px 3px #999;
 }

 The right shadow will however appear if I change the width to: 97% or less;

 How can I fix this behavior in order to have the shadows properly showed with 
 the proper width ?

 Tested on FF 7.0.1 Mac Os X;

 Thanks a lot,
 mem


Hey mem,

If the shadow only displays when your container is set to 97% then you
should change the width to 97%.  The shadow is added to the outside of
your container.  If you don't allow enough space around your container
to the right and bottom (in your case) then the containing element
(header will eclipse the shadow.  FWIW, in Chrome 98% seems to work
just fine.

Best,
Tim

-- 

tim.arn...@gmail.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] box-shadow don't display on the right side

2011-11-15 Thread Chris F.A. Johnson 

On Tue, 15 Nov 2011, mem wrote:


Hello all,

I'm building the following:

http://help.nuvemk.com/floatedFluidLayoutHtml5/
http://help.nuvemk.com/floatedFluidLayoutHtml5/style.css

Line 125 and next I have:

#navigation-and-slideshow {
   width: 100%;
   overflow: hidden;
   background-color: #fff;
   padding: 10px 1%;
   box-shadow: 1px 1px 3px #999;
}

The right shadow will however appear if I change the width to: 97% or less;

How can I fix this behavior in order to have the shadows properly showed with 
the proper width ?


   The photo takes up all the width and the shadow is overflow: hidden.

   If the photo is less than 100%, there is room for the shadow.

--
   Chris F.A. Johnson, http://cfajohnson.com/
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
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] box-shadow don't display on the right side

2011-11-15 Thread mem 
 
 Hey men,

Hello, 

Thanks for the reply.

 If the shadow only displays when your container is set to 97% then you
 should change the width to 97%.  

:) In order to keep the alignment with the #top container that had no shadow, 
I had to change is width as well. 

 The shadow is added to the outside of
 your container.  If you don't allow enough space around your container
 to the right and bottom (in your case) then the containing element
 (header will eclipse the shadow.  

So shadows are like: outside the width? I mean, when I say to the container: 
please be 100% I was expecting it to also contain the shadow, but perhaps it 
shouldn't be that way, and I should properly read the box model ? :/

Just as curiosity, will the same be valid for borders ?


 FWIW, in Chrome 98% seems to work
 just fine.
 

Unfortunately not in FF at least this version;


So,

I've defined a width of 97% for the container.
I've defined a width for the head with 99% (with 100  I wouldn't have them 
aligned);
I've changed the margin that was pushing the image to the right to: 1.9% 
instead of 2%;

http://help.nuvemk.com/floatedFluidLayoutHtml5/index_solved.php
http://help.nuvemk.com/floatedFluidLayoutHtml5/style_solved.php


Regards,
mem


__
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] box-shadow don't display on the right side

2011-11-15 Thread Philippe Wittenbergh 

On Nov 16, 2011, at 5:56 AM, mem wrote:

 So shadows are like: outside the width? I mean, when I say to the 
 container: please be 100% I was expecting it to also contain the shadow, but 
 perhaps it shouldn't be that way, and I should properly read the box model ? 
 :/

When you specify a 'width' on a block element, that width means the 'content' 
width.
http://www.w3.org/TR/CSS21/box.html

 
 Just as curiosity, will the same be valid for borders ?

border, padding, outline, box-shadow all fall outside the 'content box'.

aside you may want to add vendor prefixed box-shadow (-webkit-, -moz-) for 
those people who don't run (or can't run) the latest of the latest release of 
browsers. fwiw.

Philippe
--
Philippe Wittenbergh
http://l-c-n.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] box-shadow don't display on the right side

2011-11-15 Thread David Laakso 



On Nov 16, 2011, at 5:56 AM, mem wrote:


So shadows are like: outside the width? I mean, when I say to the container: 
please be 100% I was expecting it to also contain the shadow, but perhaps it shouldn't be 
that way, and I should properly read the box model ? :/






Greetings from Brazil.

Please see http://chelseacreekstudio.com/me.html

Best,
Millagros Ortiz


--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.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/