Firefox issue - missing tr tag?

**KiltsRock.com** · 17 May 2007, 05:08 AM

It appears that the contentmainwrapper area is missing a < / tr> somewhere, but I cannot figure out what is going on. it is fine in IE6 and 7, but firefox2 has the contentmainwrapper beneath the navmainwrapper div (shopping home, login) shifted to the right.

here is the site: http://www.kiltsrock.com/shop/

I tried using firebug to figure it out, but to no avail.

any ideas or help would be much appreciated!

slainte,
KT

**gjh42** · 17 May 2007, 07:06 AM

Wow... what a bunch of tables. You have scrapped most of the Zen Cart layout and wrapped it in your custom table setup, when it could have looked exactly the same using the stock divs and a few new wrapper divs.

That aside, it appears you are missing a </div> for #headerWrapper, as it goes down to the very bottom of the ZC-generated part of the page. Fix that and see if it makes a difference.

Most of the tables are your own creation, and we can't see your code directly to troubleshoot.
Oh, and when you say "Powered by SimpleSage", did you know that is a claim to have written the engine that runs your shop? You can remove the "Powered by Zen Cart", but you can't substitute your own. The copyright is definitely yours in this case.

**KiltsRock.com** · 17 May 2007, 12:37 PM

Originally Posted by gjh42

Wow... what a bunch of tables. You have scrapped most of the Zen Cart layout and wrapped it in your custom table setup, when it could have looked exactly the same using the stock divs and a few new wrapper divs.

That aside, it appears you are missing a </div> for #headerWrapper, as it goes down to the very bottom of the ZC-generated part of the page. Fix that and see if it makes a difference.

Most of the tables are your own creation, and we can't see your code directly to troubleshoot.
Oh, and when you say "Powered by SimpleSage", did you know that is a claim to have written the engine that runs your shop? You can remove the "Powered by Zen Cart", but you can't substitute your own. The copyright is definitely yours in this case.

looks like I've got a bunch of re-work on my hands...and the "powerered by" was an inference of the integration on the whole site, but I can change that.

**gjh42** · 17 May 2007, 08:10 PM

To get the round corner effect neatly using divs, google "sliding door method" for a good explanation.

Since you have a fixed-width page and a solid color background, it will be relatively simple. If not for the logo links at top & left, you could do it with the existing divs, #mainWrapper, #headerWrapper and #contentMainWrapper. As is, you can make two new divs (#outerMainWrapperT and #outerNaimWrapperB) to hold everything outside the "click here" head and store content, which are in #mainWrapper.

Code:

#outerMainWrapperT {
    width: 843px;
    margin: auto;
    background-color: #ffffff;
    background-image: url(../images/outertop.gif);
    background-repeat: no-repeat;
    position: relative;
    }

#outerMainWrapperB {
    width: 100&#37;;
    background-image: url(../images/outerbottom.gif);
    background-position: bottom center;
    background-repeat: no-repeat;
    }

#mainWrapper {
	text-align: left;
	width: 626px;
	vertical-align: top;
    margin-left: 183px;
    margin-top: 167px;
    margin-bottom: 33px;
	}

#topLinks {
    margin: auto;
    }

#topLinks a {
    margin: 3px 5px 3px 5px;//top, right, bottom, left
    font-family: whatever sans-serif;
    font-size: whatever;
    }

Make images 843px wide x 60px or so high, blue & white with round corners, and a xxpx high blue strip at the top; i.e., exactly what you see on the screen, for outertop.gif and outerbottom.gif.

Right after

<div id="outerMainWrapperB">

put

<div id="topLinks">
<a href=etc etc...</a>
<a href=etc etc...</a>
</div>

with your HOME PICS CAPTIONS etc. links (you don't need the store link on the store page).

Then put all your top/left logo links in divs with individual id's:

PHP Code:


<div id="BOTKLogo"><a href="/index.php"><img src="/images/botk_sm.gif" alt="Brotherhood of the Kilt - www.KiltsRock.com" longdesc="http://www.kiltsrock.com"  /></a></div>

<div id="kiltphotosLogo"><a href="http://www.kiltphotos.com" target="_blank"><img src="/images/ads/kiltphotos.jpg" alt="www.kiltphotos.com" /></a></div>

etc.

and style them with absolote positioning. This will work from to the top left corner of #outerMainWrapperT, because that has position: relative.

Code:

#BOTKLogo {
    position: absolute;
    top: 67px;
    left: 33px;
    }

#kiltphotosLogo {
    position: absolute;
    top: 78px;
    left: 183px;
    }

etc.

The margins on #mainWrapper will hold it away from top & left to allow the logos clear space, and hold the bottom open for comfort.

Addressing your original question, the center column squeezing right, did you ever set in ZC admin > Configuration > Layout Settings > Column Right status - Global to off? It will still try to reserve its space even if empty, and IE may allow something else to override that while FF doesn't.