Hi, I really need someone to help me with this.

My page works fine on firefox but on safari the divs stack over each other.

To try it just duplicate the pair of divs with the class "box" a few times.

It will work properly in firefox and will overlap in safari.

If I remove the image it works fine in both browsers. Still I cant figure out why is the image messing up the layout :S

This is my page:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-     transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Grid layout</title>

       <style type="text/css">
        body {
            position: relative;
            width: 100%;
        }
        .box {background-color:#063;}

    </style>
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        var myFluidGrid = {
            COLNUMBER : 2, // Minimum column number.
            COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
            COLWIDTH : 240, // Fixed width of all columns.
            doLayout : function() {
                var self = this;
                var pointer = 0;
                var arr = [];
                var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));

                $('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
                $('.box').each(function() {
                    var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
                    $(this).css('left', tempLeft + 'px');

                    var tempTop = 0;
                    if (arr[pointer]) { tempTop = arr[pointer]; }
                    $(this).css('top', tempTop + 'px');

                    arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
                    pointer++;
                    if (pointer === columns) { pointer = 0; }
                });
            }
        };
        $(window).ready(function() {
            myFluidGrid.doLayout();
        }).resize(function() {
            myFluidGrid.doLayout();
        });
    </script>
</head>
<body>


 <div class="box">
 <img class="image_post" src="images/image.jpg" alt="Imagem">
  <h3><a href="report.php">REPORT</a></h3>
  <p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
  </div>

  <div class="box">
  <img class="image_post" src="images/image.jpg" alt="Imagem">
   <h3><a href="report.php">REPORT</a></h3>
  <p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
    Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
 <div>


</body>
</html>

Does anyone has a solution? I dont mind doing it with a different method I just need a fluid grid layout that works fine across all recent browsers.

Also just some help on understanding why this is happening would be great.

Thank you for your time.

  • Post an actual page. No one can debug snippets with references to files we don't have. Nathan Duran almost 9 years ago

1 answer

danwellman 5600
1
point

The code posted above is invalid mark-up - there is no closing <div> on the second box. This may just be a transcript problem and so not an actual problem on your page, but if the problem was evident on the page I'm sure it wasn't helping.

I don't know what the exact cause of the issue was, but I have altered the page and it now appears to be working as it should in both safari and firefox.

I made a number of changes to the JS, here is the complete working page (I changed the script reference to jQuery to match my local setup...):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-     transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Grid layout</title>

       <style type="text/css">
        body {
            position: relative;
            width: 100%;
        }
        .box {background-color:#063;}

    </style>    
</head>
<body>


 <div class="box">
 <img class="image_post" src="images/image.jpg" alt="Imagem">
  <h3><a href="report.php">REPORT</a></h3>
  <p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
  </div>

  <div class="box">
  <img class="image_post" src="images/image.jpg" alt="Imagem">
   <h3><a href="report.php">REPORT</a></h3>
  <p>Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
    Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph
   Hello this is some random text to try out this page, no lorem ispum was available at the time of this prargraph</p>
 </div>     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    (function($) {
        var myFluidGrid = {
            COLNUMBER : 2, // Minimum column number.
            COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
            COLWIDTH : 240, // Fixed width of all columns.
        };

        function doLayout() {
            var pointer = 0, arr = [], columns = Math.max(myFluidGrid.COLNUMBER, parseInt($('body').innerWidth() / (myFluidGrid.COLWIDTH + myFluidGrid.COLMARGIN)));

            $('.box').css('position', 'absolute').css('width', myFluidGrid.COLWIDTH  + 'px');
            $('.box').each(function() {
                var tempLeft = (pointer * (myFluidGrid.COLWIDTH + myFluidGrid.COLMARGIN));
                $(this).css('left', tempLeft + 'px');

                var tempTop = 0;
                if (arr[pointer]) { tempTop = arr[pointer]; }
                $(this).css('top', tempTop + 'px');

                arr[pointer] = tempTop + $(this).outerHeight() + myFluidGrid.COLMARGIN;
                pointer++;
                if (pointer === columns) { pointer = 0; }
            });
        }

        doLayout();

        $(window).resize(function() {
            doLayout();
        });
    })(jQuery);
    </script>
</body>
</html>

Firstly, why are you using the Transitional DOCTYPE? The xhtml 1.0 spec (with its accompanying DOCTYPES) in 2000. The transitional DOCTYPE was added so that developers could migrate their code easily. That was a decade ago!

I moved your script's to the bottom of the page as this is generally better for performance.

I also moved your code into a closure and passed in the jQuery object as an argument to alias the $ character in a safe way. This, and the fact that the script is at the bottom) means you don't need to subscribe to the window.ready event. I have moved the function out of the object into a proper function and simply call this after the function decalration. It can then be called again when the resize event fires. I also tidied up some of your variable declarations, and removed the self = this variable as the function is no longer part of the object.

The code now works, hope it helps :D

Answered almost 9 years ago by danwellman
  • Thnak you very much for your help. Ill give it a try. Also Im oblivious to Doc-type it is default in my Dreamweaver. My JS isnt the best arround because I uderstand very little of it and usually its just an adaptation. Thnak you. marvy almost 9 years ago