why is my css speech bubble displaced so frequently? How can I prevent this?


Tags: javascript,html,css,html5,css3

Problem :

I used css3 methods to draw out speechbubble.

Sometimes when i load my website the speechbubble gets displaced.

See http://cl.ly/image/1A0Y3z401D23

Then I have to press the refresh button a couple of times before it gets rendered the proper way.

See http://cl.ly/image/3V043M1K1l0n

NOTE : there is no successful or failing markup. It's the same markup all the time.

I tested this with chrome and it happens quite frequently. You can view one of the public pages here http://storyzer.com/faq

** EDIT **

I am adding this code because of a comment I needed to show some code.

the css code responsible for the drawing of the speech bubble

/******** talkbubble_left **************/
.gradient_header_talkbubble {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f8f8f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#f8f8f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f9',GradientType=0 ); /* IE6-9 */
}
.talkbubble_left {
    position: relative;
    background: #white;
    border: 1px solid #DCDDDE;
}
.talkbubble_left:after, .talkbubble_left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    top: 50%;
}
.talkbubble_left:after {
    border-top: 5px solid transparent;
    border-right: 10px solid #FBFBFB;
    border-bottom: 5px solid transparent;
    margin-top: -5px;
}
.talkbubble_left:before {
    border-top: 6px solid transparent;
    border-right: 11px solid #DCDDDE;
    border-bottom: 6px solid transparent;
    margin-top: -6px;
}

#header .talkbubble{
    display: inline-block;
    position: relative;
    top: 10px; left: 0; right: 0; bottom: 0;
    height: 47px;   
    width: 889px;
    float: right;   
}

How do I prevent this using code? could be javascript or css or html or anything.



Solution :

float .bot50x50 and .talkbubble both left and get rid of all the position: relative; styles unless absolutely needed.

http://www.quirksmode.org/css/clearing.html


    CSS Howto..

    How to set textbox width fit in table cell CSS

    Cakephp how to remove underline on links

    How to use add/subtract in css propert?

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    CSS: How to align text to the center of the image (left side)

    How to create header numbers with CSS

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How To Adjust CSS List On Hover Image

    How do I make my webpage scale-able depending on the size of the browser window?

    How to set the height with css to 100% and make it fluid?

    How to position images next to text using CSS

    How to tell what is the right css line to apply in nested classes

    How can I avoid div from executing new line if one line is already full?

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    Change image src for product “showoff”

    How to make a div box with display:flex clickable like display:block?

    How to write CSS3 animations with JavaScript objects?

    How to set background image to keep its position while browser width is changing?

    How to position these images in CSS?

    How to have jquery add a panel inside a panel in Bootstrap v3

    How to make function NOT highlight last row in table?

    How do I ONLY add a box-shadow to the bottom with the following css?

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    How to add multiple css files to CKEditor editorarea

    using css, how to create a white circle within a transparent div?

    How to create DRY CSS when using transform & keyframes

    How to inline elements with CSS

    How can I change the size of this box? (CSS)

    How To Use CSS To Style The Output Of JavaScript

    image carousel showing all images