Column Width - Left/Right (Boxes) configuration

This may be answered or very obvious but I can't seem to wrap my hands around it.

For ADMIN > CONFIGURATION > LAYOUT SETTINGS:

Column Width - Left Boxes
Column Width - Right Boxes
Column Width - Left
Column Width - Right

All have a statement that says "px may be included".

My question:

Is there a function that I am missing that adds/strips the px when entered?

I know it gets added to the DB exactly as entered.

Using FF and the dev tools it gets added to the style as entered as well.

Clearly this style="width: 180" will have no effect.

I am testing new responsive code and came across this hoping for a better understanding.

I am wondering if this is a unique situation or if I altered something and forgot to comment it.

I will test on a clean install and update.

Outcome on a clean install is different.

admin settings:

Column Width - Left Boxes 180
Column Width - Right Boxes 170px
Column Width - Left 180
Column Width - Right 170px

left column doesn't show class with width

right column shows correctly

left boxes doesn't show class with width

right boxes shows correctly

I am thinking this is a bug and maybe should be updated in future releases.

rbarbour:

Outcome on a clean install is different.

admin settings:

Column Width - Left Boxes 180
Column Width - Right Boxes 170px
Column Width - Left 180
Column Width - Right 170px

left column doesn't show class with width

<td class="columnLeft" id="navColumnOne">

right column shows correctly

<td style="width: 170px;" class="columnRight" id="navColumnTwo">

left boxes doesn't show class with width

<div id="bannerbox" class="leftBoxContainer">

right boxes shows correctly

<div style="width: 170px;" id="whosonline" class="rightBoxContainer">

I am thinking this is a bug and maybe should be updated in future releases.

Correcting myself:
left column doesn't show style with width

right column shows correctly

left boxes doesn't show style with width

right boxes shows correctly

I have been struggling to understand what you are saying here. Then I stumbled upon the following.

From HTML5 manual

http://www.w3.org/TR/html5/single-page.html

10.2 The CSS user agent style sheet and presentational hints

The CSS rules given in these subsections are, except where otherwise specified, expected to be used as part of the user-agent level style sheet defaults for all documents that contain HTML elements.

Some rules are intended for the author-level zero-specificity presentational hints part of the CSS cascade; these are explicitly called out as presentational hints.

Some of the rules regarding left and right margins are given here as appropriate for elements whose 'direction' property is 'ltr', and are expected to be flipped around on elements whose 'direction' property is 'rtl'. These are marked "LTR-specific".

These markings only affect the handling of attribute values, not attribute names or element names.

When the text below says that an attribute attribute on an element element maps to the pixel length property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then the user agent is expected to use the parsed value as a pixel length for a presentational hint for properties.

When the text below says that an attribute attribute on an element element maps to the dimension property (or properties) properties, it means that if element has an attribute attribute set, and parsing that attribute's value using the rules for parsing dimension values doesn't generate an error, then the user agent is expected to use the parsed dimension as the value for a presentational hint for properties, with the value given as a pixel length if the dimension was an integer, and with the value given as a percentage if the dimension was a percentage.

Hope it helps.

rbarbour:

Correcting myself:
left column doesn't show style with width

<td class="columnLeft" id="navColumnOne">

right column shows correctly

<td style="width: 170px;" class="columnRight" id="navColumnTwo">

left boxes doesn't show style with width

<div id="bannerbox" class="leftBoxContainer">

right boxes shows correctly

<div style="width: 170px;" id="whosonline" class="rightBoxContainer">

I have to look for it (I stopped working on this template ages ago..), but I have code that might help.. When I was experimenting with creating a tableless template, I ran into the issue you are discovering..

I needed to enter these values as percentages as well as px, and I also needed it to recalculate the center column based on whether the left or right column was on or off.. The venerable niccol was kind/gracious enough to share the code I needed to do this..

I'll look for my code and e-mail it to ya....

dw08gm:

I have been struggling to understand what you are saying here. Then I stumbled upon the following.

From HTML5 manual

http://www.w3.org/TR/html5/single-page.html

Hope it helps.

I understand the ltr specifics.

What I am trying to say is when you enter 180 instead of 180px in ADMIN>CONFIGURATION>LAYOUT SETTINGS

Column Width - Left Boxes
Column Width - Right Boxes
Column Width - Left
Column Width - Right

180 has no effect
180px works as intended

But the admin configuration descriptions indicate:
Column Width - Left Boxes Width of the Left Column Boxes px may be included
Column Width - Right Boxes Width of the Right Column Boxes px may be included
Column Width - Left Width of the Left Column px may be included
Column Width - Right Width of the Right Column px may be included

That's all.

DivaVocals:

I have to look for it (I stopped working on this template ages ago..), but I have code that might help.. When I was experimenting with creating a tableless template, I ran into the issue you are discovering..

I needed to enter these values as percentages as well as px, and I also needed it to recalculate the center column based on whether the left or right column was on or off.. The venerable niccol was kind/gracious enough to share the code I needed to do this..

I'll look for my code and e-mail it to ya....

ZC stock configuration, has nothing to do with responsive or table-less display.

This brings me to question the min-max values as well seeing how so many people can't get their center-box images to appear consistently with the 80-100 values.

rbarbour:

ZC stock configuration, has nothing to do with responsive or table-less display.

This brings me to question the min-max values as well seeing how so many people can't get their center-box images to appear consistently with the 80-100 values.

I understood that sir.. what I SAID is that I have some code that might help you with the issue you are finding with the admin column settings since I ran into the SAME issue when creating a tableless template once upon a time..

I e-mailed the files to you.. use them don't use them.. the code I used was meant to solve the issue you are running into.. It may not work for you.. The code I sent you allowed me to enter the percentage values in the admin for the column and sidebox widths without any symbols (% or px). The HTML output correctly showed these values as percentages.. This solved the issue you are finding now, so I thought that seeing how I solved the issue with the code niccol provided to me might be useful for you..

DivaVocals:

I understood that sir.. what I SAID is that I have some code that might help you with the issue you are finding with the admin column settings since I ran into the SAME issue when creating a tableless template once upon a time..

I e-mailed the files to you.. use them don't use them.. the code I used was meant to solve the issue you are running into.. It may not work for you..

Gotcha - Diva to the rescue. LOL

rbarbour:

Gotcha - Diva to the rescue. LOL

Gotta give credit where it's due.. if you find the code useful, I only came up with the spec, niccol did the actual heavy lifting to get the column widths all sorted out.. Hopefully it will be useful for what you are trying to do..

DivaVocals:

Gotta give credit where it's due.. if you find the code useful, I only came up with the spec, niccol did the actual heavy lifting to get the column widths all sorted out.. Hopefully it will be useful for what you are trying to do..

Be interesting to compare Diva/Niccol's version with mine.

dw08gm:

Be interesting to compare Diva/Niccol's version with mine.

The tableless layout I created is no real big deal.. It simply uses one of the fluid CSS layouts from the CSS Play website to "convert" the main page table to a tableless layout.. This part of my code will not be of interest to Raymond for what he is doing as it is just a 3-column fluid layout which needs a LOT more work to be responsive.. I don't intend to invest any time into the exercise of making this template responsive as what Raymond has contributed already does this..

The important/relevant part of the code I shared with Raymond is the part which calculates all three columns based on the default values entered in the admin. It then explicitly applies a percentage to that value. (solving the issue where you MUST enter px in the admin or the column width doesn't work) Now while my code explicitly converts the value to a percentage, it might give Raymond an isdea for how to get the code to support either "px" or "%"..

I used the existing admin configs to input column width values in four places qualified as percentages eg "20%". That was the easy part. The rest had to be done with css.

dw08gm:

I used the existing admin configs to input column width values in four places qualified as percentages eg "20%". That was the easy part. The rest had to be done with css.

Right.. I ran into the same/similar issue Raymond is discovering now.. So I simplified what I was doing so that I didn't need to do anything more than enter the values in the admin, and let the code do the rest.. After that I could use whatever CSS I needed do anything else..

dw08gm:

I used the existing admin configs to input column width values in four places qualified as percentages eg "20%". That was the easy part. The rest had to be done with css.

DivaVocals:

Right.. I simplified it and didn't need to do anything more than enter the values in the admin..

niccol;s code is very similar to mine.

niccol uses floatval where I am using preg_replace

I originally set out to remove the px from the admin configuration while doing so I noticed if entered without the px extension it had no effect anyway and thought the ADMINS - DEVELOPERS of ZC would reply as too if this was intentional or not.

Anyway, niccol;s method and mine seem to both work as intended and thank you for that Crystal.

rbarbour:

niccol;s code is very similar to mine.

niccol uses floatval where I am using preg_replace

I originally set out to remove the px from the admin configuration while doing so I noticed if entered without the px extension it had no effect anyway and thought the ADMINS - DEVELOPERS of ZC would reply as too if this was intentional or not.

Anyway, niccol;s method and mine seem to both work as intended and thank you for that Crystal.You're welcome.. Happy to share with you..

After I saw your description of what you were trying to do, and the issue you were running into, it sounded very much like the issue I ran smack into when entering percentage values for the columns AND the SIDEBOXES in the admin.. Which is why I shared in case you found something in the code I had useful..

Looking forward to seeing your next release of the DIY Responsive Template.. I just started creating a new template from scratch using it with (as you know) my FAV starting point template, Barebones.. I had a responsive Barebones template AS SOON as merged the DIY Responsive Template files with Barebones (no other changes).. Simply amazing!!

dw08gm:

I used the existing admin configs to input column width values in four places qualified as percentages eg "20%". That was the easy part. The rest had to be done with css.

DivaVocals:

You're welcome.. Happy to share with you..

After I saw your description of what you were trying to do, and the issue you were running into, it sounded very much like the issue I ran smack into when entering percentage values for the columns AND the SIDEBOXES in the admin.. Which is why I shared in case you found something in the code I had useful..

Looking forward to seeing your next release of the DIY Responsive Template.. I just started creating a new template from scratch using it with (as you know) my FAV starting point template, Barebones.. I had a responsive Barebones template AS SOON as merged the DIY Responsive Template files with Barebones (no other changes).. Simply amazing!!

Amazing will be 2.0

The biggest difference will be cleaner and well commented code.

The next biggest difference will be the ability to use the ZC stock configurations.

I am having a blast testing the different @media query expressions, will help to target specific devices.

The original was rolled out quickly and I received the necessary feedback to make the changes needed (a big part due to the roll out of Anne;s responsive templates). Thank you Anne.