CSS takes effect after page has rendered

Question

I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.

The main issue I am seeing is with the JQuery tabs that I am using http://docs.jquery.com/UI/Tabs#source

When the page renders, the tabs show one below the other for a second like this:

One 
Two
Three

and then render properly as tabs

Is there a quick and easy way to fix this. Thanks

Answer 1

It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.

You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.

Hope this helps!

EDIT:

For the first option, let's say that this is your div containing the tabs:

<div id="tabs">
  ...stuff...
</div>

In your stylesheet, hide #tabs:

#tabs {
    display:none;
}

Then, modify your jQuery UI call like so:

var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});