Sideboxes gone wrong.

[Spo0f]

w w w . o r c h a r d d i r e c t . c o . u k

If you look at my free shipping and fsb images they are in the divs #bannerbox.

For some reason there seems to be some sort of margin at the sides. as i try and make the images bigger to align with the left hand column the column gets bigger thus resulting in the images always being to small. Also Why is there space between those banners at the top and bottom (shown by the white space).

Could someone have a look at my site and explain to me why there seems to be some sort of odd margins on the box and a way of fixing it.

Many thanks

Elliot

[niccol]

I am not sure I quite understand the problem with the size of the images. Some of the white on either side of the image is actually part of the image. If you want to get rid of it you need to edit the image and then re-upload it.

As far as the margins:

There are quite a few empty elements in the layout that are actually taking up space. Also some <br> tags that make formatting tricky. Look at the code from your site below. I'll try to highlight them in red.

<!--// bof: bannerboxall //-->

<div class="leftBoxContainer" id="bannerboxall" style="width: 159">
<h3 class="leftBoxHeading" id="bannerboxallHeading"></h3>
<div id="bannerboxallContent" class="sideBoxContent centeredContent"><a href="http://www.orcharddirect.co.uk/shop/index.php?main_page=redirect&amp;action=banner&amp;goto=2&amp;zenid=06223be65ee81f9dc14ad4b3edcb3aaa" target="_blank"><img src="images/lorrygif.gif" alt="Free Delivery On Orders Over £75" title=" Free Delivery On Orders Over £75 " width="159" height="73" /></a><br /><br /><a href="http://www.orcharddirect.co.uk/shop/index.php?main_page=redirect&amp;action=banner&amp;goto=10&amp;zenid=06223be65ee81f9dc14ad4b3edcb3aaa" target="_blank"><img src="images/fsb.JPG" alt="FSB" title=" FSB " width="150" height="145" /></a></div></div>
<!--// eof: bannerboxall //-->

<!--// bof: protxformcardsaccepted //-->
<div class="leftBoxContainer" id="protxformcardsaccepted" style="width: 159">
<h3 class="leftBoxHeading" id="protxformcardsacceptedHeading">Cards Accepted</h3>
<div id="protxformcardsacceptedContent" class="sideBoxContent centeredContent">
<div style="clear: left;">&nbsp;</div>
<img src="includes/templates/template_default/images/card_icons/verified_by_visa_small.png" alt="Verified By Visa" title=" Verified By Visa " width="1" height="1" class="ProtxFormCardsAcceptedSidebox3DSecureIcon" />
<img src="includes/templates/template_default/images/card_icons/mastercard_securecode_small.png" alt="MasterCard SecureCode" title=" MasterCard SecureCode " width="1" height="1" class="ProtxFormCardsAcceptedSidebox3DSecureIcon" />
<div style="clear: left;">&nbsp;</div>
<img src="includes/templates/template_default/images/card_icons/protx_secured.png" alt="Secured by Protx" title=" Secured by Protx " width="150" height="389" class="ProtxFormCardsAcceptedSideboxProtxIcon" />

</div></div>

<!--// eof: protxformcardsaccepted //-->

</div>

This is a non standard sidebox so without seeing the code that created it, it is hard to comment further.

[Spo0f]

Hey thanks for the reply. I had tried changing image sizes, all this did was push the coulmn wider. It appears those banner boxes have been formatted differently from the others?

Thanks

[niccol]

Well, yes the sideboxes are not standard but this is not what is messing witht he horizontal alignment.

The truck image as it is takes the whole width of the sidebox. The images themselves have white/transparent borders left and right. To get rid of those borders you need to edit the image itself.

[Spo0f]

Thanks for the reply, the image doesnt havent white/transparent borders left to right, its exactly the right pixel dimensions. Ill have a play around with some css im sure ill get it soon!

[niccol]

Attached is screenshot with the images highlighted. The image is 159px wide. The truck is about 145px wide. So you have 14px of white space.

I would get rid of the sideboxes that you are using which are causing some dubious code and have a look at the blank sidebox mod and use that.

But maybe I am misunderstanding what you are trying to do.

At the moment the css for the class sideboxContent looks like:

.sideBoxContent {

	background-color: #ffffff;

	padding: 0.4em;

	}

Which means that the box that the image is sitting in has some padding. If the image is the width of the containing element it will not fit properly. The width of the containing element needs to be the width of the image plus the padding.

So, perhaps you need to get rid of the padding?

[Spo0f]

Hi, i had a play around with the css of bannerboxallcontent and managed to solve.

Many thanks