Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange behaviour with AJAX/jQuery and Chrome

I think the best way to check the problem is to visit it :

Opening the page, it should load the line in the bottom Alptraum - La Vie Fascinante D'Une Jeune Vierge Effarouchee Marnaise - Unknown Date thanks to this jQuery script :

$.ajax ({
    url: "list/browse_ajax.php",
    type: "POST",
    success: function(data) {
        $('#browseList').html(data);
    },
    error: function(data) {
        $('#browseList').html("Error");
    }
});

on the server, it reply with :

<script type="text/javascript">
    $(document).ready(function() {
        $('.lists').mouseover(function() {
            $(this).css("background-color", "#CCCCCC");
        });

        $('.lists').mouseout(function() {
            $(this).css("background-color", "#FFFFFF");
        });                 
    });
</script>       

<div class="lists">                                 
    <a class="lblackb" href="index.php?explore=view&trackid=888"><?=htmlentities("Alptraum - La Vie Fascinante D'Une Jeune Vierge Effarouchee Marnaise - Unknown Date", ENT_QUOTES, "UTF-8")?></a>
</div>  

with this lists class :

.lists{width:710px; float:left; border-bottom:1px #000000 solid;}

and this is the browseList div :

.content{width:710px; float:left; color:#000000; font-weight:normal; text-align:left; margin-left:13px; margin-right:13px;}    
<div class="content" id="browseList">&nbsp;</div>

But how you can see, until you don't go on the div with the mouse (applying the jQuery mouseover/out effect), you can see the whole Line (at least, when I load the page I only see a small part as Vierge Effarouchee Marnaise - Unknown Date.

This happens to me only with Chrome (8.0.552.237)

Why this? And how can I fix this trouble? Thanks

P.S. This happens only if I wrote 1 line in the #browseList' div (with .html()). So for example if I just add a <br/> before or after that line, this doesnt happens :O

P.S.2. I've also notice that If i refresh the page many times, sometimes it appair OK, sometimes with the problem... really STRANGE! I think it's a Chrome bug...

like image 312
kwichz Avatar asked Nov 14 '22 23:11

kwichz


1 Answers

I thing you div class lists do not need

 float: left; /* delete this line */
like image 130
Liutas Avatar answered Dec 21 '22 03:12

Liutas