[solved] Website does not display consistently

[musicmaster]

I have tested my newly designed website (http://www.topsnoep.nl/) on different browsers and computers. It seemed ok.

 

Now I am getting reports from some people that on their computers it displays wrongly in Google Chrome, while in other browsers it displays ok. 

 

I am puzzled by this problem. I have been speculating that it might be some kind of fontsize but until now I haven't found a cause that I can reproduce.

 

In the normal display on the homepage and in the categories you see five products on a row. In the distorted display they don't fit so you get four on a row and the fifth on a second row - but not in a consistent way.

 

Does anyone recognize this problem? And does he know what causes it and how I can solve it?

Edited October 16, 2013 by musicmaster (see edit history)

[PascalVG]

Did you receive a screenshot of a distorted one? If so, please share. Maybe we can see what's different on that screen (like you said, font size/type, other browser settings or so)

 

pascal

[vekia]

the only one thing that i found in chrome is:

 

 

everything else works well and isn't "missplaced" etc.

[musicmaster]

Hi Vekia,

 

Thanks for noticing that one. I saw it happens in Firefox too. 

 

I am puzzled what causes this as I am using in category.tpl and global.css as far as I can see the same code for this pagination bar as the Prestashop original. 

[PascalVG]

Hi mm, Vekia,

 

Problem with the top and bottom pagination layout is this:

 

Example:

The top bar has a "Vorige" (i.e. previous) button, which is defined as:

 

<li class="pagination_previous" id ="pagination_previous">

 

The bottom bar has a "Vorige" (i.e. previous) button, which is defined as:

 

<li class="pagination_previous" id ="pagination_previous_bottom">

 

 

All nice and well. Problem is that in the css, the ID is used to NOT the Class

 

#pagination_previous {

    float: left;
}

 

instead of :

 

.pagination_previous {

    float: left;

}

 

 

(see the difference? # indicates a single object with ID xxx, the dot '.' indicates a CLASS xxx, i.e. more objects that belong to this class)

 

So we have to find the definition of  #pagination_previous, most probably in themes/<your theme folder>/css/global.css:

Search for pagination_previous (use Ctrl-F to search on page)

 

I see in PrestaShop verion 1.5.5.0, they fixed this, like this:

 

#pagination_previous, .pagination_previous {float:left}

#pagination_next, .pagination_next {float:right}

 

(They just add both)

 

They do the same trick for:

#pagination_previous, .pagination_previous span,

#pagination_next, .pagination_next span {

  color:#ccc;

  border:1px solid #eee

}

 

So change this as well (probably found close to each other)

 

 

My 2 cents,

pascal

[musicmaster]

Hi Pascal,

 

Thank you for your suggestion. I implemented it and it improved things.

 

Unfortunately it didn't totally solve the problem. What I now see is that the buttons at the bottom are too small and as a consequence the text runs outside them. 

 

I tried to analyze it. The buttons are defined in this css:

ul.pagination {list-style-type:none}
ul.pagination li {display: inline;}
ul.pagination a, ul.pagination span {
	display:inline-block;
	height:24px;
	width:24px;
	border:1px solid #eee;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	font:11px/24px Arial,Verdana,sans-serif;
	color:#999
}

#pagination_previous, .pagination_previous {float:left}
#pagination_next, .pagination_next {float:right}
#pagination_previous a, #pagination_previous span, .pagination_previous a, .pagination_previous span,
#pagination_next a, #pagination_next span, .pagination_next a, .pagination_next span {
	padding:0 8px;
	width:auto;
}

The first part defines a block of 24x24. With borders that makes 26x26. The second adds padding. The result is a block of 42 wide and 26 high and that is exactly the size of the buttons at the bottom. 

 

What is different is the effect of the text inside the blocks. In the top bar it widens the blocks while in the bottom bar it doesn't change the block and as a consequence runs outside it.

 

Do you have any suggestion what could change this different behavior?

 

 

[PascalVG]

Hi mm,

Can you turn off Advanced Parameters->Performance, Minify HTML and Smart Cache for css (Set to Keep as Original). Then it's easier to find out where things come from. (It does something wrong with order of processing the css. Above the width is set by 

 

#pagination_previous a,#pagination_previous span, .pagination_previous a,.pagination_previous span, #pagination_next a, #pagination_next span, .pagination_next a, .pagination_next span {

1. padding: 0 8px;
2. width: auto;

}

 

Which comes AFTER

 

ul.pagination a, ul.pagination span {

1. display: inline-block;
2. height: 24px;
3. width: 24px;
4. border: 1px solid #eee;
5.  
   -moz-border-radius: 2px;
6. -webkit-border-radius: 2px;
7. border-radius: 2px;
8. font: 11px/24px Arial,Verdana,sans-serif;
9. color: #999;

}

 

Below, these are processed in reverse order... ???

 

If nothing helps, you can fix it like this:

ul.pagination a, ul.pagination span {

1. display: inline-block;
2. height: 24px;
3. width: auto;             <- change to  auto
4. min-width: 24px;         <- add min-width: 24px; to keep page # buttons correct
5. border: 1px solid #eee;
6.  
   -moz-border-radius: 2px;
7. -webkit-border-radius: 2px;
8. border-radius: 2px;
9. font: 11px/24px Arial,Verdana,sans-serif;
10. color: #999;

}

 

But first set to original the two options mentioned above.

 

pascal

[musicmaster]

Hi Pascal,

 

Thank you for the reaction.

 

I have changed the website settings as you asked.

 

mm

[PascalVG]

OK, this was a tough one:

Has to do with 'priorities' in CSS. Which rule has priority over others. Let me try to explain:

 

I noticed that the bottom buttons didn't get the Width: auto. The top buttons did!

Let's look at the code:

 

http://www.topsnoep.nl/themes/cakeshop/css/global.css, line 533:

#pagination_previous a, #pagination_previous span,.pagination_previous a, .pagination_previous span,#pagination_next a, #pagination_next span, .pagination_next a,.pagination_next span {

padding: 0 8px;

width: auto;

}

 

http://www.topsnoep.nl/themes/cakeshop/css/global.css, line 507: (Notice, earlier in the file! Normally, rules later in the file take precedence!!)

ul.pagination a, ul.pagination span {

 display: inline-block;

 height: 24px;

 width: 24px;

 border: 1px solid #eee;

 -moz-border-radius: 2px;

 -webkit-border-radius: 2px;

 border-radius: 2px;

 font: 11px/24px Arial,Verdana,sans-serif;

 color: #999;

}

 

If later code normally takes precedence, why didn't this happen in this case??

 

Remember our 'Vorige button' code to be like this:

<ul class="pagination">

  <li id="pagination_previous_bottom" class="disabled pagination_previous">

    <span>« Vorige</span></li>

 

The rule on 507 describes the button width to be 24px;

Rule 533 set's

- it's width  to auto,

- and adds additionally a padding border of 8px around the button

 

What we see however in the lower button:

- width of 24px;

- padding of 8px;

 

Have a look at the code:

The rule on 507,defines a rule that starts higher in the cascade (hierarchy)at the top of the tree  (ul.pagination) and then adds a general rule for all spans

Rule 533 starts lower in the cascade (hierarchy) at the first 'child' in the tree (.pagination_previous), then adds code for a span

 

The higher defined general rule takes here precedence over a lower rule!!

(to add to the confusion, the padding:8px IS used, as there is no overwriting code in line 507 about padding! So this is still used!

 

Last question is, why didn't this work the sam way at the TOP button??

As the top button has an ID pagination_previous, next to the class pagination_previous, it still got precedence over the class definition in 507... (definitions for individual ID's get precedence over classes). (You could try this by changing the ID pagination_previous of the top button to pagination_previous_top, it will then have to use the class pagination_previous for it's layout, and you will see the same problem as the bottom button)

 

Indeed, confusing and extremely detailed and hard to find 

 

So how to solve this? We have to define the width: auto on the same level as the width:24px;

So add this to http://www.topsnoep.nl/themes/cakeshop/css/global.css, line 533:

.pagination #pagination_previous a, .pagination #pagination_previous span, .pagination .pagination_previous a, .pagination .pagination_previous span, .pagination #pagination_next a, .pagination #pagination_next span, .pagination .pagination_next a, .pagination .pagination_next span {

    padding: 0 8px;

    width: auto;

}

 

Then, because the rules are then defined on the same level, it follows the 'rule' later in the file overwrites the previous rule.

 

From your loyal teacher,

pascal

 

Homework: make the changes as described.  

Edited October 16, 2013 by PascalVG (see edit history)

[musicmaster]

Hi teacher,

 

Thank you very much for this great explanation. I am really impressed.

 

mm

[PascalVG]

Glad it helped!

 

Pascal