Search code examples
htmlcsszen-cart

Different layout display on website over multiple loads

I am having an extremely odd issue creating a template for my zencart ecommerce website.

I find that many times I load the website my menu will break up and split over two lines as shown below.

enter image description here

The reason I find this behavior odd is that if I refresh the page it correctly displays.

enter image description here

Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.

Link to live site: http://digitalmatrixonline.com.au/

Thanks Jason

Solution

  • If you add 

    white-space:nowrap;

    To the div that contains the list it should prevent this, not sure why it's happening though.

    Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/

    Edit: No floats http://jsfiddle.net/BsGfu/2/