PDA

View Full Version : Resolved CSS not working correctly in external style sheet



danny_matthews
04-11-2009, 05:48 PM
1) Script Title: Inverted Shift Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/inverted-shift-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
04-11-2009, 06:30 PM
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
04-11-2009, 06:36 PM
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
04-11-2009, 09:13 PM
You should not have the style tags in externalsheets/external.css.
===
Arie.

danny_matthews
04-12-2009, 04:07 PM
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.