Why does regular style override mobile style for text shadow

Question

I have the following HTML DIV:

<div class="sliderCaptionHeader">Be Smart. Eat Smart.</div>

The following CSS stylesheet call:

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">

<!-- mobile stylesheets
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>-->

<link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/defaultStyle_mobile.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/captionStyle_mobile.css" />

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->

This is the style for captionStyle.css :

.sliderCaptionHeader {
    font-family: 'kronikaregular';
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 55px;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 60px;
    color: #BD2316;
    text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}

This is the style for captionStyle_mobile.css :

.sliderCaptionHeader {
    font-family: 'kronikaregular';
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 75px;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 70px;
    color: #BD2316;
    /*text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;*/
}

When I run it in a mobile browser emulator ( http://www.responsinator.com/ ) and inspect the element, I am presented with the following:

As you can see the text-shadow is being used from the default style and not being overridden by the mobile style.

Why is that happening and is there any way to fix it? Or do I have to create a complete new DIV and hide in the default style and display in mobile style?

Answer 1

Using /* */ doesn't actually set it to empty on the browser side, it just sees it as a commented line within the CSS and uses what has been actually set elsewhere.

Change the commented out line to this

text-shadow: none;