Website Design Forum - Need help with CSS

Author

Need help with CSS

dreamspinner3

2007-03-12, 7:24 pm

I created a website using a CSS template set I bought, the site is
http://www.parrotnanniesmn.com/. The problem is that the hyperlinks
within the website are NOT underlined, and I want them to be. I have
tried to figure out how to fix the problem myself and I can't. Can
anyone help me? This is the code for the styles.css sheet:

html, body {
color:#000000;
font: 10pt Verdana, Arial, sans-serif;
margin: 0px;
scrollbar-base-color:#8C2C22;

}

..header {
background-color:#FE9B84;
color: #000000;
border: 1px solid #DF7C69;
color: #8C2C22;
font-weight: bold;

}

table {
color: #979797;
font-size: 10pt;

}

ul, ol {
color: #C4C4C4;
line-height: 150%;
font-size: 10pt;
text-align: left;

}

ol {
list-style-image: url('none');
list-style-type: decimal;

}

ul, li {
color: #C4C4C4;
list-style-image: url('images/bullet.gif');
font-size: 10pt;
text-align: left;
margin-right: 10px;

}

h1 {
font-size: 16pt;
color: #C4C4C4;
text-align: center;
background-image: url('images/h1.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%

}

h2 {
font-size: 14pt;
color: #3C0606;
text-align: left;
background-image: url('images/h2.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%

}

h3 {
font-size: 12pt;
color: #3C0606;
text-align: left;
background-image: url('images/h3.gif');
padding: 2px;
border: 1px solid #2F0404;
width: 92%

}

a:link {
text-decoration:underline;
color: #DFC16F;
background-color:transparent;

}

a:visited {
text-decoration:underline;
color: #DFC16F;
background-color: transparent;

}

a:hover {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;

}

a:active {
text-decoration: none;
color: #3C0606;
background-color: #DFC16F;

}

#LeftNav {
color: #979797;
font: bold 10pt Verdana, Arial, sans-serif;
text-align: right;
vertical-align: top;
margin-left: 3px;

}

#LeftNav p{
color: #FFFFFF;
font: bold 10pt Verdana, Arial, sans-serif;
margin-left: 3px;

}

#LeftNav a:link {
color: #FFFFFF;
display: block;
background-color: transparent;
text-decoration: none;
text-align: center;
background-image: url('images/butt1.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:visited {
color: #FDE7AF;
display: block;
background-color: transparent;
text-decoration: none;
text-align: center;
background-image: url('images/butt3.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:hover {
color: #AD0000;
display: block;
text-decoration: none;
text-align: center;
background-image: url('images/butt2.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

#LeftNav a:active {
color: #FFFFFF;
display: block;
text-decoration: none;
text-align: center;
background-image: url('images/buthov.gif');
width: 140px;
height: 22px;
margin-left: 3px;
padding-top: 3px;

}

..main {
font-family: verdana;
font-size:10pt;
background-color: #FE9B84;
color: #8C2C22;
text-align: justify;
line-height: 20px;
vertical-align: top;
padding: 20px;
width: 100%;
border: 1px solid #DF7C69;

}

..Copyright {
text-decoration: none;
color: #8C2C22;
background-color: #711E28;

Els

2007-03-12, 7:24 pm

dreamspinner3 wrote:

> I created a website using a CSS template set I bought, the site is
> http://www.parrotnanniesmn.com/. The problem is that the hyperlinks
> within the website are NOT underlined, and I want them to be. I have
> tried to figure out how to fix the problem myself and I can't. Can
> anyone help me? This is the code for the styles.css sheet:

[snip code]

I don't know why you are showing the contents of "styles.css", while
the site doesn't even use that stylesheet?
The only page I can find links on (Link Partners), uses
"brownmenu.css".
In that stylesheet, on line 39, sits this code:
a {
color:#5B3815;
font-weight:bold;
text-decoration:none;
}
Change that last line to textdecoration:underline; and there's your
underlined links.

Be aware that on several pages there are underlined words that aren't
links, this is very confusing. It's best to take off the underlining
from those words, to avoid annoying your visitors.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

dreamspinner3

2007-03-12, 7:24 pm

On Mar 12, 2:43 pm, Els <els.aNOS...@tiscali.nl> wrote:
> dreamspinner3 wrote:
>
> [snip code]
>
> I don't know why you are showing the contents of "styles.css", while
> the site doesn't even use that stylesheet?
> The only page I can find links on (Link Partners), uses
> "brownmenu.css".
> In that stylesheet, on line 39, sits this code:
> a {
> color:#5B3815;
> font-weight:bold;
> text-decoration:none;}
>
> Change that last line to textdecoration:underline; and there's your
> underlined links.
>
> Be aware that on several pages there are underlined words that aren't
> links, this is very confusing. It's best to take off the underlining
> from those words, to avoid annoying your visitors.
>
> --
> Els http://locusmeus.com/
> accessible web design: http://locusoptimus.com/

Oh thank you for your help! I'm new at using CCS but not to using
FrontPage and I just couldn't figure out what the problem was!

Jukka K. Korpela

2007-03-12, 7:24 pm

Scripsit dreamspinner3:

> I created a website using a CSS template set I bought, the site is
> http://www.parrotnanniesmn.com/.

The style sheet has lots of technical flaws, but the visual impression is
not too bad, to those visitors who can bear with the fixed font sizes.

> The problem is that the hyperlinks
> within the website are NOT underlined, and I want them to be. I have
> tried to figure out how to fix the problem myself and I can't.

This is easy: just remove the declarations that remove the default
underlining, with text-decoration: none.

I cannot find out how the site refers to the style sheet you pasted, so I
removed my analysis of that style sheet. Generally, it does not pay off to
paste a style sheet into the question, especially since people often paste
the _wrong_ style sheet.

Your pages seem to use two style sheets
http://www.parrotnanniesmn.com/brownmenu.css
http://www.parrotnanniesmn.com/toplight.css
and they are a bit messy, so it may take some time to find out how to make
the links underlined. Do you want to make _all_ links underlined, including
navigation bars? I think that's a good idea, but many people don't want
that.

Maybe you just want to edit the brownmenu.css file (which has an odd name,
since it contains general rules too), removing the "text-decoration: none;"
part from
a{font-weight: bold; color: #5B3815; text-decoration: none;}

This should make normal links inside text underlined, as by default in most
browsers. You could of course be more explicit and change "none" to
"underline".

P.S. The group comp.infosystems.www.authoring.stylesheets is specifically
about style sheets and therefore more suited for style sheet questions.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/