Right sideboxes are not aligning correctly on the right

[DivaVocals]

Using the handy dandy Firefox tools, I have been all over this site trying to figure out why the right edge of the sideboxes is not lining up correctly.. It's only very slightly off, but it's driving me NUTS that I can't figure out why..

I have been ALL over this stylesheet, and the alignment is a little better than it was when I started out troubleshooting this.. I am hoping that one of the resident geniuses here can take a looksee, and tell me what I have (stupidly) missed..

http://clients.overthehillweb.com/lanikshair/

[dscott1966]

Using the handy dandy Firefox tools, I have been all over this site trying to figure out why the right edge of the sideboxes is not lining up correctly.. It's only very slightly off, but it's driving me NUTS that I can't figure out why..

I have been ALL over this stylesheet, and the alignment is a little better than it was when I started out troubleshooting this.. I am hoping that one of the resident geniuses here can take a looksee, and tell me what I have (stupidly) missed..

http://clients.overthehillweb.com/lanikshair/

Try playing with the column widths in your admin under configurations>layout settings.

see if that will help.

[DivaVocals]

Try playing with the column widths in your admin under configurations>layout settings.

see if that will help.

Strangely, I had tried that before I started this thread.. I have to admit when I first read your response I rolled my eyes, and screamed at the computer "BUT I ALREADY TRIED THAT!!!!"

Then I thought I'd give it a try if only to tell you that it didn't work.. Well guess what?? It worked.. I set my right column to 160px, and the right sidebox to 159px, and it was better, but when I set the right sidebox to 158.5px, it was dead on.. Who knew???

Strange.. I guess this is new for me because this is the first cart I've built where we used the right sideboxes.. I normally don't like the look of stores with sideboxes in both columns.. But I have no choice since this is an OS Commerce conversion, and the client likes the 2 column look..

So anyway.. thanks for the hand.. At least now I know...

[rstevenson]

Checking your site here in the latest Firefox for Mac OS X, the right sideboxes project slightly outside the right edge of the site background -- just a pixel or two. Safari and Opera both display it correctly. They use a different rendering engine than Firefox does, and different rendering engines will do the arithmetic differently when presented with a fractional pixel size.

I suspect that what is happening is there are too many conflicting size descriptions, some coming from the admin settings, and then others coming from the stylesheet. It can get very tricky tracking them down and finding the culprit, in particular because anything inside a block can push the block out because of its own size requirements.

As I understand it, ZC v1.4 will be better in this regard, as it should be fully CSS based. I'm assuming (hoping, rather) that this means there will be no size settings coming from the admin side. We'll see.

Rob

[rstevenson]

... continuing ... after a look through the W3C's info ...

I'm tempted to think the problem lies with this definition, if only because I don't understand it:

.leftBoxContainer, .rightBoxContainer
{
border-top-width: 1px;
border-right-width-value: 1px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: solid;
border-right-style-value: solid;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: solid;
border-left-style-value: solid;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: #cccccc;
border-right-color-value: #cccccc;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: #cccccc;
border-left-color-value: #cccccc;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
margin-bottom: 0.75em;
}

I couldn't find any reference to the word "physical" for use in defining borders, though I could easily have missed it. As well, the parts that say "-rtl-source" and similar seem to be unfindable on the W3C site. If I were me, I'd write that whole thing as simply:

.leftBoxContainer, .rightBoxContainer
{
border: 1px solid #cccccc;
margin-bottom: 0.75em;
}

Then I'd see if the problem went away.

HTH

Rob

[DivaVocals]

Checking your site here in the latest Firefox for Mac OS X, the right sideboxes project slightly outside the right edge of the site background -- just a pixel or two. Safari and Opera both display it correctly. They use a different rendering engine than Firefox does, and different rendering engines will do the arithmetic differently when presented with a fractional pixel size.

I suspect that what is happening is there are too many conflicting size descriptions, some coming from the admin settings, and then others coming from the stylesheet. It can get very tricky tracking them down and finding the culprit, in particular because anything inside a block can push the block out because of its own size requirements.

As I understand it, ZC v1.4 will be better in this regard, as it should be fully CSS based. I'm assuming (hoping, rather) that this means there will be no size settings coming from the admin side. We'll see.

Rob

Well after making the column size adjustments this site shows correctly in Firefox for PC.. I'll have to checkout Browser Shots to see what it looks like on the Mac..

... continuing ... after a look through the W3C's info ...

I'm tempted to think the problem lies with this definition, if only because I don't understand it:

.leftBoxContainer, .rightBoxContainer
{
border-top-width: 1px;
border-right-width-value: 1px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: solid;
border-right-style-value: solid;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: solid;
border-left-style-value: solid;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: #cccccc;
border-right-color-value: #cccccc;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: #cccccc;
border-left-color-value: #cccccc;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
margin-bottom: 0.75em;
}

I couldn't find any reference to the word "physical" for use in defining borders, though I could easily have missed it. As well, the parts that say "-rtl-source" and similar seem to be unfindable on the W3C site. If I were me, I'd write that whole thing as simply:

.leftBoxContainer, .rightBoxContainer
{
border: 1px solid #cccccc;
margin-bottom: 0.75em;
}

Then I'd see if the problem went away.

HTH

Rob

I'm not sure where you saw this definition.. It's not in ANY of this sites's stylesheets. (Never has been) What you suggested though is what is ACTUALLY in my stylesheet.. I'm not sure what you are seeing..

[rstevenson]

I'm not sure where you saw this definition.. It's not in ANY of this sites's stylesheets. (Never has been) What you suggested though is what is ACTUALLY in my stylesheet.. I'm not sure what you are seeing..

I can't find it this morning. But then, your site looks different this morning, so that's not surprising.

Rob

[DivaVocals]

I can't find it this morning. But then, your site looks different this morning, so that's not surprising.

Rob

It actually isn't very much different at all.. (Other than updating some of the Defined pages content..) Strange though that you found that code.. This site's stylesheet started it's life as the "default" template's stylesheet. (I wanted to use a "vanilla" template and build my own custom template for this site)

Most of the changes I made to the stylesheet have been minor (to incorporate my client's colors and background graphics into the site & merging the returns stylesheet with the main style sheet)

Honestly.. that code you referenced was NEVER a part of my stylesheet.. But I appreciate your wanting to help..

[rstevenson]

I was using the Web Developer add-in in Firefox, selecting CSS/View Style Information and then clicking on various parts of your page. When I clicked on the area surrounding your right sideboxes, but just inside the right column, I got that CSS declaration. And later couldn't get it back.

One thing I noticed that was different was the brown horizontal bar. It was just below the header earlier and was near the bottom of the page later. But I'm sure that had no bearing on the CSS I saw.

I'm guessing that that particular command in the Web Dev tool was assembling all the definitions that were affecting the object I clicked on and presenting it all in one chunk. I don't know how I could have seen that otherwise. And that would explain the odd terminology in the code chunk, since that's probably what it is "inside" the browser's rendering engine. Maybe. During a full moon.

Rob

[gjh42]

I've seen information output I think in Firebug that had that kind of formulaic verbose declarations, while the actual stylesheet applying to the element was more succinct.