Rollover question about my code

[Hooch]

**FIXED**Shown on my 3rd postHello all. I have an image rollover working. But not 100% Here is my HTML

<table width="770" border="0" align="center"  cellpadding="0" cellspacing="0" background="" class="">  <tr align="center">	<td height="40" colspan="5" background="images/links_bg_1_40.jpg">	<a href="index.php" class="home"> </a><a href="about_us.php" class="about_us"> </a><a href="art.php" class="art"></a>	</td>  </tr></table>

Here is my CSS

/*  ==========  Buttons   ==========  */ .home {background-image:url(../images/button_home_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.home:hover {background-image:url(../images/button_home_over.jpg);}.about_us {background-image:url(../images/button_about_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.about_us:hover {background-image:url(../images/button_about_over.jpg);}.art {background-image:url(../images/button_art_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.art:hover {background-image:url(../images/button_art_over.jpg);}

I would like these buttons side by side, but for some reason they are lined up top to bottom. Is there a problem with my code? Thank you for any help. Hooch

[jlhaslip]

got some more code to show us?What is the width of the tr? the td? the page? the images?Why a table?

[Hooch]

I edited the 1st post to show the table. (770 px wide) The buttons are: width:103px;height:40px (exactly what the css says)Thank you for your time and help.

[sircharlo]

The prob is with the display:block. Change every instance to display:inline.

[Hooch]

Thank you for your reply. This does make the buttons go inline, but you only see a small line. Not the button. We are getting there.**Fixed** Here is my CSS that works.

.home {background-image:url(../images/button_home_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;float:left;margin: 0px 0 0px 24.5px; width:103px;height:40px;}.home:span {display:none;}.home:hover {background-image:url(../images/button_home_over.jpg);}

I had to leave the block but add the float left.The 0px's are for moving up/down, left/right.The lone 0 I am not sure what it does.The 24.5px is the offset, so the float left is actually centered.I tried float:center but it did not work. Thank you for all your help. Hooch

[jlhaslip]

The 0px's are for moving up/down, left/right.The lone 0 I am not sure what it does.The 24.5px is the offset, so the float left is actually centered

the px after a 0 size can be eliminated because 0px = 0em = 0pt = 0%, etc.the size descriptor is not required only when size is equal to zero, though. In all other cases, you must include the unit of measurement (px/em/%, etc.)

[sircharlo]

I tried float:center but it did not work.

Yeah, the only possible attributes are left, right, and none.

[Hooch]

Can anyone give an explination as to why the display:inline; did not work?

[Hooch]

Hey all. I am opening this thread up again. I have a problem with my css rollover. The buttons are not loaded up for the "over" stage. So when you 1st mouse over the button there is nothing there. Once the mouse over has started, the image will load. Then all is fine. But that 1st mouseover looks terrible. Any options here? Thank you, Hooch

[jlhaslip]

preload the on:hover images into a 1px high by 1px wide spot on the page. typically someplace in the footer would be good. then they are ready and waiting for the on:hover reaction to be quicker due to not needing another call for the images. (i think)optionally, there are methods for using a single image for both states. the image gets 'slide' into a different position to show the second part of the image.

[Err]

That's how CSS works, it does exactly what you tell it to do. When the page loads, the main images that are on the links get loaded. Only after you have hovered over the links will it load your second image. Since it's two different images they both have to be loaded before they are displayed. So you don't initially see the images as you hover over it the first time since it's loading it.There is a solution to this. What you can do is load one long image for the links when the page is loaded (this long image has the regular image, and the image when the user hovers over it together as one) then when you hover it, all the CSS does is move over several pixels on the same image and display the hover image thus giving the effect that's it's two different images when it's really not.I know that was rather long winded, just check out this topic:http://w3schools.invisionzone.com/index.php?showtopic=15410