Category Tabs IE6, IE7 and FF alignment AND the dreaded white space

[spinnywoman]

Hello gang, here's hoping for a few pointers.

Several issues, I'll take a deep breath, here goes...

1) Category Tabs - will not right align in IE6 or FF. In my main stylesheet I have changed the #navCatTabsWrapper to float:right. If I go to stylesheet.categorytabs (where I have changed all the other floats to right) and change:

#navCatTabs li {float:left;} to {float:right}, it does float right but reverses the alphabetical category listing order (which I do not want to happen) AND in IE7 it juts out over the right hand margin. Yes, I could add a 'reverse' sort order to the categories to make the alphabetical side of things work but doesn't explain the right hand side margin issue in IE7.

Can anyone please give me a clue as to how to get it float to the right and display sensibly in IE6, IE7 and FF?

2) Removal of white space. I have a green background in #navMainWrapper which forms a nice border across the top of the page, a header_bg.jpg which for convenience I have left as same size as ZenCart header_bg and a logo.gif with a minus top and left margin (I'm beginning to think this may be part of the issue in FF but I'll carry on with the question anyway).

a) In IE7 the overall header looks okay with the branding display <br class="clearBoth" /> commented out and doesn't seem to mind if the <br class="clearBoth" /> is on or off in navigation display (found and edited in mytemplate/common/tpl_header.php)
b) In FF if I comment out the navigation display <br class="clearBoth" /> I still end up with the dreaded white space above header_bg.jpg. Also, the height of the #navMainWrapper is then squished to the 1% height as set in the stylesheet...
c) In IE6 the white space mystery is shown at the right hand side of the #navMainWrapper and header-bg.jpg, in fact it runs down the entire right hand side of the #mainWrapper. Any ideas please?

My initial install was 1.3.7 (not made live) which I then upgraded to 1.3.8a it may be that I have messed up between the 1.3.7 and 1.3.8a spreadsheets?

The link?

http://www.thelittleknittingcompany.co.uk/index.php

[dbltoe]

More to follow but...

(1) remove float completely in #navCatTabs

[dbltoe]

if it were me, I would lose the background-color: #ABD812; in #navMainWrapper and separate out the #navSuppWrapper

BUT... You need to look at what happens to the navMain when someone adds a product to the cart

[spinnywoman]

indeed! What have I done..... Off to work it out.....

[spinnywoman]

Thanks for the replies.

Okay, by leaving <br class="clearBoth" /> in navigation display to stand, IE7 remains unaffected, FF still has the white space above the header_bg.jpg and IE6 has the white space to the right hand side. BUT, the additional images in the #navMain when there are products added to the cart now looks sane! So, leave navigation display alone then!?

Have removed float completely in #navCatTabs in main stylesheet.css so now there is no right float of the Category Tabs in IE7, IE6 or FF.

Agree could discuss colour choices but the white space showing below #navMainWrapper (or above header_bg.jpg) in FF remains a puzzle.

[dbltoe]

Now you need to take the width: 100%; out of navCatTabs.

[spinnywoman]

Thank you, that works well for IE7 and FF - the tabs are now floated to the right as desired and in correct alphabetical order but still floats to the left in IE6 [sigh!]. Off to Community MX to see if a clue can be found there.

[spinnywoman]

Mystery of white space to right hand side of #mainWrapper in IE6 - any pointers anyone please?