[RESOLVED] Width of the element to which jQuery Cycle is applied to

Hi guys :wave:

In my site, there's a newsbox. It contains DIVs for each news. And I have specified the width of it to be 270px. But sometimes, the width is increased to 1024px, ie. the text inside it will be displayed as a single sentence.

When I checked in Google, it was displayed as a single line at first. When I checked in Firefox, it was normally displayed. But when I refreshed Chrome again, this was fixed. Yesterday also, it was like so.

Here's the link to the site: www.akhileshbc.com
Top-right side contains the newsbox.

Code:

html Code:

<!-- News box -->
            <div id="top_newsbox">
                <div id="news">
                    <div id="top_news">
                        <div class="msg">I have moved to a better server now :)</div>
                        <div class="msg">My site is up and running. Only 2 pages were included at the moment(ie. HOME & CONTACT page). I'll finish the rest of the pages soon. Don't forget to visit my site later :)</div>
                    </div>
                </div>
            </div>

Css:

css Code:

#top_newsbox
{
    float:right;
    width:392px;
    height:108px;
    margin-top: 13px;
    margin-right:20px;
    
    background-image: url(images/top_news_box.png);
    background-repeat: no-repeat;
    
    
    padding-top:15px;
}
 
#top_newsbox #news
{
    margin-left: 105px;
    width: 270px;
    height: 75px;
    font-size: 11px;
}
 
#top_newsbox #news #top_news
{
    width: 270px;
    height: 75px;
    
    /*border: 1px solid #000000;*/
    
}
#top_newsbox #news #top_news .msg
{
    width: 270px;
    line-height: 16px;
}

I have tried debugging it myself. The css above is copied from the playground. So, it might look a bit messy.

Thanks in advance :wave:

It may or may not be the cause of your problem, but you should load all stylesheets before any Javascript. The cycle() function seems to be overwriting your cascaded styles with an inline style attribute; this is probably unintentional, so my guess is that the CSS width isn't applied (sometimes) when it starts doing its thing, so it uses the unstyled width of the element (which is however long the text makes it).

As an aside, you want CSS selectors to be as short as possible. ID attributes are unique (if you're authoring properly), so there shouldn't be any need to list them in hierarchy.

Thanks Samba, I have moved the styles above the JS. Now when I checked in Chrome, it seems working. Will try again to finalize that the issue is cleared.

I thought, it would be the problem with div (with id) causing the problem. ie. I have applied margin-left attribute to place some pixels from the left. And when Cycle is applied to the div, it might be overwriting the styles to position it absolute and might have caused the conflict. So, I have wrapped another div around this for only assigning the margin-left attribute and the div inside it was assigned with the width and height property only.

:wave: