Why is the content shown inside jQuery Dialog Box sort of cramped?

 $(document).ready(function() {
        $('.something').each(function() {

            var $link = $(this);

            $link.click(function() {

                var $dialog = $('<div></div>')
                .load($link.attr('href'))
                .dialog({
                    autoOpen: false,
                    title: "Edit Book",
                    width: 开发者_C百科'auto',
                    height: 'auto'
                });

                $dialog.dialog('open');

                return false;
            });
        });
    });

I have this code to show the contents which is linked by the href attribute of anchor tag. This works perfectly! But the only issue is all the information is sorta cramped up when displayed inside jQuery dialog box.

Usually when not inside a dialog box the page looks like this, the way i want it to. http://awesomescreenshot.com/0983qpcad

But when inside a dialog box it looks like this, cramped up!

http://awesomescreenshot.com/09c3qpf1b

Is there anything obvious I am missing in regards to options in jQuery dialog box? Or any ideas on potential fixes?? Thanks a million in advance :)

Check your CSS rules - it appears they aren't being applied to elements within the dialog.

My guess is that your stylesheet is included in the target page referenced by $link.attr('href'). However, when you use load to load the page contents, stylesheets and other non-content elements are discarded. You need to include the CSS in the parent page.