6

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?

Improve this question
12
  • 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, 2011 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, 2011 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.
    – Hanna
    Feb 10, 2011 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?
    – Hanna
    Feb 10, 2011 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, 2011 at 20:10

2 Answers 2

Reset to default
4

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 :)

Improve this answer
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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