Applying class to design element via external style sheet

[toroandbruin]

I've used external style sheets successfully EXCEPT for creating classes to apply to specific design elements. Sometimes it works; sometimes it doesn't; and sometimes only part of the CSS in the class works. Sometimes the style (or part of the style) in the class applies itself to ALL the rest of the page, not just to the design element it is meant for. There seems to be no rhyme nor reason.

I've uploaded a simple illustration of this in a directory at my Website. To see it go to http://www.wall-street.com/experiment/

What is going wrong? Ideas?

[drummin]

Hi toroandbruin,

Without fully looking into the problem, I notice that when you call up your "class" in your body section you're adding ".css". Remove the ".css" from each class tag you have as in...

<P class="regular">
<A HREF="http://www.wall-street.com">
This is sentence one with regular style. Font, Serif. Underlined.</A>
</P>


<P class="button">
<A HREF="http://www.wall-street.com">
This is sentence two with button style. SansSerif font. No underline.
</P>

This should fix problem.
Drummin

[drummin]

toroandbruin,
You should also concider using only one css file.
Call it what you want and add...

.button A{ text-decoration: none; font-family: Arial, Helvetica, Sanserif;}
.button A:link{ text-decoration: none; font-family: Arial, Helvetica, Sanserif;}
.button A:visited{ text-decoration: none; font-family: Arial, Helvetica, Sanserif;}
.button A:active{ text-decoration: none; font-family: Arial, Helvetica, Sanserif;}
.button A:hover{ text-decoration: none; font-family: Arial, Helvetica, Sanserif;}
.regular A{ text-decoration: underline; font-family: Times, Times New Roman, Serif;}
.regular A:link{ text-decoration: underline; font-family: Times, Times New Roman, Serif;}
.regular A:visited{ text-decoration: underline; font-family: Times, Times New Roman, Serif;}
.regular A:active{ text-decoration: underline; font-family: Times, Times New Roman, Serif;}
.regular A:hover{ text-decoration: underline; font-family: Times, Times New Roman, Serif;}

I kept things on different lines as I assume you will want to change "hover mode" for example once you figure this out.

Hope that helps.
Drummin

[toroandbruin]

Many thanks on the suggestions. I eliminated the extraneous ".css" after CLASS=..." and, although that did not make any immediate difference I'm sure the error would have come back to haunt me later.

Next, I can see from your example that on the external style sheet it is not enough to add the name of the class just once (at the top of the sheet). Even if the sheet is dedicated to just one class I need to add the name of the class before each style description. In other words:

INCORRECT:
.button
A:link, A:visited, A:active, A:hover { text-decoration: none }
A {font-family: Arial, Helvetica, Sanserif;}

CORRECT:
.button A:link, A:visited, A:active, A:hover { text-decoration: none }
.button A {font-family: Arial, Helvetica, Sanserif;}

And now that I have that figured out I have managed to combine them successfully on one style sheet. There are still a few quirks to figure out. For example, at the "real" prototype Website the combined style sheet has first the overall style for the page (with no class assigned), then the .button style, then the .regular style. The .regular style is basically the same as the overall (no class) style. I need the .regular style because, although the non-button parts of the page keep their Serif font OK, the general links on the page become non-underlined (adopting the .button style for text-decoration) unless I specifically assign the .regular style to them. You can see the example athttp://www.wall-street.com/SunRiverEnergy/ir.html

[drummin]

Be sure to get rid of extra links and copies found in head section to style sheets.

<LINK REL=StyleSheet HREF="sunriverstyle.css" TYPE="text/css">
<LINK REL=STYLESHEET HREF="buttonstyle.css" TYPE="text/css">
You also have extra html, head and title tags so remove those as well. Also, each of your <LI> tags should have a closing tag...</LI>, so add those.

Did you have a question???
I wasn't sure from your last post.
Drummin

[drummin]

I think you will find that if you remove the extra links in your head section you won't need to assign the "regular" class for links in your body section.
Your general "A" styles will take care of those.

[toroandbruin]

Thanks again! You're right -- that worked. I should have looked for something simple like messed-up HTML with code left over from earlier drafts.

Is everybody using </LI> these days? That used to be "wrong" while </P> was always OK (though not necessary). Oddly, I've always used </P> and, when CSS and Javascript came along, was really glad I'd done so. There are things you can do with text inside a block that you can't do without a closing tag.

[drummin]

Hey toroandbruin,

You might want to move more of your styling into your css. You'd end up something like this...
Try FIRST in seperate files before changing your site!

I however don't think this menu (or the one you alreasy have) will perform well across browsers OR validate.
I suggest you look at some css menu options found at this site or a full layout.
http://www.cssplay.co.uk/menus/index.html


CSS:

@charset "utf-8";
body {
font-family : Arial, Helvetica, Sanserif;
}
H1, H2, H3 {
font-family : Arial, Helvetica, Sanserif;
color : #333399;
}
A:link {
color : #0000ff;
text-decoration : underline;
}
A:visited {
color : #0000ff;
text-decoration : underline;
}
A:active {
color : #ff6600;
text-decoration : underline;
}
A:hover {
color : #ff6600;
text-decoration : underline;
}
.button A {
text-decoration : none;
font-family : Arial, Helvetica, Sanserif;
font-weight : bold;
font-size : 9pt;
line-height : 13pt;
}
.button A:link {
text-decoration : none;
font-family : Arial, Helvetica, Sanserif;
font-weight : bold;
font-size : 9pt;
line-height : 13pt;
}
.button A:visited {
text-decoration : none;
font-family : Arial, Helvetica, Sanserif;
font-weight : bold;
font-size : 9pt;
line-height : 13pt;
}
.button A:active {
text-decoration : none;
font-family : Arial, Helvetica, Sanserif;
font-weight : bold;
font-size : 9pt;
line-height : 13pt;
}
.button A:hover {
text-decoration : none;
font-family : Arial, Helvetica, Sanserif;
font-weight : bold;
font-size : 9pt;
line-height : 13pt;
}
.button A {
border-top : outset #55bbff;
border-right : outset #55bbff;
border-bottom : outset #55bbff;
border-left : outset #55bbff;
border-top-width : 4px;
border-right-width : 4px;
border-bottom-width : 4px;
border-left-width : 4px;
padding-left : 12px;
padding-right : 12px;
width : 80px;
height : 25px;
}
.button A:hover {
background-color : #eee8bb;
border-color : #6633cc;
border-style : inset;
}
.menu {
border-top: outset #55BBFF;
border-right: outset #55BBFF;
border-bottom: outset #55BBFF;
border-left: outset #55BBFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background: #F6F6FF;
height : 25px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}


<HTML>
<HEAD>
<TITLE>Sun River Energy, Inc. -- Investor Relations</TITLE>
<LINK REL=StyleSheet HREF="sunriverstyle.css" TYPE="text/css"><HTML>
</HEAD>
<BODY>
<DIV ALIGN="CENTER" VALIGN="middle">
<TABLE CELLPADDING="0" CELLSPACING="0" CLASS="menu">
<TR ALIGN="CENTER">
<TD CLASS="button">HOME</TD>
<TD CLASS="button">OPERATIONS</TD>
<TD CLASS="button">ABOUTUS</TD>
<TD CLASS="button">INVESTORRELATIONS</TD>
<TD CLASS="button">NEWS</TD>
<TD CLASS="button">CONTACTUS</TD>
</TR>
</TABLE>
</DIV>
<H2 ALIGN="CENTER">Investor Relations</H2>



In 2006 the company is going public in a reverse merger with Dynadapt System, Inc. (OTCBB: DYDP).
</P>


Based in Arvada, Colorado, Dynadapt was organized in 1998 for the purpose of Internet Acquisitions. Once the merger is complete, the name of the merged company will change to Sun River Energy, Inc. and the ticker symbol will be changed to reflect the new company name.
</P>


The President of Dynadapt, Wesley Whiting, has been involved for many years with small public and private companies. He has successfully helped inactive companies to accomplish reverse mergers with going concerns.
</P>


Among his other accomplishments Mr. Whiting has been:</P>
<UL>
<LI>Director of Life USA, Inc., a publicly-traded health and nutrition company (OTCBB: LFUI) based in Boulder, Colorado.
<LI>President, Director, and Secretary of Berge Exploration, Inc. (1978-88), and President of Westwind Production, Inc. (1997-1998) both oil and gas exploration companies.
<LI>President, Vice President, and Director of NELX, Inc. (1994-1998), engaged in real estate development.
<LI>Director of Kimbell deCar Corporation from 1998 until 2000. The company ultimately became The Fashion House, Inc., via a reverse merger.
<LI>President and Director of Business Exchange Holding Corp. and Acquisition Lending, Inc. (2000 to 2002), both private holding companies for stock investments.
<LI>President of Premium Enterprises, Inc. (now eTotalSource, Inc. OTCBB:ETLS) October, 2002 to December 30, 2002 and Director to June 2003. Premium Enterprises was engaged in the "text to multimedia conversion" business and is now a leading provider of multimedia software and production/post-production services focused on the distance learning and corporate training markets.[/list]<P ALIGN="CENTER"><A HREF="http://www.sec.gov/cgi-bin/browse-edgar?company=dynadapt&CIK=&filenum=&State=&SIC=&o wner=include&action=getcompany">
See the merger progress via reports at EDGAR.</A></P>
</BODY>
</HTML>

[toroandbruin]

The menus at that CSSstyles site are great! I'll probably borrow some of them for my own use. Yes, the ultimate objective is to get the entire style for the buttons into one or more external css files. I might do one file for the text and another for the borders and backgrounds, just so it is easier to mix and match.

In addition to cross-platform headaches, I have another problem these days. There is a trend toward browser security settings being set to block all Javascript. That means a lot of things I'd set up before no longer work for some viewers. I'm trying to convert over to all-CSS whenever possible.

Thanks again for the help and hints.