1

I have encountered a strange but irritating problem in the webshop I am working on. In some URL's from the productpages the word spanband (lashing strap in English) and this causes a great problem with the layout of the page.

In the source there is the body tag:

<body class=" catalog-product-view catalog-product-view product-spanband-5-ton categorypath-accessoires-9-html category-accessoires">

Somehow the word span is picked out by the browser as it would be a span tag instead of part of the word spanband. This causes the whole layout to be destroyed. In the inspector in Chrome I can see that the browser uses this bit of CSS from bootstrap-responsive.css

[class*="span"] {float: left;min-height: 1px;margin-left: 30px;}

Unfortunally I can not remove the word spanband from the URL's. Anybody who has a clue what can be the cause of this problem and how to solve it?

Regards, Erik

1 Answer 1

0

You've pretty much hit the nail on the head yourself with what is going on. [class*="span"] is a CSS selector that will match any element with a class that contains the string "span." You know the problem.

As for the solution, I'd be hesitant to remove that CSS, not being familiar with its purpose. However, you can try to override it with your own rule targeting body.product-spanband-5-ton directly or body[class*="spanband"] generically (if you have more than one product triggering this behavior) at a higher specificity than the trouble causing selector. Try to avoid using !important if at all possible to achieve that greater specificity (http://cssspecificity.com/).

1
  • Adam, I'll look into it and thanks for your advise.
    – Erik
    Jan 24, 2015 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.