Site Shift in Firefox

[rstevenson]

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

[rstevenson]

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.

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

[BouncerFL]

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

[rstevenson]

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

[jettrue]

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}

[dbltoe]

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.

[rstevenson]

Sorry, neither of those worked.

Rob

[jettrue]

Sorry, neither of those worked.

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:
<td valign="top" style="width: 620px;">

[rstevenson]

Nope and nope.

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. And I feel a 9-ball tournament coming on tomorrow, so....

Later,

Rob

[jettrue]

Nope and nope.

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. And I feel a 9-ball tournament coming on tomorrow, so....

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&#37;, 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.