View Full Version : banner table not working

Apr 14th, 2009, 12:00 AM
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

Apr 14th, 2009, 08:52 AM
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