Site Shift in Firefox

Hi again Ray,

Thanks, I got your answer.

The css-d folk are absolutely terrific if you can ask something that grabs their interest, and especially if you can put the problem into a test page so they can deal with it in isolation. They've done some wonderful things over the years. But I have found that if you ask them about a Zen Cart problem that can't be isolated, then there's no answer.

To get this thread back on the problem at hand, I wonder if we can simply force this to behave in an old-fashioned way. After all, the problem bit is a TD and we used to be able to force tables to load politely. But the brain cells haven't thought that way in a long time, so bear with me while I think it through out loud.

So, having started up Aardvark in FF, I see that the bit that draws in the middle and then shifts over is identified as td, id: navColumnOne, class: columnLeft, style: width: 150px;

The TD is both IDed and classed, so it could be further defined in the style sheet. Or that hard-coded style could have something added. And it's inside the main Table with an id of contentMainWrapper. Maybe we can hit that too, since my site has a fixed width. A table with a declared width should reserve that much space while the page is being drawn even if its contents aren't yet known by the browser, shouldn't it?

So I'll go have a look at the stylesheet and see if I can specifically force the table width and see if that helps. I shall report.

Rob

No luck so far. The table is already coded to be 100% of its container width and that doesn't hold the space. I guess the browser thinks it's empty until it starts to fill it up one chunk at a time.

And trying align: left in the TD -- besides being incorrect for XHTML -- also didn't work, probably for the same reason.

So we need to get more subtle. :wink:

Any way to force the browser to finish loading the page in memory before drawing it all at once? Via PHP? That would do the trick if it's at all possible.

Rob

Hi Rob,

I just tried something in FireBug that may do the trick. Of course, it may be that I'm needing more sleep than anything else, but it's worth a try.

In the main stylesheet, find this:

#navColumnOne {
background-color:#C3D4D4;
border-color:#336699;
border-style:solid;
border-width:0pt 3px 0pt 0pt;
}

Add this line before the end }
width: 1px;

When I did that and reloaded, the column generated at the left, instead of center and then moving over.

There's something about designs where width: auto; is declared....something I clearly can't remember.

HTH,
~Ray

Add this line before the end }
width: 1px;

Hi Ray,

Thanks but it didn't work. (I only checked in FF on OS X.)

Rob

rstevenson:

Hi Ray,

Thanks but it didn't work. (I only checked in FF on OS X.)

Rob

Have you tried giving #contentMainWrapper a width?
When it loads, and there's nothing in #contentMainWrapper, that's why it doesn't know how wide it should be. Try:

#contentMainWrapper {width:800px}

Did a little more research based on thoughts by Rob and Ray. One site the does what I want them to do has this added to the css.

.navColumnOne, .navcolumnTwo{
margin: auto;
{

Haven't had a chance to try it yet but wanted it out there before beddy-by time.:D

Sorry, neither of those worked. :frusty:

Rob

rstevenson:

Sorry, neither of those worked. :frusty:

Rob

Actually, I should have said .centerColumn instead of #contentmainwrapper

You may also want to instead define a width for the td just before the breadcrumbs, like this:

Nope and nope. :P

Specifically defining a width is going to be problematic anyway, as most of these elements have padding and margins in mixed units. Maybe one of these days I'll start with a clean slate and see what happens.

Basically what we need is to able to say to the columnOne block, "Stay over on the left!" no matter what its width happens to be. Alas, CSS does not offer us an align: left; style definition.

Probably, with a great deal of trial and error, I could work it out with position: absolute (that's what holds the logo where it is) but I'm too tired to try it today. :sleepy: And I feel a 9-ball tournament coming on tomorrow, so.... :cheers:

Later,

Rob

rstevenson:

Nope and nope. :P

Specifically defining a width is going to be problematic anyway, as most of these elements have padding and margins in mixed units. Maybe one of these days I'll start with a clean slate and see what happens.

Basically what we need is to able to say to the columnOne block, "Stay over on the left!" no matter what its width happens to be. Alas, CSS does not offer us an align: left; style definition.

Probably, with a great deal of trial and error, I could work it out with position: absolute (that's what holds the logo where it is) but I'm too tired to try it today. :sleepy: And I feel a 9-ball tournament coming on tomorrow, so.... :cheers:

Later,

Rob

Try this:

#navColumnOne {
background-color: #C3D4D4;
border-color: #336699;
border-width: 0 3px 0 0;
border-style: solid;
float:left;
}

.centerColumn, #navBreadCrumb {float:left;width:632px;}

I think you may find that you need to define a width to get that to stop happening. The table holding the left column and center column has a width of 100%, and since the .centerColumn is empty as the page is refreshing, then the table becomes 100% at only 150px, and its centered because you have margin: auto; for the main wrapper.

You may also want to change contentmainwrapper to 800px instead of 100% in the HTML.

Hi jade,

The float: left worked to keep the left column over there while it loads. I also separately put in the next suggestion and then took it out again since it had no apparent effect -- at least not on this issue.. But...

Now the problem is that the left column appears to end just after the bottom of the lowest sidebox. You can see it now on the Home page, or on any page where the content is longer than the left column -- which is all of them.

What I mean by end is that its colour stops and the background colour shows through. Odd that float: left would do that. So I tried adding height: 100% to that definition and it didn't help.

I don't have time to debug it at the moment. Must get my beauty sleep for the tournament tomorrow!

Thanks for the help so far.

Rob

Got it.

Move the float: left; to...

#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: auto;
	float: left;
}

That holds the left column on the left while the rest of the page loads, and it doesn't cause the left column to end prematurely.

Rob

dbltoe:

In Firefox, Zen opens temporarily with only the left sidebox showing and it in the middle of the screen momentarily. THen, as the rest of the page appears, the left sideboxes slide into position.

I have the same problem on some of my pages. Here is the link (in IE works fine - so when testing please use Firefox)
http://www.time-co.com/zencart/index.php?main_page=index&cPath=1_17

Please help if you know how - this drives me nuts. Thanks!:lookaroun

rstevenson:

Got it.

Move the float: left; to...

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: auto;
float: left;
}

>  
> That holds the left column on the left while the rest of the page loads, and it doesn't cause the left column to end prematurely.
>  
> Rob
 
 
Just adding the float: left; did fix the shifting problem on load (in Firefox) for me!
I didn't have the margin: auto; line there...
 
#navColumnOneWrapper, #navColumnTwoWrapper {
    float: left;
 }

Thanks!

Hello,

I've an interesting problem I've never encountered before.

In firefox (see firefox.jpg) and in IE (see ie.jpg), I seem to have a gap in between the top home/login bar, and the header.

I've tried adjusting height tags, adding, removing and still can't seem to get rid of the gap. Can anyone tell me what is happening with a possibility of how to fix it.

The site this is at is: http://www.primitiveheartembroidery.com/store/index.php

I would greatly appreciate any help possible.

Thank you,

Marian

at line 46 of your index.php, in div id="tagline", delete <h1></h1>

bruno

Hi Orinoco,

My index.php does not have a tagline id at all in it, not even a <h1> tag. I did check the tpl_header.phps and while they have the tagline id, they do not have a h1 tag in them.

Marian

Not a good idea to try to edit a file that is created on the fly.

The define that adds the <h1> is around line #76 of the tpl_header.php but, even that is not the place to handle the fix. You'll note that the line says it is using the variable HEADER_SALES_TEXT.

Using the developers tool kit in the admin of your site, searching for HEADER_SALES_TEXT in all files winds up showing some 3 or 4 possible changes to make this work.

Where most make the mistake is that they take line #21 of the header.php> Line #21 : define('HEADER_SALES_TEXT', '<h1>Sales Message Goes Here</h1>');and turn it into > Line #21 : define('HEADER_SALES_TEXT', '<h1></h1>'); or > Line #21 : define('HEADER_SALES_TEXT', '<h1>'); In your case, it should look like > Line #21 : define('HEADER_SALES_TEXT', '');Note that all the text and code EXCEPT the two single quotes are gone.

Make sure your save the file to includes/english/phe/header.php

Hi dbltoe,

Thank you for your help, that was the problem and it is now fixed.

Marian

Glad you got it going!:thumbsup: