Problems using slices on web page

Please view
http://www.cymbaldesigns.com/pages/home.html
to see and try to solve my problem.

In the main navigational image which uses remote rollovers I have separated the star into 7 separate slices with rollovers showing in the center. This shows in Safari intact and perfectly. However in Opera it shows a sliver of unwanted space on the right side, while in Firefox the slices have exploded with much space between some of the slices and unsightly borders. Internet Explorer does the same though to a lesser extent in terms of space. How can I fix this? (I rely on Dreamweaver CS3 to write the code as I am a designer and not a coder).

Thank you.
LPNavonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

knonieCommented:
Actually, there are two issues with that design:

One is appearance of borders around each button slice,
And second is lot of space around these buttons.

To prevent the borders from showing, you have to do the following changes in your CSS, as shown in code snippet below.

The space issue is caused by rendering of various browsers, because the complicated tables having so many row/column spans often behaves like that, so you have to re-structure your Star table.

Please see the table structure that I suggest below.

Use this HTML code in a new page in DreamWeaver and see that first table has 3 columns and 2 rows. Then, the middle column is merged to make one.

Inside that middle column, insert another table with 1 column and three rows.

Now, insert your images and code.

:-)


<table width="42%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="93" bgcolor="#0066CC">&nbsp;</td>
    <td rowspan="2" bgcolor="#990000"><table width="100%" height="211" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#003333">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#000099">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#003333">&nbsp;</td>
      </tr>
    </table></td>
    <td bgcolor="#0066CC">&nbsp;</td>
  </tr>
  <tr>
    <td height="89" bgcolor="#99FF99">&nbsp;</td>
    <td bgcolor="#99FF99">&nbsp;</td>
  </tr>
</table>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
knonieCommented:
In above example, please use the width appropriate for your table.

And here's the CSS changes that will prevent the colored borders to appear around buttons.

Just paste it in CSS. No HTML changes required.

:-)
#CategoryStar td a{
	margin: 0;
	padding: 0;	
	border: none;
}
#CategoryStar td a img{
	margin: 0;
	padding: 0;	
	border: none;
}

Open in new window

0
LPNavonAuthor Commented:
I created a table structure as you indicated (though not using that code per se) and put the margin, paddings and borders as you said. It all now looks perfect in Firefox, Opera, IE as well as safari. Thanks very much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.