Default "Strap" not always aligned properly in chrome

[mwhite21]

For some strange reason, the strap that displays a sites screenshot doesn't always sit properly with google chrome. It happens to me on all my devices. As seen below is a screenshot of google chrome & then firefox. The strap for both premium & regular members is sort of floating.

Google Chrome Results:



Firefox Results:


Thoughts or insight? Any help is appreciated =)

 

[Mark]

Looks like you modified the template, your edit adding the stats in the top bar where the strap normally resides is what is causing the problem.

 

[mwhite21]

Other than color code changes to the CSS I changed nothing. I can't figure out why it's fine on all browsers except chrome =/

 

[Mark]

For sure the html on your list template has been edited, and for sure it's causing that misalignment.

Feel free to post a URL where we can this in action, then someone may be able to help you fix your code, but since this is only happening on your list we are unable to help without seeing your modified code, it's not part of our theme.

 

[mwhite21]

www.toprpsites.com

I appreciate you looking into it.

 

[Basti]

Actually the same thing happens on our dev list, was definitely working before, so maybe browsers made their html more strict. Now it actually the correct output, before browsers fixed it for us.
We float the badge right, but its after the banner code, hence floats right under the banner. Correct behavour and needs to be fixed so the floated right comes before other stuff in html which is not floated.

In the file table_top_row.html

        <div class="right badge"><a href="{$list_url}/{$url_helper_a}details{$url_helper_u}{$username}{$url_tail}">
        {$screenshot}<br />
        <img src="{$skins_url}/{$skin_name}/stats.png" alt="{$lng->table_stats}" height="21" width="21" /><br />{$lng->table_stats} <br /><img src="{$skins_url}/{$skin_name}/{$up_down}.png" alt="{$lng->up_down}" /></a>
        </div>

Move that html right before the following

<a href="{$url}" onclick="out(this,'{$username}');" rel="nofollow"><img src="{$banner_url}" alt="{$title}"  class="vistip" title="{$title}"/></a>

table_top_row_premium.html

<div class="right premium_badge"><a href="{$list_url}/{$url_helper_a}details{$url_helper_u}{$username}{$url_tail}">
        {$screenshot}<br />
        <img src="{$skins_url}/{$skin_name}/stats.png" alt="{$lng->table_stats}" height="21" width="21" /><br />{$lng->table_stats} <br /><img src="{$skins_url}/{$skin_name}/{$up_down}.png" alt="{$lng->up_down}" /></a></div>

Move that right before the following

<a href="{$url}" onclick="out(this,'{$username}');"><img src="{$premium_banner_url}" alt="{$title}" title="{$lng->g_premium_visit}"/></a>

On a different node, you have this in both files, move that over to user.css, no need to repeat it so many times

<style type="text/css">
.rightvote {
    position:relative;
    right:130px;
    float:right;
}
.red {
    color: #C00000;
}
.blue {
    color: #0033CC;
}
.boardrank {
    width: 500px;
    float:left;
}
</style>

 

[mwhite21]

Actually the same thing happens on our dev list, was definitely working before, so maybe browsers made their html more strict. Now it actually the correct output, before browsers fixed it for us.
We float the badge right, but its after the banner code, hence floats right under the banner. Correct behavour and needs to be fixed so the floated right comes before other stuff in html which is not floated.

In the file table_top_row.html

        <div class="right badge"><a href="{$list_url}/{$url_helper_a}details{$url_helper_u}{$username}{$url_tail}">
        {$screenshot}<br />
        <img src="{$skins_url}/{$skin_name}/stats.png" alt="{$lng->table_stats}" height="21" width="21" /><br />{$lng->table_stats} <br /><img src="{$skins_url}/{$skin_name}/{$up_down}.png" alt="{$lng->up_down}" /></a>
        </div>

Move that html right before the following

<a href="{$url}" onclick="out(this,'{$username}');" rel="nofollow"><img src="{$banner_url}" alt="{$title}"  class="vistip" title="{$title}"/></a>

table_top_row_premium.html

<div class="right premium_badge"><a href="{$list_url}/{$url_helper_a}details{$url_helper_u}{$username}{$url_tail}">
        {$screenshot}<br />
        <img src="{$skins_url}/{$skin_name}/stats.png" alt="{$lng->table_stats}" height="21" width="21" /><br />{$lng->table_stats} <br /><img src="{$skins_url}/{$skin_name}/{$up_down}.png" alt="{$lng->up_down}" /></a></div>

Move that right before the following

<a href="{$url}" onclick="out(this,'{$username}');"><img src="{$premium_banner_url}" alt="{$title}" title="{$lng->g_premium_visit}"/></a>

On a different node, you have this in both files, move that over to user.css, no need to repeat it so many times

<style type="text/css">
.rightvote {
    position:relative;
    right:130px;
    float:right;
}
.red {
    color: #C00000;
}
.blue {
    color: #0033CC;
}
.boardrank {
    width: 500px;
    float:left;
}
</style>

You're a good man Basti =)