Hi there,

I've got a small issue with a table which has a search engine and a basic link style menu with a background.

You can view this here www.beckmanndirect.com

Everything looks fine on Firefox (obviously), but if you view it on Internet Explorer 7 there is a gap between the menu and main content. If I try and close this gap by changing the margins/padding in the CSS, while it does close the gap in IE7, it also throws off how Firefox displays the sidebars and content, thus rendering it unsuitable.

If you wish I can I post the CSS / HTML here, or you can view it directly from the page.

Many thanks
Colin

You could serve some additional CSS just for IE7 using IE's proprietry conditional comments:

Thanks for your help, this has worked a treat!

There is another way to change styling from IE6 to IE7- without using separate style sheets: Using Child Separators. Please note that IE7 supports child separators, as well as all the other browsers, but not IE6. So, first specify the styling for IE6 in the "normal" fashion, then over ride the properties you want to change for IE7 and all the other browsers by using a child separator.

Here is an illustration:
Let's say that you have a div element #left directly inside the body element (i.e. #left is a child of body).
The style sheet would look something like this:
#left {....list all properties the way you want for IE6...}
body>#left{...list all properties - with their new values, you want to override for IE7 & all the other CSS2 complaint browsers}

Please also note that the styling using the child separator must be placed after the "normal" styling, in order to be able to override the formal.

Hope this helps.