Images in Wrong Spot Fluid Layout

Hey Guys,

Heres one of the pages I’m working on and this is a weird and unusual issue…

http://modocom.ca/tbayvotes/who-can-vote/

Some of the images are overlapping each other and other boxes but if you refresh or go back to the page sometimes its on correct spot or is you grab corner of your browser and just resize a hair they go to the correct spot.

How can I solve this issue so they are in the correct spot right away its almost like they don’t load the full height of the image or something.

Please help, really need to solve this have seen this issue in Chrome, FireFox and Safari so far.

Thanks,

Mike

Mike, there are 30 errors in the HTML most of which should cause problems with the layout. Please let us know after you have seriously validated it.

Hello ronpat,

I have validated the site to lower the amount of errors considerably.

It still seems to do the same thing.

Would you or anyone else be able to help out?

Thanks,

Mike

I habitually browse with JS disabled. When I arrived on your page, the images were indeed misaligned, but once I enabled JavaScript they displayed correctly, so the problem might be with a script not loading fast enough to display the page correctly.

Your page is calling five different scripts, including more than one version of JQuery, it appears, which could also be causing a problem. (JS is not my forte, so I might just be havering here. ;))

Thanks TechnoBear,

I believe I got it solved now as needed to as I didn’t have imagesLoaded in it for my jQuery.

If someone could try again to see if functions properly for them as well that would be much appreciated.

Thanks :slight_smile:

OK here in Firefox, Chromium and Epiphany.

Off Topic:

You might want to rethink that 300 font-weight, though. Some browsers seem to struggle with rendering it, and even where it renders OK, it’s really hard to read.

Mike, you should NOT be calling two (or more) versions of jQuery… just one.
You also do not need
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8” />
listed twice in the <head> (Not a validation error. Just looks like you haven’t read your code very thoroghly.)

More than 1 <h1> tag is allowed in HTML5, but still not a good idea. How can google identify the subject of the page?

It’s nice that you reduced the amount (number) of validation errors “considerably”, but structure matters more than “amount”. That’s what the validation chase is about. It’s not about numbers, it’s about catching the tags, et.al., that affect the structure of the HTML. The mismatched tags that you have chosen to leave in place are the very tags that break layouts. The important stuff. Your page works because of the grace of the browser gods and masonry.

Look between the <section id=“content”> and the </section> tags for misplaced/unbalanced <p> and <div> tags
The same pattern of misplaced or unbalanced <p> and <div> tags has been duplicated image block after image block.

As an exercise in troubleshooting, try indenting two or three of the colored blocks and see if you can spot some problems, some inconsistencies in the structure of those blocks.

A browser can only guess about how the HTML is supposed to behave.

Masonry is amazing, isn’t it? !!! Firefox, Opera, and Chrome on the PC seem to align the boxes correctly except from 992-1000px where the boxes lose synch. Unless a mobile device falls within that width, I doubt most users would ever notice. :slight_smile: .

Now fix your HTML .

Thanks ronpat,

Yes masonry is amazing.

The mispaced p tags are something I’m having issues with as Wordpress is seemingly putting them in regardless. I created shortcodes for the masonry blocks and after all the blocks when I publish it puts in unnecessary closing paragraph tags its rather frustrating.

Thanks,

Mike

Give this a try and see if it works at all. There are a couple of changes in the content portion of the HTML. CSS adds or overrides are in the <head> section of the page. Seems to work well for me including when JS is disabled. You’ll have to sort out the items that I commented out or about. :slight_smile: My primary focus was to restructure the content portion of the HTML. Picked up a few odds and ends along the way, but nothing major. The inline CSS is still inline. :-/ Comment marks were to help me identify which code went with which box. The </p> tags were stray in the sense that they were misplaced… so were the </div> tags. Let me know if this works for you, and then if WP respects this or changes it again. I can’t imagine why WP should overrule this code.

Copy the code to a file with an .htm suffix and open it in your browser straightaway. Don’t go through Wordpress or any CMS. Just copy and paste. It should work. If it does, then do whatever you need to with WP.


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Last robot wins !! -->
    <meta name='robots' content='noindex,follow'>
    <meta name="robots" content="index,follow">
<!--
    <script type='text/javascript' src='http://modocom.ca/tbayvotes/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
    <script type='text/javascript' src='http://modocom.ca/tbayvotes/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
-->
    <title>Who can vote &laquo;  Thunder Bay Votes</title>
    <link rel='prev' title='Important Dates' href='http://modocom.ca/tbayvotes/'>
    <link rel='next' title='Where to vote' href='http://modocom.ca/tbayvotes/where-to-vote/'>
    <link rel='canonical' href='http://modocom.ca/tbayvotes/who-can-vote/'>
    <link rel='shortlink' href='http://modocom.ca/tbayvotes/?p=8'>
<!-- Ideally, your local stylesheet should be the last stylesheet in the list -->
    <link rel="stylesheet" href="http://modocom.ca/tbayvotes/wp-content/themes/vote/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="http://modocom.ca/tbayvotes/wp-content/themes/vote/css/styles-who.css">
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' type='text/css'>
    <link rel='stylesheet' id='styles-with-shortcodes-css'  href='http://modocom.ca/tbayvotes/wp-content/plugins/styles-with-shortcodes/css/style.css?ver=1.0.1' type='text/css' media='all'>
    <link rel='stylesheet' id='rh_columns-css'  href='http://modocom.ca/tbayvotes/wp-content/plugins/styles-with-shortcodes/editorplugin/css/rh_columns.css?ver=1.0.2' type='text/css' media='all'>
    <link rel="stylesheet" type="text/css" href="http://modocom.ca/tbayvotes/wp-content/plugins/styles-with-shortcodes/js/lightbox/themes/default/jquery.lightbox.css">
    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="http://modocom.ca/tbayvotes/wp-content/plugins/styles-with-shortcodes/js/lightbox/themes/default/jquery.lightbox.ie6.css">
    <![endif]-->
<!--
http://www.sitepoint.com/forums/showthread.php?1219037-Images-in-Wrong-Spot-Fluid-Layout
Jul 25, 2014, 17:01
mbond5
NOTES: Images are not resizing to the width of the page from 753-777px and -797px, -951px, 953-954px, 956-957px, 959-960px, 932-963px, 965-966px, 969px, 972-976px
-->
    <style>
h1,h2,h3,h4,h5 {margin-top:.85em;}  /* replaces the "br" tags on this page */
.top-margin {margin-top:-.35em;}   /* changes your .top-margin from -30px */
/* A newer clearfix.  Works with JS is disabled. (I didn't find ".clearfix" on a stylesheet.) */
.cf:before,
.cf:after {
    content:" ";
    display:table;
}
.cf:after {
    clear:both;
}
    </style>
</head>
<body>
<!-- Header -->
<div id="header">
    <div id="header-container">
        <a href="http://modocom.ca/tbayvotes" title="Thunder Bay Votes"><img src="http://modocom.ca/tbayvotes/wp-content/themes/vote/img/logo-orange.png" title="Thunder Bay Votes" alt="Thunder Bay Votes"></a>
    </div>
    <div class="menu-primary-menu-container">
        <ul id="menu-primary-menu" class="nav">
            <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://modocom.ca/tbayvotes/">Important Dates</a></li>
            <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-17"><a href="http://modocom.ca/tbayvotes/who-can-vote/">Who can vote</a></li>
            <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://modocom.ca/tbayvotes/where-to-vote/">Where to vote</a></li>
            <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://modocom.ca/tbayvotes/how-to-vote/">How to vote</a></li>
            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://modocom.ca/tbayvotes/about-the-election/">About the election</a></li>
            <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://modocom.ca/tbayvotes/contact-us/">Contact us</a></li>
        </ul>
    </div>
    <a class="but" href="#" title="Make the pledge!">Make the pledge!</a>
</div>
<!-- End Header -->
<section id="content">
    <div id="container" class="cf fluid">  <!-- .masonry applied here -->
<!-- lady in hardhat -->
        <div style="min-height:auto;" class="box col6 picture">
            <img class="alignnone size-full wp-image-185" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/vote-image.jpg" alt="vote-image">
        </div>
<!-- Who can vote: purple bg -->
        <div style="min-height:510px;" class="box col7 redbg">
            <img class="alignnone size-full wp-image-260" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/orange-x.png" alt="orange-x">
            <h2>Who can vote:</h2>
            <p><strong><span class="s1">Every person is qualified to vote in City of Thunder Bay?s Municipal Election if he/she:</span></strong></p>
            <p class="p1">Resides in Thunder Bay or is the owner or tenant of land here, or the spouse of such a person.</p>
            <p class="p1">Is a Canadian citizen.</p>
            <p class="p1">Is at least 18 years old.</p>
            <p class="p1">Is not otherwise prohibited from voting (see ?Who can not Vote?)</p>
        </div>
<!-- Who can not vote: orange bg -->
        <div style="min-height:510px;" class="box col7 orangebg">
            <img class="alignnone size-full wp-image-261" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/red-x.png" alt="red-x">
            <h2>Who can not vote:</h2>
            <p class="p1"><span class="s1"><strong>Every person is qualified to vote in City of Thunder Bay?s Municipal Election if he/she</strong>:</span></p>
            <p class="p2">Serving a sentence of imprisonment in a penal or correctional institution.</p>
            <p class="p2">Acting as an executor or in any other representative capacity, except as a voting proxy.</p>
            <p class="p2">Convicted or a corrupt practice for an election held within four years of voting day.</p>
            <p class="p2">Note: Corporations are not eligible to vote.</p>
        </div>
<!-- Just moved to Thunder Bay: orange bg -->
        <div style="min-height:205px;" class="box col6 orangebg">
            <img class="alignnone size-full wp-image-279" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/red-question.png" alt="Question">
            <h4>I just moved to Thunder Bay.<br> How do I get onto the voters list?</h4>
            <p><strong><a title="Contact us" href="http://modocom.ca/tbayvotes/contact-us/">Contact us</a></strong></p>
        </div>
<!-- Landed immigrants: purple bg -->
        <div style="min-height:205px;" class="box col6 redbg">
            <img class="alignnone size-full wp-image-273" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/orange-question.png" alt="Question">
            <h3>Are landed immigrants eligible to vote in the municipal election?</h3>
            <p>No. You must be a Canadian citizen.</p>
        </div>
<!-- No fixed address: orange bg -->
        <div style="min-height:205px;" class="box col6 orangebg">
            <img class="alignnone size-full wp-image-279" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/red-question.png" alt="Question">
            <h4>Can I vote if I don’t have a fixed address, or have no home at all?</h4>
            <p><strong><a href="#">Learn more</a></strong></p>
        </div>
<!-- guy in ball cap -->
        <div style="min-height:auto;" class="box col3 picture">
            <img class="alignnone size-full wp-image-22" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/test-image1.jpg" alt="test-image1">
        </div>
<!-- On voter's list? green bg -->
        <div style="min-height:150px;" class="box col5 greenbg">
            <h1 class="top-margin"><a href="#">Are you on the<br>voters list?</a></h1>
            <p><b><span style="text-decoration: underline;"><a href="#">Check now!</a></span></b></p>
        </div>
<!-- 2 guys studying -->
        <div style="min-height:auto;" class="box col8 picture">
            <img class="alignnone size-full wp-image-200" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/vote-image2.jpg" alt="vote-image2">
        </div>
<!-- FAQ -->
        <div style="min-height:auto;" class="box col5 picture">
            <a href="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/FAQ.jpg"><img class="alignnone size-full wp-image-180" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/FAQ.jpg" alt="FAQ"></a>
        </div>
<!-- Vote X Truck -->
        <div style="min-height:auto;" class="box col7 picture">
            <img class="alignnone size-full wp-image-220" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/vote-truck-long.jpg" alt="vote-truck-long">
        </div>
<!-- New to voting? pale lime bg -->
        <div style="min-height:173px;" class="box col5 yellowbg">
            <h1 class="top-margin"><a href="#">Are you new<br>to voting?</a></h1>
            <p><strong><a href="#">Learn the “ins and “outs”</a></strong></p>
        </div>
<!-- Jogger -->
        <div style="min-height:auto;" class="box col7 picture">
            <img class="alignnone size-full wp-image-223" src="http://modocom.ca/tbayvotes/wp-content/uploads/2014/07/vote-image3.jpg" alt="vote-image3">
        </div>
    </div> <!-- #container -->
</section>
<!-- Footer -->
<div id="footer">
    <div class="footer-info">
        <div class="tbayvotes">
            <a href="#"><img class="tbay-logo" src="http://modocom.ca/tbayvotes/wp-content/themes/vote/img/thunderbay-logo.png" alt="Thunder Bay" title="Thunder Bay"></a><a href="#"><img class="votes-logo" src="http://modocom.ca/tbayvotes/wp-content/themes/vote/img/tbay-votes.png" alt="Thunder Bay Votes" title="Thunder Bay Votes"></a>
        </div>
    </div>
</div> <!-- #footer -->

<script src="http://modocom.ca/tbayvotes/wp-content/themes/vote/js/jquery-1.7.1.min.js"></script>
<script src="http://modocom.ca/tbayvotes/wp-content/themes/vote/js/jquery.masonry.min.js"></script>
<script src='http://modocom.ca/tbayvotes/wp-content/plugins/styles-with-shortcodes/js/sws_frontend.js?ver=1.0.0'></script>
<script>var sws_lightbox = {"modal":false};</script>
<script>
$(function(){
    $('#container').masonry ({
        itemSelector: '.box',
        isAnimated: true,
        // set columnWidth a fraction of the container width
        columnWidth: function(containerWidth) {
            return containerWidth / 200;
        }
    });
});
$(function(){
    var $container = $('#container');
    $container.imagesLoaded(function() {
        $container.masonry();
    });
});
</script>

</body>
</html>


Cheers :slight_smile:

Hey, mike,

I’m still waiting for a serious response to post #9.

Hey ronpat,

Sorry for not getting back been out of town I tried this locally on my comp and worked great haven’t made any changes to site yet as client is reviewing then will be making the changes.

Thanks :slight_smile: