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?
 
knonieConnect With a Mentor Commented:
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
 
knonieConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.