Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

Also, the way I have set the width is it likely going to create cross browser issues?

share|improve this question
2  
Could you upload a little screen snippet that clearly shows the effect you are trying to achieve? Pardon my ignorance, but I don't use Twitter, and its difficult to find an example of this. Thanks –  Philip Regan Feb 9 '11 at 21:49
3  
You might be better of posting this at stackoverflow. That said, the box-shadow attribute should have no affect on layout at all. So, there's likely something else going on. We really need to see your entire page (ie, a link) –  DA01 Feb 9 '11 at 23:02
2  
This is not a Graphic Design question. And you probably will have some browsers issues. Especially since you're using a mozilla specific attribute. And it should have no effect on your code. –  Johannes Feb 10 '11 at 4:07
2  
@Philip Regan: I've been reading those metas as well. But this does seem to be directly related to code. And while I agree that the scope of this site should increase, to take topics directly covered on other SEs would just make finding answers, overall, more difficult, don't you think? –  Johannes Feb 10 '11 at 14:55
3  
I'm going to suggest that we move the discussion on whether or not this is on topic to the meta site. I've already opened a question, see meta.graphicdesign.stackexchange.com/questions/99/… –  PearsonArtPhoto Feb 10 '11 at 20:10

2 Answers 2

up vote 3 down vote accepted

There is a known bug with box-shadow in some browsers which has been documented but not resolved yet.

For cross compatible CSS code (not sure it'll validate with the vendor prefixes) use this:

.shadow {
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }

You could forgo all this and just use a BG image, 25px wide and whatever you want tall, with the drop shadow as you want. Save it as a 24bit PNG and it will render as pretty as you see in Photoshop.

As an aside, questions about CSS/HTML should go on Stackoverflow.com and not here, this is a site for Graphic Design. Questions about website design should go on Doctype.com.

Hope some of this helps :)

share|improve this answer

The width:101.3% will probably not cause cross browser issues, but it will cause your page to always show vertical scrollbar.

What will cause cross browser issues is the -moz-box-shadow effect, which is Firefox specific. See Kyle Sevenoaks' answer for how to support all browsers with the shadow effect.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.