CSS not working correctly in external style sheet

[danny_matthews]

1) Script Title: Inverted Shift Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ift-down-menu/

3) Describe problem: the code is perfect when using an internal style sheet but as soon as it is put into an external style sheet the bar that runs across the width of the screen fails to show.

Please help me solve this, its driving me crazy!

Thanks in advance!

Danny.

[Snookerman]

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

[danny_matthews]

Ok here is the css in the external style sheet:

<style type="text/css">

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 50px solid #CC0033;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px; 
background-color: white;

/*adds rounded bottom corners to each menu item.
  ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
  */
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #CC0033; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

.invertedshiftdown .current a{
background-color: #CC0033;
padding-top: 9px; 
padding-bottom: 5px; 
color: white;
}

#myform{
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #000000;
background-color: #CC0033;
color: white;
}

</style>

and here is the code that is calling it:

<link href="externalsheets/external.css" rel="stylesheet" type="text/css" media="all"/>

Thank you for your help!

p.s the code for the element using this css is as follows:

<div class="invertedshiftdown">
<ul>
<li class="current"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="profiles.html" title="Home">Profile</a></li>
<li><a href="contact.html" title="New">Contact</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">About</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Business Plan</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS">SEO</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">finance</a></li>
<li><a href="http://www.dynamicdrive.com" title="Home">Site Map</a></li>
<li><a href="http://www.dynamicdrive.com" title="Home">Sources</a></li>
</ul>

<form id="myform" method="get" action="http://www.google.com/search"/> 
<input type="text" name="q" class="textinput" value=""/> 
<input class="submit" type="submit" value="Search" />
</form>

</div>

[molendijk]

You should not have the style tags in externalsheets/external.css.
===
Arie.

[danny_matthews]

Dont you just hate it when the solution to your problem is something as simple as that?! haha

Anyway iv'e removed the tags and all is well.

Thankyou for pointing that out. (Its because i simply copied the code and shoved it in there)!

Danny.