Strange Display Artifacts when using Media Query in CSS - html

Question

I am testing a pages CSS by wrapping it in a media query.
#media screen and (min-width: 1200px)
If I don't wrap the CSS in the media query everything looks fine. If I do wrap it, 99% looks fine, but on some of my list items the formatting gets weird. Little dots appear as if I had set a list style, but I didn't. If I mouse over the li, the formatting clears up.
This doesn't happen if I don't add the media query. I'm trying to work formatting for a large and small screen, and am trying to get the large screen portion operational.
Here is a snippet of the code. I set it to use a min width of 600, since that was what would work in JFiddle. If you run this code as is, and then hover over the Sports, you'll notice some weird artifacts on the tabs. Move the cursor and the artifacts disappear. If you remove the encapsulating #media query the artifacts don't appear at all.
#media screen and (min-width: 600px) {
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5"Helvetica Neue", helvetica, arial, sans-serif;
background: #FFF;
margin: 15px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
border: 0;
}
#navigation {
width: auto;
margin: 0;
padding: 0;
border: 0;
clear: both;
}
#column_l {
position: relative;
float: left;
}
#column_r {
float: left;
}
#footer {
width: auto;
clear: both;
overflow: auto;
}
.float_right {
float: right;
}
article {
width: 100%;
margin: 0 auto;
background: #0047FF;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
article P {
background: #0047FF;
}
img {
max-width: 100%;
max-height: 100%;
}
section {
clear: left;
}
#main_content {
padding: 60px;
}
p {
margin: 15px 0;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 98%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
left: 20px;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
}
/* Styles for Masthead */
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon */
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/*Menu Color Classes*/
.green {
background: #6AA63B;
}
.yellow {
background: #FFFF00;
}
.red {
background: #CC6666;
}
.purple {
background: #CC99FF;
}
.siteblue {
background: #0047FF;
}
.blue {
background: #0292C0;
}
.purplered {
background: #66FFFF;
}
.yellowgreen {
background: #99FF33;
}
.orange {
background: #FF9900;
}
.bluegrey {
background: #669999;
}
/**
* horizontal navigation (SO)
*/
/* Targeting both first and second level menus */
#nav {
position: relative;
font-size: 13px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
padding: 8px 6px;
text-decoration: none;
}
#nav li a:hover {
background-color: red;
color: #FFF;
opacity: 1;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
/* Targeting the first level menu */
#nav {
top: 158px;
min-width: 100%;
display: block;
height: 36px;
z-index: 1000;
position: absolute;
color: black;
background: url('images/sscbanner.png') 50% 50%;
}
#nav > li > a {} #nav a {
color: black;
}
/*added by me */
#nav li:hover {
background-color: red;
color: #FFF;
opacity: 1;
}
/*added by me */
#nav li {
max-width: 150px;
background-color: #CCCCCC;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
list-style: none;
/*-webkit-border-radius: 30px 30px 0px 0px;
border-radius: 30px 30px 0px 0px;*/
border-left: 2px dotted black;
}
/* Targeting the second level menu */
#nav li ul {
color: black;
display: none;
position: absolute;
min-width: 100%;
background-color: #0047FF;
}
#nav li ul li {
display: inline;
/*added by me
line-height: 50px;*/
margin: 0;
padding: 10px 4px 0 4px;
color: black;
height: 50px;
text-align: center;
max-width: 150px;
background-color: #CCCCCC;
border-left: 2px dotted black;
list-style: none;
}
/*this is hitting all of the a elements */
#nav li ul li a {
border: none;
/*line-height: 50px;*/
margin: 0;
padding: 0 4px 0 4px;
color: black;
}
#nav li ul li a:hover {
background-color: red;
color: #FFF;
opacity: 1;
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
/* Third level menu */
#nav li ul li ul {
top: 0;
min-width: 100%;
}
ul.child {
background-color: #FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float: left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left: 0;
top: 34px;
display: inline;
position: absolute;
text-align: left;
}
/*added by me */
#nav ul > li:hover > ul.child {
left: 0;
top: 50px;
display: inline;
position: absolute;
text-align: left;
}
#nav li:hover > ul.grandchild {
display: block;
}
.linktable {
border-spacing: 0;
table-layout: fixed;
border: thick;
border-style: solid;
}
#nav .linkul {
width: 500px;
}
#nav .linkrow {
height: 50px;
}
#nav .linkcell {
padding: 0px;
border: thin;
border-style: solid;
margin: 0px;
font-size: 12px;
width: 100px;
background-color: #FFFF66;
text-align: center;
}
#nav .nonlinkcell {
padding: 0px;
border: thin;
border-style: solid;
margin: 0px;
font-size: 12px;
width: 100px;
text-align: center;
}
#nav .tablelink {
padding: 0px 0px 0px 0px;
margin: 0px;
font-size: 12px;
text-align: center;
background-color: #FFFF66;
line-height: inherit
}
#nav li ul li ul table tr td {
line-height: 12px;
}
#nav li ul li ul table tr td a:hover {
background-color: #FFFF66;
color: red;
opacity: 1;
}
#nav ul li:first-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li ul li:first-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li:last-of-type {
-webkit-border-top-left-radius: 30px 15px;
border-top-left-radius: 30px 15px;
-webkit-border-top-right-radius: 30px 15px;
border-top-right-radius: 30px 15px;
}
#nav ul li:first-of-type {
border-left: none;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:mso="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>My Testing Page Issue</title>
<meta name="author" content="Me" />
<style>
</style>
<script type="text/javascript">
</script>
<meta name="processowner" content="Me" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="container">
<article onclick="">
<ul id="nav">
<li><a id="close" href="" onclick="showiframe(this.id); return false;">Fruit</a>
<ul class="child">
<li>
<a id="fruit" href="" onclick="showiframe(this.id); return false;">
<br />About</a>
</li>
<li>Oranges</li>
<li>
<br />Grapes</li>
<li>
<br />Apples</li>
<li>
<br />Bananas</li>
<li>
<br />Pears</li>
</ul>
</li>
<li><a id="close0" href="" onclick="showiframe(this.id); return false;">Sports</a>
<ul class="child">
<li>
<a id="sports" href="" onclick="showiframe(this.id); return false;">
<br />About</a>
</li>
<li>
<br />Hockey</li>
<li>Professional
<br />Soccer</li>
<li>Professional <br /> Football
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="linkcell blue">Miami Dolphins
</td>
</tr>
</table>
</ul>
</li>
<li>
<br />Tennis</li>
<li>
<a href="#">
<br />Bowling</a>
</li>
<li>
<a href="#">
<br />NASCAR</a>
</li>
<li>
<a href="#">
<br />Swimming</a>
</li>
<li>
<a href="#">
<br />Fishing</a>
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="linkcell blue">Fly Fishing
</td>
</tr>
</table>
</ul>
</li>
<li>Olympics
</li>
<li>Baseball
<ul class="child">
<table class="linktable blue">
<tr class="linkrow blue">
<td class="nonlinkcell blue">NY Mets</td>
<td class="linkcell blue"><a class="tablelink" href="">Boston Redsox</a>
</td>
<td class="nonlinkcell blue">Los Angeles Dodgers</td>
<td class="nonlinkcell blue">New York Yankees</td>
<td class="linkcell blue"><a class="tablelink" href="">San Diego Padres</a>
</td>
<td class="linkcell blue"><a class="tablelink" href="">Cincinatti Reds</a>
</td>
<td class="linkcell blue"><a class="tablelink" href="">San Francisco Giants</a>
</td>
<td class="nonlinkcell blue"></td>
<td class="nonlinkcell blue"></td>
<td class="nonlinkcell blue"></td>
</tr>
</table>
</ul>
</li>
</ul>
</li>
</ul>
</article>
</div>
</body>
</html>