No replies
CreepyD
CreepyD's picture
Offline
newbie
UK
Last seen: 8 years 22 weeks ago
UK
Timezone: GMT+1
Joined: 2011-05-11
Posts: 1
Points: 2

Can't tell you how many hours I've spent trying to do this, but it's a lot!
An example page with the issue can be found here..

I'm trying to change it to be a horizontal scroll instead of vertical.

Top image here is what happens when I expand the data in the central box.
Lower image is when it fits.

The piece of CSS which works this is here..
If I change the 'auto' below to hidden, the scrollbar goes, so it's definitely that controlling it.
I bet it's something really simple but I just can't find it.

Thanks so much for any help.

#indexProductList.centerColumn {
	width: 630px ;
	height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
	overflow:auto;
	padding:0px;

Here's the html for the central table..

<td valign="top">
<!-- bof  breadcrumb -->
    <div id="navBreadCrumb">  <a href="http://www.funkimunkibadges.co.uk/">Home</a>&nbsp;::&nbsp;
Careers & Hobbies
 
</div>
<!-- eof breadcrumb -->
 
 
<!-- bof upload alerts -->
<!-- eof upload alerts -->
 
<div class="centerColumn" id="indexProductList">
 
<h1 id="productListHeading">Careers & Hobbies</h1>
 
 
<div id="indexProductListCatDescription" class="content">&nbsp;</div>
 
 
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
  <option value="0">Items starting with ...</option>
  <option value="65">A</option>
  <option value="66">B</option>
  <option value="67">C</option>
  <option value="68">D</option>
 
  <option value="69">E</option>
  <option value="70">F</option>
  <option value="71">G</option>
  <option value="72">H</option>
  <option value="73">I</option>
  <option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
 
<div id="productListing">
 
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
 
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> &nbsp;</div>
<br class="clearBoth" />
 
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2628"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=3165"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2663"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2662"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2664"></a><br /><br /></div>
 
<br class="clearBoth" />
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2665"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2666"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2667"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2672"></a><br /><br /></div>
    <div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />&pound;0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&amp;cPath=113&amp;products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
 
 
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div  id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> &nbsp;</div>
 
<br class="clearBoth" />
 
</div>
</div>
</td>