3 replies [Last post]
eurekaiv
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2004-03-19
Posts: 2
Points: 0

Hi all, I'm new here and had a question regarding some .css rollovers. I did a search but couldn't come up with any similiar problems so here it goes...

I am having trouble with a .css rollover navigation conflicting in Mozilla type browsers. The graphics chop off for some reason unless I comment out the "font" attributes in my BODY, TABLE, TR, and TD styles. The rollovers will still work fine but it looks a little silly with only the top half of the graphic showing and I can't for the life of me figure out what could be causing this to happen.

I included a couple of screenshots of what it looks like and my .css code so you can see what I have to comment out. Any help would be greatly appreciated. Thanks!

Correct IE display

Incorrect Netscape6 display

BODY { /*font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;*/margin: 0px;padding:....
TABLE, TR, TD { /*font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;color: #555;*/ }
.n_home a { background-image: url(style_images/3/n_homeT.gif); }
.n_home a:hover { background-image: url(style_images/3/n_homeT.gif); background-position: 0 +26px; }
.n_rules a { background-image: url(style_images/3/n_rulesT.gif); }
.n_rules a:hover { background-image: url(style_images/3/n_rulesT.gif); background-position: 0 +26px; }
.n_help a { background-image: url(style_images/3/n_helpT.gif); }
.n_help a:hover { background-image: url(style_images/3/n_helpT.gif); background-position: 0 +26px; }
.n_search a { background-image: url(style_images/3/n_searchT.gif); }
.n_search a:hover { background-image: url(style_images/3/n_searchT.gif); background-position: 0 +26px; }
.n_members a { background-image: url(style_images/3/n_membersT.gif); }
.n_members a:hover { background-image: url(style_images/3/n_membersT.gif); background-position: 0 +26px; }
.n_pattern a { background-image: url(style_images/3/n_patternT.gif); }
.n_pattern a:hover { background-image: url(style_images/3/n_patternT.gif); background-position: 0 +26px; }
.n_flex a { background-image: url(style_images/3/n_flexT.gif); }
.n_flex a:hover { background-image: url(style_images/3/n_flexT.gif); background-position: 0 +26px; } 

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Trouble with .css navigation in mozilla browsers

Hi eurekaiv,
Welcome to the CSS Forum.
I don't see any difference in the two images, where exactly is the image chopped off.

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 13 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Trouble with .css navigation in mozilla browsers

Correct me if I'm wrong but I think you've posted the same image twice? :?

Also, could you post the HTML as well?

The next sentence is true. The previous sentence is false. Discuss...

eurekaiv
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2004-03-19
Posts: 2
Points: 0

Trouble with .css navigation in mozilla browsers

Ok, It's friday and it's been a long week. I fixed the image so you can see the difference.

here a link to the code for the main page...

http://www.jaycollins.com/trouble.txt

Thanks!