TPL_HEADER problem v138a

[cs_jono]

Hey guys,

I'm having a problem within my tpl_header over cross operating systems. In Windows the Categories (in all browers, ie. Internet Explorer, Firefox, Chrome) that we have in our header looks like this:



However in mac operating system it looks like this



This wouldn't be a problem if over 10% of our customers didn't use a mac but unfortunately they do.

The code that is controlling this is:

TPL_Header

<div id="headerCat">
<div style="float:left;">
<?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catSpacerL.gif', 'spacer'); ?>
</div>
<div id="headerCatInfo"><span style="margin-left: 13px;"><a href="<?php echo zen_href_link('index&cPath=343') ?>">Collectibles</a></span><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=329') ?>">Clothing</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=12') ?>">DVDs</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=11') ?>">Games</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=5') ?>">Gifts</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=261') ?>">Jewelry</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=9') ?>">Music</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><a href="<?php echo zen_href_link('index&cPath=2304') ?>">Sports</a><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catLine.gif', 'spacer'); ?><span id="catSpacer" style="margin-right: 13px;"><a href="<?php echo zen_href_link('index&cPath=388') ?>">Toys</a></span>
</div>
<?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'catSpacerR.gif', 'spacer'); ?>
</div>

Stylesheet.css

#mainWrapper { background-color: #FFF; text-align: left; width: 1032px; vertical-align: top;}
#headerCat {float: left; margin: 14px 0 0 70px;}
.search {float: left;}
#headerCatInfo{float: left; font-family: Arial, Helvetica, sans-serif; Font-size: 13pt; background-image: url(../images/catBG.gif);height: 29px; color: #0e5380; background-position: top; background-repeat: repeat-x;}
#headerCatInfo {font-weight: bold;}
#catContainer {position: relative; top-margin: 8px;}
#headerCatInfo img{vertical-align: middle; padding: 0 11px;} 

If anyone can figure out why it's overlapping the categories is hanging outside of the main wrapper within mac os x i would greatly appreciate it. ANY IDEAS? I know there's some smart programmers out there that are smarter than me :)

[cs_jono]

Sorry forgot to add website to help out.

http://www.clevershoppers.com/jono/zencart138a

Thanks!

[Website Rob]

At first glance I can see the Font size is bigger for the Mac version.

#headerCatInfo (line 362)
{
font-weight: bold;
}


Suggestion: comment out the above then fiddle with Font Family to adjust.



A deeper look shows HTML Validation errors, although not evidently directly connected to your problem, once corrected should help to sort out things in general.

[cs_jono]

At first glance I can see the Font size is bigger for the Mac version.

#headerCatInfo (line 362)
{
font-weight: bold;
}


Suggestion: comment out the above then fiddle with Font Family to adjust.



A deeper look shows HTML Validation errors, although not evidently directly connected to your problem, once corrected should help to sort out things in general.

Thanks for your help! Unfortunately that didn't work. The problem was fixed on MAC OSX (partially) but it messed things up on windows.

Any other ideas or suggestions?

Thanks zen cart community!

[Website Rob]

Best to wait on further suggestions until you've corrected the HTML. Some of the errors are definitely causing overall problems and until they are fixed, no need to guess on fixes that might or might not work.

[dbltoe]

Rob's suggestion of fixing the html errors (50+) will definitely give you a better foundation to work on.

Some of them are obviously not your problem, but unclosed img and a tags can really mess with a layout.

[cs_jono]

Best to wait on further suggestions until you've corrected the HTML. Some of the errors are definitely causing overall problems and until they are fixed, no need to guess on fixes that might or might not work.

I'm sorry I'm really not trying to sound ignorant or stupid...but when I'm looking at the validation errors for the code there is 11 of them and if that was the problem wouldn't they cause the problem on the windows operating system too? I'm sorry...I'm just trying to learn from you guys.

Thanks for your patience!

[dbltoe]

Tidy plug-in for Firefox shows 59 on the page you provided.
The "fun" seems to start on line one with

<div class="socialIcons"><a href="http://www.facebook.com/clevershoppers"><img src="images/home/socialNetwork/facebook.gif" alt="Clevershoppers on Facebook"/></a><br /><a href="http://www.twitter.com/clevershoppers"><img src="images/home/socialNetwork/twitter.gif" alt="Clevershoppers on Twitter" class="socialIcon"/><br /><a href="http://www.youtube.com/clevershoppers"><img src="images/home/socialNetwork/youtube.gif" alt="Clevershoppers on Youtube" class="socialIcon" /></div>

which should look something like

<div class="socialIcons"><a href="http://www.facebook.com/clevershoppers"><img src="images/home/socialNetwork/facebook.gif" alt="Clevershoppers on Facebook"/></a><br /><a href="http://www.twitter.com/clevershoppers"><img src="images/home/socialNetwork/twitter.gif" alt="Clevershoppers on Twitter" class="socialIcon"/></a><br /><a href="http://www.youtube.com/clevershoppers"><img src="images/home/socialNetwork/youtube.gif" alt="Clevershoppers on Youtube" class="socialIcon" /></a></div>

and line five with

<div class="moreInfoBtn"><a href="http://www.clevershoppers.com/music-9/pop-32/casting-crowns-until-the-whole-world-hears-cd-2-71104.html"><img src="images/home/slideshow/moreInfo.gif" alt="Get more information on Casting Crowns: Until The Whole World Hears CD 2009"></a></div>

which should be something like

<div class="moreInfoBtn"><a href="http://www.clevershoppers.com/music-9/pop-32/casting-crowns-until-the-whole-world-hears-cd-2-71104.html"><img src="images/home/slideshow/moreInfo.gif" alt="Get more information on Casting Crowns: Until The Whole World Hears CD 2009" /></a></div>

Sometimes it's the small stuff

[cs_jono]

Not trying to be obnoxious but the code which you talk about where it doesn't validate is on the define main page. But the categories is effected no matter which page you are on. How could the define main page effect the header on every page the header is on? Is that really possible?

[dbltoe]

Understood.
These are a few of the 59, but notice that they are in the source on lines 1 and 5.
For instance the column layout loads left, right, center.
Other items are not necessarily loaded in order of the viewed layout.
If this only results in fixing html errors, it at least clears some of the trees out of the forest.
Sometimes it's that a clear both is missing or added. It's just hard to tell now.
Have you validated the css?