CSS - Table Background Rollover Effects

Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer!

I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear.

I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help.

Here is the rollover portion of my css:

Code:

 #rollhome 
	{
	display:block;
	float:left;
	margin: 0 auto;
	width:122px;
	height:50px;
	text-decoration: none;
	background-image:url("images/topmenu_home.png") no-repeat 0 0;
	border:#000000 solid 2px;
	text-indent:-99999px;
	z-index:20;
}

#rollhome:link, #rollhome:visited
{
background-position: 0;
}

#rollhome:hover 
{
background-position: 0 -50px;
}

And here is the rollover portion of my html:

Code:

<div id="rollovers">
<a id="rollhome" href="#"title="rollhome">Home</a><
/div>

Any help would be most appreciated!

Hi everyone,

I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore.

Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus.

When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image.

So what doesn't work?
Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7...

Please help me...!!

I've attached the relevant code, added comments and colored the parts that I think might cause the problem.

html:

Code:

	<div id="globalnav">
    
		<ul id="menu1">
        	<li id="nav_home"><a href="../home/" title="Home">home</a></li>
        	<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
      		<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
		</ul>

	  	<ul id="menu2">
       	  <li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
       	  <li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
   		  <li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
	  	</ul>
        
    </div>

css:

Code:

@charset "utf-8";

/* English Menu bar */

/* Box for the entire menu (two rows of ul) */

#globalnav	{
	height: 130px;
	width: 675px;
	}

/* Create box and put background image for each menu line */

#globalnav ul#menu1	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu1.jpg) top left no-repeat;
	padding: 0;
	position: relative;
	margin: 0 0 5px 0;
	}

#globalnav ul#menu2	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu2.jpg) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}
/* Boxes for each link square on the menu */

#globalnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	width: 75;
	}
	
#globalnav li, #globalnav a {
	height: 62;
	display: block;
	}
	
 #globalnav a {
	line-height: 62px;
	text-decoration: none;
	text-indent: -9999px;
	display: block;
} 

/* Define the area on the background image of the ul which coressponds to each link box */

#nav_home		{left: 0; width: 75px;}
#nav_about		{left: 225px; width: 75px;}
#nav_recruit 	{left: 525px; width: 75px;}
#nav_company	{left: 150px; width: 75px;}
#nav_clients	{left: 375px; width: 75px;}
#nav_contacts	{left: 600px; width: 75px;}

/* Maybe the next part is unnecessary... */

#nav_home		{background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about		{background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit	{background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company	{background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients	{background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts	{background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}

 /* Hovered menu items  */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */ 

#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;} 

/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */

body#home #nav_home			{background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about		{background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit	{background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company	{background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients	{background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts	{background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}

By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6.

Oh and I'm using transitional DTD. is that ok?

Disregard pot

I simply transposed li and a tag

thanks anyway...

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information.

I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what).

URL

The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background.

Could someone solve this, or alternatively reccommend another way.

Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html

Code:

<html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image(); 
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif'; 
var preloadPic2 = new Image(); 
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;'; 
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>
<br><br><br><br><br><br><br>
<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8 
		style="border-collapse: collapse; border-width: 1px;">
        <tr height=20>
            <td class="topbar" align=center 
            	onMouseOver="className='topbar2'" 
            	onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">A</a>&nbsp;
            </td>
            <td class="topbar"  align=center 
            	onMouseOver="className='topbar2'" 
            	onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">B</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">C</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">D</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">E</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">F</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">G</a>&nbsp;
            </td>
            <td class="topbar" align=center 
            onMouseOver="className='topbar2'" 
            onMouseOut="className='topbar'">
                    &nbsp;<a class="topbarlink" href="">H</a>&nbsp;
            </td>
        </tr>
</table>
</td></tr>
</table>
</body>
</html>

Hi, anyone an idea how to change both text color AND table cell bgcolor on rollover (using style sheets) ?

thx
Gerhard

I have a list of about 50 items, numbered 1 - 50.

It looks boring just listed on the page and I want to jazz it up. I was wondering, if anyone had any ideas?

I was thinking of having each numbered item listed in a random font size or something but I'm not sure if it's possible to do using CSS?

Hello
I would like to make a hover effect when my mouse is over a link, as shown in my attachment.
What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed).
Anyone can help me with this?

Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries.

what on hover effects for images CSS alows?

for example can i make the image to turn in black and white on hover?

or add a border?

http://turkeybot.info/flash/play.php?id=121

When you hover near the bottom where it says "hover me", it's supposed to display a div right below that that has a black background and rounded borders (for firefox)...but the thing is, it isn't! What could be causing this? (css is on http://turkeybot.info/css/normal.php)

How does wordpress manage the fading effects?, It goes from a color to another in the RGB space. I was wondering if this was CSS related, but didn't find much in the css files.

Anyone care to explain me how to achieve this, please.

Thanks.

I'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page).

http://www.geocities.com/dbot69/page1.html

It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link):

http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a

then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing.

I got the following error when i tried to validate my code:

"Line: 21
Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included)

I don't really know what that error means though or how to fix it

Any help anyone could give me would be greatly appreciated! Thanks!

Rob

Hi all,
First I am sorry I am double posting here, but this time I can offer you more information about what I want to do.

First of all, I hosted my website:
http:// livetogetherdiealone.110mb.com/
(sorry they wont let me post a URL, backspace the space!)

As you can see it is difficult to read the text at some places because of the amount of light of the background image.

My Content of the site (it is written in Dutch) is placed in 2 tables:
colOne and colTwo (left and right)

Code:

<div id="content"> 	
     <div id="colOne"> 		
          <p></p> 	
     </div>  	

     <div id="colTwo"> 		
          <p></p> 	
     </div> 
</div>

Code:

#colTwo { 	 	
     float: right; 	 	
     width: 184px; 
}     

#colTwo h3 { 	 	
     margin-top: 10px;  
}

Beneath my tables I have placed a banner, and I used this code:
Code:

<div style="width:250px;margin:0 auto;"> 

<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">

<img src="http://i489.photobucket.com/albums/rr260/LTDA/ad160x600.gif">

</span>

</div>

The result leads to a transparent image!

Now I want to combine the transparent image with my tables to be able to read my text properly and to be able to see the background image. BUT I don't have a clue how to do this. So can anyone tell me how to to this? If you need more background information feel free to ask.

Thanks, stef
(I have no experience with photoshop)

How to add a background picture to a table？
Anyone helps? Thanks in advance.