Interesting border-box, smarter too, took them long enough I suppose I
should just use box-sizing instead !
Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:54 PM
crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>
Why is it adding 4px for left and right ? I'm reading up on
box-sizing,
I don't see the benefit ?
Without setting box-xizing to border-box, the box model is additive
(except in older IE, ironically) which is kinda wrong/bad. 300px box
plus 10px padding and 2px border becomes 324px wide.
Setting box-sizing: border-box does not become additive. Padding and
border are subtracted from the 300px.
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 20, 2014 9:46 PM
Why is it adding 4px for left and right ? I'm reading up on
box-sizing, I don't see the benefit ?
Christopher
Russ McMullin <mailto:r...@catjuggling.com>
Thursday, November 20, 2014 9:21 PM
I suspect the scroll bar is from telling #menupanel to be 320px, plus
a border of 2px, which would make it 324px wide, unless you are using
box-sizing:border-box;. That is where I would start looking.
Russ
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, November 20, 2014 9:13 PM
Chris code works better, although there remains a horizontal scroll
bar, maybe that is due to the fact I'm narrowing the browser window
too much, a little beyond the min-320px.
Tom your code when I scale the browser window there is a jump or gap.
What I mean is, the media querie is kicking in before the 320px is
reached.
Christopher
Chris Rockwell <mailto:ch...@chrisrockwell.com>
Thursday, November 20, 2014 8:50 PM
Using a media query doesn't contribute to specificity, so your code
would work if you moved the declaration that sets the color to gray
above the media query.
If you wanted to get all "mobile first" on it, you could do:
#menupanel { background-color: red }
@media (min-width: 321px) { #menupanel { background-color: gray; } }
Chris Rockwell
______________________________________________________________________
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/
