Dreamweaver - Custom CSS not displaying

Author

Custom CSS not displaying

logoslinger

2006-02-07, 10:45 pm

I have attempted to have two kinds of links and hovers on the home page, but
have been unable to make the "link" color and font work on the headers. The
page is located at: http://www.raglandracing.com The headers in the boxes
entitled: Media, Ragland Racing Blog and New: File Upload should be a white
font with no decoration. The hover of these are working correctly, but as you
can see they are appearing the same font and size as the "a:link" that is also
on the page. Thanks so much for your help as I know I am probably missing
something very easy.

p {
margin: 3px;
padding: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.home_border {
border: 1px solid #000000;
}
body_border {
border: 1px solid #000000;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #990000;
margin-left: 5px;
margin-top: 3px;
}
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #003366;
text-decoration: none;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #003366;
text-decoration: none;
}

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #003366;
text-decoration: underline;
}
.image {
border: thin groove #990000;
}
.homeborder:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.homeborder:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #990000;
margin-left: 3px;
font-style: normal;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #990000;
margin: 6px;

Paul Whitham TMM

2006-02-07, 10:45 pm

Look ok to me in both IE & FF. White heading with underline on rollover.

--
Paul Whitham
Certified Dreamweaver MX2004 Professional
Team Macromedia Volunteer for Dreamweaver

Valleybiz Internet Design
www.valleybiz.net

"logoslinger" <webforumsuser@macromedia.com> wrote in message
news:drlos0$3ea$1@forums.macromedia.com...
>I have attempted to have two kinds of links and hovers on the home page,
>but
> have been unable to make the "link" color and font work on the headers.
> The
> page is located at: http://www.raglandracing.com The headers in the
> boxes
> entitled: Media, Ragland Racing Blog and New: File Upload should be a
> white
> font with no decoration. The hover of these are working correctly, but as
> you
> can see they are appearing the same font and size as the "a:link" that is
> also
> on the page. Thanks so much for your help as I know I am probably missing
> something very easy.
>
> p {
> margin: 3px;
> padding: 3px;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 12px;
> }
> .home_border {
> border: 1px solid #000000;
> }
> body_border {
> border: 1px solid #000000;
> }
> h1 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 16px;
> font-style: normal;
> font-weight: bold;
> font-variant: normal;
> color: #990000;
> margin-left: 5px;
> margin-top: 3px;
> }
> }
> a:visited {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 13px;
> font-style: normal;
> font-weight: bold;
> font-variant: normal;
> color: #003366;
> text-decoration: none;
> }
> a:link {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 13px;
> font-style: normal;
> font-weight: normal;
> color: #003366;
> text-decoration: none;
> }
>
>
> a:hover {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 13px;
> font-style: normal;
> font-weight: bold;
> font-variant: normal;
> color: #003366;
> text-decoration: underline;
> }
> .image {
> border: thin groove #990000;
> }
> .homeborder:link {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 14px;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> }
> .homeborder:hover {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 14px;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: underline;
> }
>
> h2 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: bold;
> color: #990000;
> margin-left: 3px;
> font-style: normal;
> }
> h3 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-style: normal;
> font-weight: normal;
> font-variant: normal;
> color: #990000;
> margin: 6px;
>

Josie1one

2006-02-07, 10:46 pm

change the order of your links. As a wise person said here recently: LoVe HA
(link, visited, hover, active) - see http://mako4css.com/BasLink.htm. Hope
this helps.
Jo

"Paul Whitham TMM" <design@valleybiz.net> wrote in message
news:drlsom$8i6$1@forums.macromedia.com...
> Look ok to me in both IE & FF. White heading with underline on rollover.
>
> --
> Paul Whitham
> Certified Dreamweaver MX2004 Professional
> Team Macromedia Volunteer for Dreamweaver
>
> Valleybiz Internet Design
> www.valleybiz.net
>
> "logoslinger" <webforumsuser@macromedia.com> wrote in message
> news:drlos0$3ea$1@forums.macromedia.com...
>
>

logoslinger

2006-02-07, 11:03 pm

I have updated the CSS and there still seems to be a connection between font
size and the <a> and <p> tags. If one is changed the other will change size
and conversely. I downloaded the Firefox version tonite from the site and it
is 1.5 so should be the most updated version. I am wondering if I am having
some internal problem with javascript on my computer. I have included the new
CSS code and am also including the two URLS which show the font sizes as the
same. Thanks so much for your response and help as it is very much
appreciated.

http://www.raglandracing.com
http://www.raglandracing.com/fanzone.html

p {
margin: 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
}
.home_border {
border: 1px solid #000000;
}
body_border {
border: 1px solid #000000;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #990000;
margin-left: 5px;
margin-top: 15px;
}
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.image {
border: thin groove #990000;
}
a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #990000;
margin-left: 5px;
margin-top: 15px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
}
.homeheader:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.homeheader:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.homeheader:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #990000;
font-weight: normal;
margin: 6px;
}
.boldit {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #990000;
font-weight: bold;
margin: 3px;
}
a:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.homeheader:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}

logoslinger

2006-02-07, 11:03 pm

Thanks so much for your response and help. I changed the order of the links to
that order. Unfortunately I am still having difficulty with the font sizes and
also the problem in FF. It appears that the problem is isolated to javascript
in some areas. a:link is definitely affected, while a:visited displays
correctly. Thank you again for your time and assistance.

logoslinger

2006-02-07, 11:03 pm

Here is the updated CSS

p {
margin: 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
}
.home_border {
border: 1px solid #000000;
}
body_border {
border: 1px solid #000000;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #990000;
margin-left: 5px;
margin-top: 15px;
}
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}

.image {
border: thin groove #990000;
}

}
h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #990000;
margin-left: 5px;
margin-top: 15px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
}
.homeheader:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.homeheader:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.homeheader:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;

}
.homeheader:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #990000;
font-weight: normal;
margin: 6px;
}
.boldit {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #990000;
font-weight: bold;
margin: 3px;
}

Michael Fesser

2006-02-07, 11:03 pm

..oO(logoslinger)

>Thanks so much for your response and help. I changed the order of the links to
>that order. Unfortunately I am still having difficulty with the font sizes and
>also the problem in FF. It appears that the problem is isolated to javascript
>in some areas. a:link is definitely affected, while a:visited displays
>correctly. Thank you again for your time and assistance.

Still not sure what you mean (it looks how I would expect it according
to the given CSS), but two other things:

1) Changing the font-weight on hover is a rather bad idea.
2) Flash buttons are a _really_ bad idea.

Micha

Deon

2006-02-07, 11:03 pm

Michael Fesser wrote:
> .oO(logoslinger)
>
>
>
>
> Still not sure what you mean (it looks how I would expect it according
> to the given CSS), but two other things:
>
> 1) Changing the font-weight on hover is a rather bad idea.
> 2) Flash buttons are a _really_ bad idea.
>
> Micha
Don't you have one to many }

}
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: bold;
color: #003366;
text-decoration: none;
}

Deon

logoslinger

2006-02-07, 11:04 pm

I completely recreated the css and it is now working properly cross-browser
except for one detail:
the <p> font is supposed to be slightly smaller than the <a> font, but they
seem to be the exact same size. When I change the font size in one, the other
changes with it. Very interesting stuff. Thanks so much for the css help, as
it has solved the problem. Attached is the new css that is working perfectly.
One other question: why do you say that flash buttons are a really bad idea?
Thank you.

Michael Fesser

2006-02-07, 11:04 pm

..oO(logoslinger)

>One other question: why do you say that flash buttons are a really bad idea?

Search engines don't follow the links in them and many users will have
problems as well.

This is more or less what a search engine will see from the menu bar:

========================================================================
Ragland Racing: Off Road Trophy Truck Champions (p1 of 3)

[EMBED]

[EMBED]
[EMBED]
[EMBED]
[EMBED]
[EMBED]
[EMBED]
[EMBED]

Sign up for Ragland News and Updates
Email: ____________________ Go

[cd_image.gif]

buy the 2005 Baja 1000 DVD
========================================================================

Micha

Murray *TMM*

2006-02-07, 11:04 pm

Nothing was attached.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"logoslinger" <webforumsuser@macromedia.com> wrote in message
news:ds5ui8$jbk$1@forums.macromedia.com...
>I completely recreated the css and it is now working properly cross-browser
> except for one detail:
> the <p> font is supposed to be slightly smaller than the <a> font, but
> they
> seem to be the exact same size. When I change the font size in one, the
> other
> changes with it. Very interesting stuff. Thanks so much for the css
> help, as
> it has solved the problem. Attached is the new css that is working
> perfectly.
> One other question: why do you say that flash buttons are a really bad
> idea?
> Thank you.
>

logoslinger

2006-02-07, 11:04 pm

Here is the code that was not attached last response.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight: normal;
background-color: #CCCCCC;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
color: #000000;
margin: 6px;
}

.border {
border: 1px solid #333333;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: 700;
color: #990000;
margin: 6px;
padding: 3px;
text-transform: uppercase;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: 500;
color: #990000;
margin: 6px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
color: #990000;
margin: 6px;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.header:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.header:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.header:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
.header:active {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
.boldit {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
color: #990000;
margin: 6px;
}
.image {
border: 1px solid #990000;
}

Murray *TMM*

2006-02-07, 11:05 pm

If your page has a valid and complete doctype, then you have quite a bit of
redundant code in this stylesheet. It could be simplified to the
following -

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight: normal;
background-color: #CCC;
}

p {
font-size: .8em;
color: #000;
margin: 6px;
}

.border {
border: 1px solid #333;
}

h1, h2, h3, {
font-size: 1em;
font-weight: 700;
color: #900;
margin: 6px;
padding: 3px;
text-transform: uppercase;
}

h2 {
font-size: 0.9em;
font-weight: 500;
}

h3 {
font-size: .8em;
font-weight: normal;
}

a{
font-size: 1em;
font-weight: bold;
color: #036;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.header:link {
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

.header:hover {
text-decoration: underline;
}

.header:active {
text-decoration: underline;
}

/* I don't think any of these custom classes are going to work *UNLESS* they
are applied to <a> tags. */

.boldit {

font-size: 0.8em;
color: #900;
margin: 6px;
}

.image {
border: 1px solid #900;
}

Furthermore, depending on the font, you may not see a size difference from
an 0.1 em difference in the style.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"logoslinger" <webforumsuser@macromedia.com> wrote in message
news:ds678r$35$1@forums.macromedia.com...
> Here is the code that was not attached last response.
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 1.0em;
> font-weight: normal;
> background-color: #CCCCCC;
> }
>
> p {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: .8em;
> font-weight: normal;
> color: #000000;
> margin: 6px;
> }
>
> .border {
> border: 1px solid #333333;
> }
>
> h1 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1em;
> font-weight: 700;
> color: #990000;
> margin: 6px;
> padding: 3px;
> text-transform: uppercase;
> }
> h2 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 0.9em;
> font-weight: 500;
> color: #990000;
> margin: 6px;
> }
> h3 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: .8em;
> font-weight: normal;
> color: #990000;
> margin: 6px;
> }
> a:link {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1em;
> font-weight: bold;
> color: #003366;
> text-decoration: none;
> }
> a:visited {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1em;
> font-weight: bold;
> color: #003366;
> text-decoration: none;
> }
> a:hover {
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1em;
> font-weight: bold;
> color: #003366;
> text-decoration: underline;
> }
> a:active {
>
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1em;
> font-weight: bold;
> color: #003366;
> text-decoration: none;
> }
> .header:link {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1.1em;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> }
> .header:visited {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1.1em;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: none;
> }
> .header:hover {
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1.1em;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: underline;
> }
> .header:active {
>
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 1.1em;
> font-weight: bold;
> color: #FFFFFF;
> text-decoration: underline;
> }
> .boldit {
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 0.8em;
> font-weight: normal;
> color: #990000;
> margin: 6px;
> }
> .image {
> border: 1px solid #990000;
> }
>