The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

header table

Hi All,

I have just implemented a header (sliced table)which includes 2 search functions. (www.artthings.co.uk). Please ignore the design of the page as this is temporary, the header is what I am working on at the moment.

Anyway the search funciton includes 2 forms 1 for search by products and 1 for a drop down choice. The functions work perfectly.

Anyway as you can all see, the header is distorted really bad, don't even bother viewing it in anything other then IE at the moment its that bad.

I have changed the heights etc, but I can't seem to sort out the problem? Is there something I can do to sort it?

I've put up an example for you to look at, went with a different concept altogether, I cracked yours open and got really confused. You're using a lot of markup that doesn't validate to the doctype you're using, normally I'm not incredibly picky about that but the markup techniques you've chosen are nowhere near suitable for xhtml transitional.

A few things that might help you in your situation, apply font-sizes to your form elements to make them smaller, and the heights specified in that table's TDs were varied and confusing, I tihnk the browsers agree.

oh yeah, your width, you seemed to be designing a static width for the lowest common denominator of 800x600 screen resolution. If that's the case, you should knock your presentation back to about 770px instead of 800 to accomodate for scrollbars, else you'll get the HSOD (Horizontal Scrollbar of Death) in addition to the acceptable vertical one.

The "line" to the right is actually the background-color showing for that div as it's stretched beyond the background image, you might try taking away "display:block" as that's kinda redundant (I know, my mess ) and set the form's width:50% - something is expanding that div, fiddle and see what.