My code is working in IE 8 but not working properly in FireFox and Google Chrome.
Actually by JQuery I am loading html page in div in same page this working properly in IE but in FF and in GC page opens but not in div it open like target_self type. Means my link page is overridden by the new page
Hi
I am try to load a html page using jquery, I am able to load html page successfully by a click on link, but problem is loaded page is not using style sheet.
Code jscript-

$(function(){
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#content').load(page_url);
    });
});


<div id="nav" class="image002-03">
        <span id="smalltext" 
            style="bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; font-family: Calibri; font-size: large; text-align: center;">Service Menu</span>
        <ul id="ul1" class="serviceul">
            <li class="serviceli"><a href="testpage1.htm">Question Papers (unsolved)</a></li>
            <li class="serviceli"><a href="#">Question Papers (solved)</a></li>
            <li class="serviceli"><a href="#">Sample Papers</a></li>
            <li class="serviceli"><a href="testpage2.htm">Notes</a></li>
            <li class="serviceli"><a href="#">Solved Assignments</a></li>
            <li class="serviceli"><a href="#">Projects</a></li>
            <li class="serviceli"><a href="#">Presentations</a></li>
            <li class="serviceli"><a href="#">Uploads</a></li>
            <li class="serviceli"><a href="#">Forum</a></li>
        </ul>
</div>

Above code load a testpage1.htm my testpage.htm code is

<head>
    <title>cbse cs n ip</title>
    <link href="css/innerPage.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="mainbody">
    <div id="bodytext">
        Question Papers (unsolved)
        </div>
        </div>
</body>

and innerPage.css contain following style -

#mainbody
{
    background-color: #FF3300;
    height: 434px;
    margin-top: 137px;
}
#bodytext
{
    font-size: large;
    font-weight: bold;
    width: 214px;
    color: #CC0099;
}

Above css is not working. Totally confused

I tried the above code over here. It seems to work fine in all the major browsers. The CSS of the loaded HTML is also loaded and applied just as expected.

Are you getting any errors in your browser's Javascript dev tools? (Usually brought up with the F12 key or CTRL+SHIFT+J)

Could you show us a live example of a page where the problem is showing? Or perhaps just send us the complete project so we can set it up and see for ourselves?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.