CSS - Replace Image Link On Rollover Problems

I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly.

Site URL is http://www.updatetechnology.ie

here is the code i have for these links:

<TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD>

and the corrseponding css class:

.grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff;
}
.grey A{
COLOR:#ffffff;
font-family: Arial, Helvetica, san serif;
font-size: 9pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
font-variant: normal;
text-transform: none;



}
.grey A:HOVER{
COLOR:#000000;
font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none
}
.grey A:MOUSEOVER{
COLOR:#000000;
font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE
}

In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined..........

has anyone come across this before?? and if so is there a solution out there.

Thanks

I have had this bug in another web I built. I use a centered fixed layout with a relative positioned container and floated divs inside.

In Firefox, when I rollover on a link in the menu the contents of some divs show over all content as if they where triggered by the rollover.

I have no idea why this happens. Please check this link and rollover the links on the left column to see the bug. You'll see how the comments show again over themselves and the rest of the content. Very weird!

Thank you!

Hi all,

I'm a CSS newbie and I need your help, pleeease!
I tried to make a rollover graphic menu today.
And of course I got completely stuck with this code:

Code:

/* Header */

#header {
position: absolute;
	background: url(images/header.jpg) no-repeat;
	width: 830px; 
}
#menu, #menu li a:hover, #menu li.current a {
	background: url(images/link_menu.jpg) no-repeat;
}
#menu {
	margin: 115px 0px 0px 29px ;
	width: 600px ;
	height: 75px ;
	list-style-type: none;
}
#menu li {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 120px;
	height: 75px;
}
#menu li#menu-contact {
	margin: 0;
}
#menu li a {
	display: block;
	padding: 75px 0px 0px 0px;
	height: 75px;
	overflow: hidden;
}
html>body #menu li a {
	height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
	background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
	background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
	background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
	background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
	background-position: -480px -75px;
}

The rollover works, but somehow it shifts to the right
Like this:
URL

What am I doing wrong? Why does it shift?

Thanks in advance...

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

I am trying to implement the below code for my own page.
The issue for me is I don't know how to get the background image to overlay the link text.

Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible?

Live demo of example:
http://www.tutorio.com/media/css-tutorials/rollover-example.htm


Code:

<div class="rollover">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

Code:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

I've tried adding an image between the <a and </a> and tried to change that when hovered.

Code:

<a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a>

Code:

a.img.testimage:hover {
background-position: 0 -40px;

}

I am currently trying to figure out how to make a webpage with a navigation bar that consists of rollover images, BUT if the site has CSS and/or images disabled for a visually impaired user, text will appear as links. I have been searching the net, but have had no success in a solution other than not using images.


HTML for Navigation
Code:

<!--NAVIGATION-->

		<ul>
		     <li id="home"><a href="index.html"></a></li>
		     <li id="students"><a href="students.html"></a></li>
		     <li id="faculty"><a href="faculty.html"></a></li>
		     <li id="facilities"><a href="facilities.html"></a></li>
		     <li id="maps"><a href="maps.html"></a></li>
		</ul>

CSS for first Button
Code:

/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}

li#home{
background-image: url(images/nav_home.png);

width: 205px;
height: 52px;
display: block;
}

li#home a{ 
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#home a:hover{ 
background-image: url(images/nav_home.png);
background-position: 204px 0;
}

how do i have images rollover? ie when the mouse i NOT on the image its img1 and when mouse is its img2?? i cant work that out

cheers

actually i have sort of done it but with some problems:

Code:

a:link, a:visited {
	background: url('images/offlinks/contactus.jpg');
}
a:hover {
	background: url('images/onlinks/contactus.jpg');
}


</style>
</head>

<body>

<a href="whatever">  hello        </a>

it works if i put any text where hello is! but thenthat background has text so it makes it unreadable?
Code:

.contact a:link, .contact a:visited {
	background-image: url('images/offlinks/contactus.jpg');
	text-decoration:none;
	color:#CED3DB;
	font-size:25px;
}
.contact a:hover {
	background-image: url('images/onlinks/contactus.jpg');
}

in the book doing this would make the links in contact class have that image but it doesnt work?

OK, I've gotten this to work a hundred times before, but today I am stumped. Basically, I am trying to create an image rollover with CSS.
here is my CSS: Code:

a.footer_box3{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_off.png') no-repeat;
border:none;
display:block;
}


a.footer_box3:hover{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_on.png') no-repeat;
border:none;
display:block;
}

the above CSS is in the header of the document.
Here's the code for the rollover in the page: Code:

<td background="images/footer/footer_test/footer_box3_off.png" width="222" height="169">
			<a href="our_people.asp" class="footer_box3"></a>
		</td>
		

You can see the site here
Scroll down to the bottom of the page where there are 4 footer boxes. I am only trying to get the third box to swap images on hover.

can anyone see what I am doing wrong?

thanks

Hello CSS Readers & Experts, I have a very common problem that Ive done some searches on, but yet to find the solution. My Image Rollover flickers. You can view this problem at

www.clickcolumbia.com/onlinecommunity

im guessing it has somethin to do with my css,

heres the code

a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #333333;
}

Please help

I developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled.

Is it possible to do this using css?

For an example, see this page: chellatextiles.com/Textfab/cocotweed.html

Rollover a color thumbnail and it replaces the fabric details.

There are about 500 thumbnails through the site that I would need to change.

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

Hey peeps,

having trouble getting background images to display rollOvers for a <td> tag in IE (pc and mac). Works fine in firefox and safari. Heres me code:

CSS:

Code:

.house_menu_cell {
	background-image: url(../images/nav/homes/glo_house_nav_bg_0.gif); cursor:pointer;
}
.house_menu_cell:hover {
	background-image: url(../images/nav/homes/glo_house_nav_bg_1.gif); cursor:pointer;
}

HTML:

Code:

<td class="house_menu_cell">

Any help would be great. Ive spent about an hour trauling the net with no luck!

Cheers

mish

I'm running into a problem with IE and using the :hover sub-class on an image within a class. IE: .zoomer img:hover {}. Works just fine, nice and neat in any other browser. Page in question: [URL=http://www.cavemanapparel.com/ncaa-c-34.html[/URL]

Code:

.zoomer img:hover {     background: #008;     margin-left: auto;     margin-top: -400px;     position: absolute;     z-index: 999;     display: block;     border: 0;     height: 60%;     width: 40%;     overflow: visible;     clear:both; }

I've tried placing various hacks and/or solutions I've found across the web inside: <!--[if IE]>
<![EndIf]-->

but the POSITION attribute seems to be ignored and takes on the code in the .css file. I know WHY it's doing it but can't seem to fix it. Well, I guess if I knew exactly why it's doing it I would be able to fix it. Right?

Anyway, if you view the page source, I'm sorry for the shoddy work. It's been a long couple of days. Any insight or solutions are greatly appreciated.

Hi all,

Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS?

I have an image that grows when it is rolledover.

Css simply as follows:

.graph {
width: 200px;
height: 50px;
}
.graph:hover {
width: 600px;
height: 150px;
}

Works fine in FF (as usual!)

Regards

Charlie