Styling controls table in Swiss Army Slideshow

[cathcane]

1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem: I'm using images to display the controls but I'm seeing a border left and top when mousing over them. On looking at the source I can see that the border is being added, along with padding, to the table id="controls0". I have the contriols0 id specified in my header but although I can control the width and floats etc. I have no success with other specifications. Can you advise on how to style this table? I aiming to have the previous arrow to the extreme left of the screen and the next arrow to the extreme right. Any help would be appreciated. Many thanks.

[jscheuer1]

It's hard for me to visualize exactly what you want to do. And I'm not sure what level of expertise and creativity you have as regards css. But perhaps just using the update for this script available here:

http://www.dynamicdrive.com/forums/entry.php?18-Swiss-Army-II

will be all the help you need. Read through the description to get an idea of how to use it.

I believe the key will not be so much in styling the table, as in moving the next/prev buttons. Like:


#prev0{
position: absolute;
top: 100px;
left: 0;
}

If you put a relatively positioned element around the slideshow, the absolute values will be in relation to it.

If you're having trouble overriding any of the scripted styles for the table though, and you have the right selector, you may use the !important keyword. For example:


#controls0 {
border-width: 0 !important;
}
#controls0 td {
border-width: 0 !important;
}

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.