I have the following CSS code:
ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}
And this is the CSS code for media queries:
@media only screen and (max-width : 500px) {
.ui-tabs .ui-tabs-nav .ui-tabs-anchor
{
float: left;
background-color:red;
padding: 0;
text-decoration: none;
}
}
The padding in the media query doesn't seem to work as expected. The div still retains the previous padding value, although the background color changes to red. Why does the padding remain at the old value?
Edit
This is how it appears in normal size:
This is how it looks when the window size changes:
This is the appearance after removing the padding using the browser tools:
HTML
<img src="Styles/purpleLogo.gif" style="float:left;"/>
<div id="newUpContainer" style="width: 100%; float: left;">
<div id="onlineBookingDiv" style="float: right; width: 49%; padding-bottom: 10px;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Today</a></li>
<li><a href="#tabs-2">Tomorrow</a></li>
<li><a href="#tabs-3">Any Date</a></li>
<li style="float: right; position: relative; right:2px">
<label >
<asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
<asp:ListItem Value="1">Breakfast</asp:ListItem>
<asp:ListItem Value="2">Lunch</asp:ListItem>
<asp:ListItem Value="3">Dinner</asp:ListItem>
</asp:DropDownList>
</label>
</li>
</ul>
Edit2
HTML from Firefox page source:
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Today</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Tomorrow</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Any Date</a></li>
<li style="float: right; position: relative; right:2px">
<label>
<select name="ctl00$MainContent$mealTimeSelector" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$mealTimeSelector\',\'\')', 0)" id="MainContent_mealTimeSelector">
<option selected="selected" value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</label>
</li>
</ul>