CSS hover style happens in FP Gallery...

[Brightbelt]

Hello -
I'm on FP 2003, Win XP Pro. My problem is that a CSS hover style is somehow
transferring into my Photo Gallery when browsing the gallery page with
Netscape and Mozilla browsers (this does NOT happen in IE, though it may
happen in Firefox and Opera as well - I just don't have those browsers).
Here's my set-up specifics: I have an external style sheet in which I
have a background color (light gray) working as a hover style for text
links. This external style sheet also works with my main template, so it's
connected with all my web pages in general.
When one browses and does a mouseover on a thumbnail photo in my photo
gallery (remember this happens in Netscape and Mozilla), one sees a gray
rectangular background bar behind the photo !! Very strange.
Also, you should know that I have used the Jimco Spawn pop-up add-in for
the photo gallery, in order to have the enlarged photo appear in its own
uniquely sized window etc. I tend to think this didn't happen before I
applied the Spawn add-in, though I can't say for certain.
I hope someone can help sort out this problem. Please know that I'm not a
coder really. I did the CSS thru FP 2003's menu interface etc. Thanks for
any help,...Frank
See the photo gallery page at www.frankbright.com/Gallery.htm

 

[E. T. Culling]

What are your CSS properties for images?
Eleanor

 

[Brightbelt]

Hi -
Thanks for responding. I have one image/vector set in a separate 2nd
external sheet as a background photo. (It's the gray curvy, sci-fi looking
vector above the piano graphic in the top left corner of every page.) This
is all I know to tell you. ...Frank

 

[E. T. Culling]

I think the problem is in the last line here:
a: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:hover { font-family: Arial; font-size: 10pt; font-weight: bold;
background-color:#C0C0C0; color:#006699 }

#C0C0C0 is the color of that strange little bar.
Eleanor

 

[Brightbelt]

Hi -
Yes, but I want that background color....on text links - it's correct for
that, right ? What I'm talking about is that it also happens behind the
thumbnail photo when you're clicking to see the large version of a picture
in my photo gallery. .......Frank

 

[Cheryl D Wise]

Then you need to create a custom class and use it just on the ones you want
to have the background color or create a custom class and use it on the ones
you don't want to have the background color.

That is the only way to apply different css to specific links.

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

 

[Brightbelt]

Hi -
Thanks for your suggestion(s) - I'm kind of dependent on FP's CSS
interface and not real sure how to create a custom class, much less by using
code. Could you explain how I would create a custom class using FP's CSS
interface and not coding ? I'd appreciate any pointers and starters.
Thanks,...Frank

 

[Brightbelt]

Or at least point me towards a tutorial (hopefully a real-life application
type) ? Thanks,...Frank

 

[MikeR]

Frank - Google for css class. You'll get tons of hits.

Here's how one looks in HTML view. red is the class. This is for putting the styles inside
a page. If you're using a separate css, put it there.

<style type="text/css">
a:hover { color:"#00FFFF" }
a.red:hover { color:"#FF0000"}
</style>

In the page.
<a class="red" href="css_syntax.asp">CSS Syntax</a>
<a href="css_syntax.asp">CSS Syntax</a>

If you're not comfortable yet working in HTML view, to set a class for whatever, highlight
it, right click, select properties, then click style. In the class box enter the class.
click OK.

If you pop this onto a page, you'll get different colors when you mouse over the link. To
MikeR

 

[Brightbelt]

Hi -
Thanks Mike. Just seeing a real example makes alot of difference. For
instance, having looked at some paragraph classes ( eg, 'p.red') I would
have written ' a:hover.red' instead of 'a.red:hover' as you did.
Thanks,...Frank

 

[Cheryl D Wise]

Follow the instructions in the tutorial on using Styles at
http://mvp.wiserways.com/tutorials/styles/index.html on page 2 you will see
how to create a custom class.

--
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 you both. I appreciate all the assistance. I kind of need it !!
Frank