Question

I am having issues with rendering a ‘chat bubble’ in a div.

See Demo Here

When the CSS rules for the bubble container are applied using a className as the selector it is rendered differently then when the ID is the selector (pure CSS or JQuery, so It is not a JQuery issue).

Here is the CSS

#tweetBox {
    position: absolute;
    top: 72px;
    right: 158px;
    display: none;
    margin: 0 0 15px 15px;
}
.tweetBox-class {
    position: absolute;
    top: 72px;
    right: 158px;
    display: none;
    margin: 0 0 15px 15px;
}

as you can see from the example, when the class selector is used the width of the container goes all wonky.

Why is there a difference in the rendering when using ID selectors VS Class selectors?

Answer 1

You have other classes in your stylesheet and they’re being applied to your container in your JavaScript code:

function sID(message) {
    var b = $("<div id='tweetBox' />"); 
    $("#header").html("").append(b);
    b.addClass("triangle-right right");
    b.html(message).fadeIn(300).delay(2000).fadeOut(300);
}
function sCLASS(message) {
    var b = $("<div />");   
    $("#header").html("").append(b);
    b.addClass("tweetBox-class triangle-right right");
    b.html(message).fadeIn(300).delay(2000).fadeOut(300);
}

So the browser has to take all those classes into account when rendering your container.

The rule with the ID selector overrides every other rule with only class selectors, while the one with the class selector is applied first since it comes first before your other classes, and some styles become overridden by the other classes as they occur later in your stylesheet.