CSS woes....

[Brightbelt]

Hi -
I'm on FP 2003, Win XP Pro. This is a followup from an former post titled
"CSS hover style happens in Photo Gallery" (by 'Brightbelt' 2 days ago
6/15/05).
I've tried to implement a CSS class (it's named 'gray') as was suggested,
but I'm doing something wrong. Here's the code I'm using: In the head, I've
got....

<style type="text/css">
a:link { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;
font-weight: bold }
a.gray:link { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;
font-weight: bold }
a:visited { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;
font-weight: bold }
a.gray:visited { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;
font-weight: bold }
a:hover { font-family: arial; font-size: 10pt; color:"#00FFFF";
background color:"#C0C0C0"; text- decoration: none;
font-weight: bold }
a.gray:hover { font-family: arial; font-size: 10pt; color:"006699";
background color:"#C0C0C0"}
</style>

And in the body for the link I've got:
<a class="gray" href="index3.htm" target="_blank">HOME</a>

I should mention that MikeR actually suggested this in the body:
<a class="gray" href="index3.htm">HOME</a>
<a href="index3.htm">HOME</a>

But then I get 2 home links, so I don't know what he meant exactly. To be
honest, I'd rather do this with FP's CSS interface, but the only thing MikeR
mentioned was entering the class name into the style window/interface and I
don't really know the full steps to take with that. I do appreciate any
help...Thanks,..Frank

 

[E. T. Culling]

I still think this is your problem:
a.gray:hover { font-family: arial; font-size: 10pt; color:"006699";
background color:"#C0C0C0"}
Eleanor

 

[Murray]

<style type="text/css">
a, a.gray { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;font-weight: bold }
a.gray:link { font-family: arial; font-size: 10pt; color:"#FFFFFF";
text-decoration: none;font-weight: bold }
a:hover { color:"#00FFFF"; background color:"#C0C0C0"; }
a.gray:hover { color:"#006699"; background color:"#C0C0C0"}
</style>

Note -

1. You should use pixels, ems, ens, exs, percent, or font size names rather
than points for a pixel based display. Points are a printed page measure.
2. The color value must be preceded by an octothorpe (#) - this was your
mistake.
3. You do not need to restate those styles that will cascade.

 

[Cheryl D Wise]

To add to Murray's summary should not be using " around your colors:
a, a.gray {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
}

a:hover {
background color: "#C0C0C0";
color: "#00FFFF";
}

a.gray:hover {
background color: #c0c0c0;
color: "#006699";
}

--
Cheryl D. Wise
MS FrontPage MVP
http://mvp.wiserways.com
http://starttoweb.com
Online instructor led web design training - Next Session June 26th

 

[Brightbelt]

Thanks to all for your tutorial(s) and the help. What would be a good
standard font measurement for general 12 pt paragraph-type text ? I have
never implemented any other type measurement, probably because I have no
starting point or sense of what is standard. Thanks,...Frank

 

[MikeR]

Frank -
<a class="gray" href="index3.htm">HOME</a>
<a href="index3.htm">HOME</a>
was to illustrate a link with and without a class. You should of course use one or the
other, not both. Sorry I wasn't clearer.
MikeR

 

[Brightbelt]

Thanks Mike...I sort of figured that, but it does still help to know that
for certain, 'cause I'm still hacking this thing out. I've got things
working a bit better but now, while I do get the color of text I want in all
browsers, Mozilla and Netscape aren't showing any background color on the
mouse hover. Here's what I've got now in the head:

<style type="text/css">
a, a.gray {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
}

a:hover {
color:#006699;
background color: #CCCCCC;
}

a.gray:hover {color: #006699;
background color: #CCCCCC;
}
</style>
And of course, I've got the link with the class designated in the body as
you've shown me. I hope to get this done, and I'm grateful for this CSS
learning. Thanks,...Frank

 

[Cheryl D Wise]

Well there you run into a bit of a problem when it comes to what is roughly
equal to 12pt. type when it comes to the web. In IE the default size is
'medium' or approximately 12.5pts (16px) while Firefox/Mozilla/Safari and I
think Opera as well use a smaller font for 'medium'.

IE will not resize pixels so if you visitor needs a bigger size font to read
neither pixels or points are good (it doesn't resize pts either). 1em or
100% is equal the the font size the visitor has their system set to display
and is usually safe. 12pt would be roughly 95% or .95em.

--
Cheryl D. Wise
MS FrontPage MVP
http://mvp.wiserways.com
http://starttoweb.com
Online instructor led web design training in FrontPage,
Dreamweaver and more!
Next Session June 26th

 

[Murray]

You're going to have to post a link to the page, now. That CSS will
work....

 

[Brightbelt]

Hello Murray - How are you ?
Ok, it's published now at www.frankbright.com/Gallery.htm - See the text
links at the bottom of the page. The links/hovers actually work right in IE,
although the font sizes seems a bit off for 'small'. Mozilla has the font
size better I think, but there's no gray background color on the hover of
the links. Thanks for all your assistance and help here,...Frank

 

[Brightbelt]

Thanks Cheryl for help with the font sizes... Also, a quick note to you and
to Murray - I finally figured out that the dash "-" had been missing from
'background color' in the code ( I had copied and pasted Cheryl's code - see
above) , which is why I didn't get a background color initially. Back to
fonts for a sec: What I'd like to have is roughly equal to .80em. Is it ok
to enter a size like that manually ? I imagine you would have said so if
that were a real option. 1em looks pretty large for bottom-of-the-page text
links to me, but I guess I'm also trying to prevent the text from getting
too small, since many users complain about microscopic fonts on the web etc.
But also... Guess What !!??......................All of this creating a
CSS class from the start was really a means to keep Mozilla and Netscape
from giving me a gray background-bar when moving over thumbnail photo links
with my mouse. (See above and/or see post on 6/15 by 'Brightbelt' titled
"CSS hover style happens in FP Gallery") Now after getting all this CSS
knocked out (I really do appreciate the CSS help and the learning...it
wasn't wasted by any means) , the problem still remains that if you move
over the thumbnail photo links with your mouse in Netscape or Mozilla,
you'll see a gray background bar behind the thumbnails that are meant only
for CSS hover text links. I'm open to new suggestions - I do appreciate all
your time. Thanks,...Frank
www.frankbright.com/Gallery.htm

 

[Thomas A. Rowe]

Frank,

You gallery images... try changing the each image link based on the following example:

From:
<a href="menjohn2.jpg" target="_blank">
<img border="0" vspace="5" hspace="5" src="photogallery/photo11208/menjohn2.jpg" width="66"
height="100" title="John Coliani visits Savannah to play at Hannah's East." align="top"
onclick="spawnJimcoPopup('http://www.frankbright.com/menjohn2...'335','225','center','center','pixel');return
false;" /></a>To:
<img border="0" vspace="5" hspace="5" src="photogallery/photo11208/menjohn2.jpg" width="66"
height="100" title="John Coliani visits Savannah to play at Hannah's East." align="top"
onclick="spawnJimcoPopup('http://www.frankbright.com/menjohn2...'335','225','center','center','pixel');return
false;" /></a>
Question:

Shouldn't the path be the same location for the thumbnail and large version:

photogallery/photo11208/menjohn2.jpg
http://www.frankbright.com/menjohn2.jpg
--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[MikeR]

Frank -
Murray is Mr. CSS, but it looks to me like you have the same colors for the classed hover
and the un-classed ones. Isn't that going to give you the same behavior for both?

a:hover {
background-color:#C0C0C0;
color:#006699;
}

a.gray:hover {
background-color:#C0C0C0;
color:#006699;
}
Try deleting the unclassed (the pictures) one?
MikeR

 

[Cheryl D Wise]

Mike is 100% correct.

a:hover and a.gray:hover need to have different background-color settings.
Or to make things simplier, just remove the backgroundcolor from the a:hover
if you don't want the background to be gray.

a:hover {
color: #006699;
}

As is obvious, I did not look at the color codes. In the original the
a:hover was all uppercase and the a.gray:hover was lowercase so my 'eye'
didn't recognize that they were the same. ;-)

 

[Brightbelt]

Hi-
Yes !! Thanks Mike, Cheryl, Thomas and Murray !! It worked to get rid of
the non-class background color. Thomas, I appreciate your ideas about the
photo links, but since this has fixed the problem, I think it's best not to
go into the gallery code. I actually went into real.htm earlier today just
"to look around" - I didn't change anything - and it ended up messing up the
spawn pop-up code/script/setup somehow. (I had a backup web to pull from
thank goodness)
Thank you all very much for your help. I have learned alot from this.
....Frank

 

[MikeR]

Frank -
Glad it worked out. Next time I zip up the road to Savannah, I'll see if I can hear some
good jazz.
MikeR