Question

The elements in my pages first appear in random places before it is moved to the correct place when the page is fully loaded. This is not graceful at all.
I would like them to directly appear at the correct place.
I am guessing that this is because the elements in the page are loaded before my css?

I am using less and assetic in a Symfony2 project, how could I handle it so that the elements appear directly at the correct place?

Here is how I handle my css assets:

    {% block stylesheets %}
        {% stylesheets
            filter='less, ?yui_css'
            output='bundles/yopyourownpoet/css/bootstrap.css'
            '@YOPYourOwnPoetBundle/Resources/public/less/bootstrap.less'
        %}
            <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
        {% endstylesheets %}
        {% stylesheets
            filter='less, ?yui_css'
            output='bundles/yopyourownpoet/css/bootstrap-responsive.css'
            '@YOPYourOwnPoetBundle/Resources/public/less/responsive.less'
        %}
            <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
        {% endstylesheets %}
        <link rel="stylesheet/less" href="{{ asset('bundles/yopyourownpoet/less/bootstrap.less') }}">

        <link href="{{ asset('bundles/yopyourownpoet/css/layout.css') }}" type="text/css" media="screen" rel="stylesheet" />
        <link href="{{ asset('bundles/yopyourownpoet/css/style.css') }}" type="text/css" media="screen" rel="stylesheet" />
        <link href="{{ asset('bundles/yopyourownpoet/css/jquery.cluetip.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}

Answer 1

I do now precompile my css files with node, and don’t use the less.js script anymore.

This solved the issue, the elements now appear directly at the correct place in the page.