box shadow
 

Hi,
I used a box shadow on my Montezuma website, and it works nicely on mac osx and safari. On chrome it doesn't show at all, on pc and firefox kind of, but the menu and widgets are sticking out on the right, and on an iPad there is no shadow (and the tagline disappears and the breadcrumbs are not covering the complete width). The code I use in the MO content.css is

body {
margin: 40px 200px 40px 200px;
padding: 20px 0 0 0;
...
background: #ffffff;
box-shadow: 0 0 60px #ccc;
-moz-box-shadow: 0 0 60px #ccc;
}

I'm afraid I also messed up on the margin, since on small screens the site is only half visible on the right side. Should I maybe use a different grid then the responsive 960px margin 0?

For a moment I thought I had it nailed, but seeing the site on other screens and devices makes me feel quite lost again...
I'll keep trying, but I'd also appreciate any support very much.
Thanks,
Ilke

Okay, that wasn't very smart. I put the box-shadow into the MO content.css right under border box

.row, .lw {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
o-box-sizing: content-box;
box-shadow: 0 0 60px #ccc;
-moz-box-shadow: 0 0 60px #ccc;
}

and that works fine on all browsers.
I still have to tackle the problem of the breadcrumbs and the footer having a shadow, too, but it's a lot better.

I also know that the margins I chose are completely wrong. I want to the site to have a fixed width, at least flexible to a certain point only. But of course I don't want a margin of 200px on a small screen. So I'll be at it some more.

Okay, I am giving up for now.
I want the page to be 960px wide. Now the header is aligned left, the content is in the center, the footer also, but broader, and the breadcrumbs as well as some horizontal lines cover the entire width of the screen except for the 20px padding.

The unwanted box-shadow on top of the breadcrumbs and the footer have become minor problems, although I'd like them gone, too.

Can anybody tell me what I need to do (yes, learn more about css is part of that)?

BTW, the site can be found here: www.tastenfischer.de

Yep, you have a mess.

The way I learned css layout was by giving various divs different background colors. Remember, the background color will cover all the padding, but not the margins; margins will keep the bg color of the parent element. Try that and you may get some aha's.

Also, did you validate your css and html? That's always a good place to start.

Yes, I use the background colors, too, to find out which part I am working on. I'll start off with an older, less messy, saved version. Good to know that the margins don't get any bg color, I'd been wondering.
Thanks.

you might want to re-read the section mto->Editing CSS->box-sizing: border-box