Product Name Length Breaking Display

[northwalesinks]

Hi there,

 

I have just upgraded from V4 to V5 and have found that having a long product name breaks the display as you can see on this page http://www.northwalesinks.com/store/index.php?_a=product&product_id=135  I've tested this on other descriptions by shortening them and as soon as they reach a certain number (not worked out what that number is) the display corrects itself, like it does with http://www.northwalesinks.com/store/index.php?_a=product&product_id=312

 

As you can see, with a long description the left-hand sidebar moves over the the right and the centre and right columns drop down the page.

 

Does anyone know of a fix for this, or how long the maximum product name can be?

 

Many thanks in advance.

[Dirty Butter]

We try to keep our titles to 64 characters or less, including spaces, following Google's guidelines.

[bsmither]

"Does anyone know of a fix for this, or how long the maximum product name can be?"

 

For a work-around, in your skin's common.css, the rule at line 137, you can set padding-left: 0; (currently 200px). That will give you more room for your breadcrumbs.

 

A better work-around is the rule at line 141 and comment this line to look like: /* height: 21px; */  That removes the height limit of the breadcrumb area, allowing it to grow instead of overflow, thus pushing the areas below it down instead of the overflow intruding and causing the floating parts to float out of position.

 

I understand your need to have product names be as descriptive as possible, but I think you may have overshot.

 

"Compatible Ink Cartridges suitable for eps0n Stylus Photo 780-790-870-875DC-890-895-915 Pair Of Ink Cartridges"

 

We already know we are in "Ink Cartridges" (category), and that they are "Epson Compatible" (sub-category).

 

In the main.php template, near line 58, find:

<li><a href="{$crumb.url}">{$crumb.title}</a></li>

 

Change it to:

<li><a href="{$crumb.url}">{$crumb.title|truncate:30:"&hellip;}</a></li>

 

But that now reveals that the first 30 characters of your product names for ink cartridges are redundant and does not provide any additional info as a breadcrumb.

 

The database can hold a product's name of a maximum of 250 characters.

[petecube]

Hi  bsmither is right the product titles are rather long considering the width of the content area of the page containing the breadcrumbs, but as he points out they can be 250 chars long, obviously this includes spaces, so really the layout should be able to cope with this and fail gracefully rather than break the page layout reflowing the page. 

 

I avoid using CSS hacks, there is always a better way, all major or modern browsers support the min and max-height property now which will allow you to define a minimum and maximum height for a block level element such as a div or paragraph within the same expression or style rule.

 

http://www.w3schools.com/cssref/pr_dim_min-height.asp

 

This is down to the page layout and the CSS expressions, all the style sheets are littered with CSS expressions that contain the keyword !important, when you have to use this keyword to apply a style to any element the problem is simply down to not being specific enough with the selector/s, this usually happens when you have a parent element that has an ID applied to it which is used as the style selector to apply a style expression and the child element has a class selector applied to it.

 

The parent element that has a style applied using its ID has a higher precedence in the CSS Cascade so its style rule/s over ride the styles applied to the child element or its siblings via a class selector, so the parent elements ID must be listed before the child class selector, your basically just drilling down the DOM in the same way you would if you were wanting to manipulate the same element via JScript.

 

I stopped using tables for layout over 5 years ago and I find the best way to create a robust layout, is to simply layout the elements as close to their natural stacking order within the page, this means if the styles break for some reason the failure is much more graceful and has less impact on surrounding elements, applying IDs to only form elements and anything that may need scripting and using classes for structural elements and content helps avoid this.