Hi all,
I've implemented a menu for smaller screens ( 584px and smaller ):
Works quite well. (any comments welcome)
But....
Only thing is that i can't get the menu "button" looking the same on
Android (4.2.2). and my browsers (safari/firefox/chrome) on mac os x.
That is, using the same css, the white lines inside the menu button do
not center very nice on both devices.
This styling looks good on android:
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 6px;
/* background: #fff; */
top: 10px;
left: 16%;
border-top: 1.250em double #fff;
border-bottom: .375em solid #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
And this styling looks good on safari/firefox/chrome (mac os x):
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 6px;
/* background: #fff; */
top: 10px;
left: 16%;
border-top: 1.375em double #fff;
border-bottom: .5em solid #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
The difference is in the border settings.
css:
http://beta.utrechtsyogacentrum.nl/style/responsivemenu/component.css
page:
http://beta.utrechtsyogacentrum.nl/index.php
On other websites i see that it is possible to get the menu button
looking the same both on android and desktop browsers.
I am staring to long at this code (and testing different markup and css).
So i'am very curious how i can get them to look the same.
All comments are welcome.
Thanks, Erik
PS Box-shadow does not seem to work well on android. That is not on my
samsung galaxy with android 4.2.2.
______________________________________________________________________
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/
