Search code examples
csshtmlparentinheritance

CSS/HTML - forcing style to child from parent

I have a content div with font-family:Tahoma. When user click on a post clink an ajax code will fetch content of that post and put in my specific div.

On a normal situation (before clicking any link) the content shows in Tahoma font, The problem appears when the ajax is called and the new content is shown in different font and size.

How can I make the new printed content show in my desired font-family (Tahoma)? Meaning inherit the font from the parent.

HERE IS MY HTML CODE : http://jsfiddle.net/KZAVd/

This is what happens after clicking a post (checked using Firebug): http://jsfiddle.net/KZAVd/3/

Solution

  • No need to handle all the mundane tasks of AJAX yourself, let jquery do it.

    function ajaxFunctionFinal(id, title, content)
{
    var queryString = "?post_id=" + id + "&ts=" + new Date().getTime();

    $.ajax({
        url: "fetch.php" + queryString,
        complete: function(data){
            $("#post_more").html( data.responseText )
                .find('*').removeAttr("style");
            $("#post_content").html( content );
            $("#post_title").html( title );
            InlineMp3();
        }
    });
}

    The line of particular interest to you is .find('*').removeAttr("style"); which will grab all descendants of the newly inserted content and toss their style attributes, thus crushing the in-line styles that came with them and allowing your css full control.

    ps: I obviously can't test this, so feel free to comment with any problems, or post a full url to fetch.php so that I can test it with you (if that doesn't have private information)