Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Thanked 0 Times in 0 Posts

    banner table not working

    I have a few sites.

    The one I'm working on now is giving me trouble and I really can't understand why.

    I just started it so it's mainly templates and stuff, but the banner at the top is made out of many img files put into a table. I've done this technique before and it worked fine but for some reason it will not work on this site.

    Basically I am getting a large white line through the top and bottom rows of images.

    Please help.

    Link to my site where the banner works: http://www.stevemedleyphotography.com

    Link to the site I started where the banner is not working: http://www.desyriarpg.com

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Midlands, UK
    Thanked 29 Times in 28 Posts
    Hi Steve,

    It makes no sense to be using CSS without taking advantage of CSS positioning, then cramming your header contents into a table.

    I won't go into the specifics of the folly of using tables for layout. I'm sure there will be plenty only too glad to post links to a plethora of articles on "why tables for layout is stupid". It isn't really that stupid - but there is a better way...

    Suffice to say, I would recommend knocking out the table and using margins or relative positioning to place your images over the top of a #header div background. If possible, use real text for your links and if you really must have a specific font, then you can cast them as gif images with transparent backgrounds. Either that, or you can slice up your design image (as you have done) and place just the link images exactly, with absolute positions or floats and plain old margins, on top of the background.

    Personally, I'd use a list (I notice there is CSS code there for one, but no list included in the mark-up) for the header links. Float the li element left and position the list itself, centrally. Use li padding to space the images.

    Either way, you'll get an elegant result with CSS, using very much less code, with fewer 'moving parts' to go wrong (as you've recently experienced).

    I hope this helps. Look for some tutorials on CSS positioning. If you get stuck, you know where we are.


    Doctor V
    Last edited by Doctor_Varney; 04-14-2009 at 09:12 AM. Reason: Improvement
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts