1

I just want to add a Image and text into the footer but when I do so I get a white space at the bottom of the page I do not know how to get rid of. See http://125.214.65.211:90/specials.php

At the bottom of the page I have added the "Gift Vouchers" image and "Off Street Parking" text. But this creates the white gap below the pink footer how do I remove the white gap.

I have inherited the website so do not want to change all the existing table structures. I just want some CSS to apply to the existing HTML.

I tried setting the height of the parent and overflow:hidden but that did not help.

Daveo
  • 19,018
  • 10
  • 48
  • 71
  • use firebug because you use unnecessary tr,padding in your footer like you use footer class two times which increasing the height & give padding in .footer .footer2_td – sandeep Mar 14 '11 at 11:36
  • @sandeep thanks for the tip I was already using firebug and noticed the unnecessary tr,padding and extra footer class/table but they were not the problems, it was a Sotiris answered below, using relative instead of float positioing – Daveo Mar 14 '11 at 11:48

2 Answers2

1

This behavior is logic. Using position:relative you move the element from it's initial position but it still take the space of the initial place with result the white gap. A solution is to remove the relative positioning of image and span, and use floats for the table .footer, for the img and float:right for span. For the .footer set a width something like 300px and for span a width of 200px. Also because you have two .footer remove the first one which is empty. Then when the elements have their positions you can use margin to push them in the correct place, or position:relative.

PS: For the next website try to avoid tables for layouts. For more information visit stackoverflow question Why not use tables for layout in HTML?

Community
  • 1
  • 1
Sotiris
  • 38,986
  • 11
  • 53
  • 85
  • Perfect thanks, I knew why the problem was occurring but was not sure how to fix it. Yes I know to avoid tables, this site was purchased as a template, I am just touching it up – Daveo Mar 14 '11 at 11:47
1

Try to add valign=top for the last and remove the padding for image , parking text etc.,

that could work, also there is a with class 'footer2_td', if this is not necessarily needed remove it..

Vijay
  • 5,331
  • 10
  • 54
  • 88