Category tabs positioning issue

I moved the category tabs div with a position: relative css tag. That has caused a couple of problems.

1. In IE7 and Forefox, the blank space before the EZpages links div is too large. The problem is much worse in IE than Firefox.

2. In Firefox, the main section has shifted about 3/4 of a page to the right.

Here's the poitioning css:```
:#navCatTabsWrapper {
margin: 0em;
position: relative;
top: -7.9em;
left: 216px;
width: 529px;
}

This is the offending URL: <http://platinumstandard.com/store>. *(I'm just getting started. Much design work is left.)*

Any suggestions?

Thanks,
Steve

While I usually perfer to use css to affect changes, I think that in this instance editing the files is a better solution.

In your tpl_header.php file you can find this code:

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

And move this entire block to be contatined in the <!--bof-branding display--> block and probably right before the div for the id="tagline".

But before you get too far into this, you are currently using the "classic" template and you should really create your own named template. You can clone the "classic" template files but place them into your own folder and edit the template_info.php file with a template name that you choose and activate this in the admin > tools > template selection. Then admin > tools > layoutboxes controller > and reset. Now you have your own template and can use the overrides system for your edited files.

Thanks Kobra.

It worked like a charm with IE7. I tried several destinations for the code move. The best results was before the taglineWrapper div. I just needed to adjust the css positioning.

Firefox had two issues. The tagline position shifted far to the right and the blank space before the EZpages links div becamr even larger.

Of course, when I tried to fix Firefox, IE became screwed up. To make it work, I had to resort to positioning for the navcatwrapper, logo, tagline, taglineWrapper, and navEZPagesTop. I also gave the logoWrapper a height and changed the height of the navCatTabsWrapper from 1% to 0em. There were also several other minor adjustments. IE and Firefox are still a little different, but the compromises are acceptable.

But before you get too far into this, you are currently using the "classic" template and you should really create your own named template. You can clone the "classic" template files but place them into your own folder and edit the template_info.php file with a template name that you choose and activate this in the admin > tools > template selection. Then admin > tools > layoutboxes controller > and reset. Now you have your own template and can use the overrides system for your edited files.Thats what happens when you dive right in without reading the docs. Thanks for the suggestion. I'm now fully compliant with the override system.

Steve

You might try adding a clearboth to the tpl_header.php file to force tagline to another line over being inline. Kinda like a carriage return. Of course you might have to adjust the css that you changed in this instance

After viewing the results in more browsers, I decided to go back to the drawing board. The biggest offender was Safari. In addition, earlier versions of IE were a bit different than IE7. Konqueror also has small issues, but I left them unconquered. (This is an excellent example of why I'll never make a living as a comedy writer.)

The basic strategy is simple. I forced the absolute postion of divs to a consistent spot in each browser by giving all relevant wrapper divs an absolute position of top: 0em. The wrappers are taglineWrapper, navCatTabsWrapper and navEZPagesTopWrapper. NavEZPagesTopWrapper doesn't exist in the code, so I created the div in tpl_ezpages_bar_header.php. With this solution tpl_header.php does not need to be modified.

Steve