Web Analytics Made Easy -
StatCounter Mozilla/Opera problem > Table with multiple pictures > Overflows :-( - CodingForum

Announcement

Collapse
No announcement yet.

Mozilla/Opera problem > Table with multiple pictures > Overflows :-(

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Mozilla/Opera problem > Table with multiple pictures > Overflows :-(

    Hello, I'm working on a page with multiple thumbnails pasted across the full window. See here.

    All is fine in Safari and Mac InternetExplorer 5.2. However Mozilla browsers and Opera give problems.

    The pictures are in a table which should smoothly and dynamically adapt to any window proportion and size, thus dynamically giving the pictures new proportions as well.



    The problem is that sometimes the images in the bottom row are cut off or display outside the window

    I've set overflow to hidden to avoid the ugly scrollbar. Normally there should be 4 rows. I've searched at w3.org but couldn't find any hint.

    Is there a trick that I'm not aware of?

    Thank you,


    Martin

    The code of the page is this:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
    <
    meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <
    title>Multiple pictures on a page</title>


    <
    style type="text/css">

         
    body {
              
    margin0;
              
    padding0;
              
    overflowhidden;
         }

         
    img {
              
    bordernone;
              
    width100%;
              
    height100%;
         }

         
    table {
              
    bordernone;
              
    width100%;
              
    height100%;
         }

         
    td 
              
    width11.11%;
              
    height25%;
         }

         
    td.horizontal 
              
    width22.22%;
              
    height25%;
         }

    </
    style>


    </
    head><body>

    <
    table cellspacing="0" cellpadding="0">

      <
    tbody>
        <
    tr>
          <
    td><img src="vertical/1.JPG" alt="image"></td>
          <
    td><img src="vertical/2.JPG" alt="image"></td>
          <
    td><img src="vertical/3.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/26.JPG" alt="image"></td>
          <
    td><img src="vertical/4.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/27.JPG" alt="image"></td>
          <
    td><img src="vertical/5.JPG" alt="image"></td>
        </
    tr>
        <
    tr>
          <
    td class="horizontal" colspan="2"><img src="horizontal/28.JPG" alt="image"></td>
          <
    td><img src="vertical/6.JPG" alt="image"></td>
          <
    td><img src="vertical/7.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/29.JPG" alt="image"></td>
          <
    td><img src="vertical/8.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/30.JPG" alt="image"></td>
        </
    tr>
        <
    tr>
          <
    td><img src="vertical/9.JPG" alt="image"></td>
          <
    td><img src="vertical/10.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/31.JPG" alt="image"></td>
          <
    td><img src="vertical/11.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/32.JPG" alt="image"></td>
          <
    td><img src="vertical/12.JPG" alt="image"></td>
          <
    td><img src="vertical/13.JPG" alt="image"></td>
        </
    tr>
        <
    tr>
          <
    td><img src="vertical/14.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/33.JPG" alt="image"></td>
          <
    td><img src="vertical/15.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/34.JPG" alt="image"></td>
          <
    td><img src="vertical/16.JPG" alt="image"></td>
          <
    td class="horizontal" colspan="2"><img src="horizontal/35.JPG" alt="image"></td>
        </
    tr>
      </
    tbody>

    </
    table>

    </
    body></html
    PS: I've tried on a normal server (not Geocities which I use only for this forum here to show you) and it's the same.
    Last edited by mypointofview; Oct 7, 2006, 02:39 AM.

  • #2
    You are probably going to have to use javascript as it seems its the table isn't accounting for the file menu, and toolbars.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Multiple pictures on a page</title>
    <style type="text/css">
         html, body {
              margin: 0;
              padding: 0;
    	      height:100%;
    		  overflow:hidden;
         }
    
         img {
              border: none;
              width: 100%;
              height: 100%;
         }
    
         table {
              border: none;
              width: 100%;
              height: 100%;
         }
    
         td { 
              width: 11.11%;
              height: 25%;
         }
    
         td.horizontal { 
              width: 22.22%;
              height: 25%;
         }
    
    </style>
    <script type="text/javascript">
    function f_clientHeight()
    {
    	return f_filterResults
    	(
    		window.innerHeight ? window.innerHeight : 0,
    		document.documentElement ? document.documentElement.clientHeight : 0,
    		document.body ? document.body.clientHeight : 0
    	);
    }
    function f_filterResults(n_win, n_docel, n_body)
    {
    	var n_result = n_win ? n_win : 0;
    	if (n_docel && (!n_result || (n_result > n_docel)))
    		n_result = n_docel;
    	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    }
    function sizeIt()
    {
    	var thetds = document.getElementsByTagName('td');
    	for(var i = 0; i < thetds.length; i++)
    	{
    		if(thetds[0].childNodes[0].nodeType == 1)
    		{
    			thetds[i].style.height = (f_clientHeight() / 4) + 'px';
    		}
    	}
    }
    window.onload = sizeIt;
    window.onresize = sizeIt;
    </script>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
    	<tbody>
    		<tr>
    			<td><img src="vertical/1.JPG" alt="image"></td>
    			<td><img src="vertical/2.JPG" alt="image"></td>
    			<td><img src="vertical/3.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/26.JPG" alt="image"></td>
    			<td><img src="vertical/4.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/27.JPG" alt="image"></td>
    			<td><img src="vertical/5.JPG" alt="image"></td>
    		</tr>
    		<tr>
    			<td class="horizontal" colspan="2"><img src="horizontal/28.JPG" alt="image"></td>
    			<td><img src="vertical/6.JPG" alt="image"></td>
    			<td><img src="vertical/7.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/29.JPG" alt="image"></td>
    			<td><img src="vertical/8.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/30.JPG" alt="image"></td>
    		</tr>
    		<tr>
    			<td><img src="vertical/9.JPG" alt="image"></td>
    			<td><img src="vertical/10.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/31.JPG" alt="image"></td>
    			<td><img src="vertical/11.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/32.JPG" alt="image"></td>
    			<td><img src="vertical/12.JPG" alt="image"></td>
    			<td><img src="vertical/13.JPG" alt="image"></td>
    		</tr>
    		<tr>
    			<td><img src="vertical/14.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/33.JPG" alt="image"></td>
    			<td><img src="vertical/15.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/34.JPG" alt="image"></td>
    			<td><img src="vertical/16.JPG" alt="image"></td>
    			<td class="horizontal" colspan="2"><img src="horizontal/35.JPG" alt="image"></td>
    		</tr>
    	</tbody>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Awesome !!!

      Aerospace, u da man

      This is awesome! Look for the result of your coding tip here.

      Sometimes though there appear thin white horizontal lines separating each row (all in Mozilla and Opera). I've tried margin:0; and border:none; with the td tags but it does not help.

      Is there anything there can be done about it ? It is otherwise so great...

      Thank you,


      Martin

      PS: I just tested it in IE Mac v.5.23 >> the page is blank. I'll then serve this JavaScript with my browser sniffer only for Mozilla and Opera ... no problem.

      Comment


      • #4
        I can't replicate the white lines but this might fix it
        Code:
             img {
                  border: none;
                  width: 100%;
                  height: 100%;
                  [b]display:block;[/b]
             }
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          I tried it but it doesn't do anything. Here's the page with display:block;.

          The effect of the white horizontal lines which seperate the rows can be seen if you resize the window - and then only at some variations.

          The line is exactly 1 pixel thick (checked it with a screen loupe). Here's a screen shot of a part of the screen:



          It seems that the script computes the value for the height of the 4 rows in pixels and if the window has a value that cannot easily be divided into 4 equal parts, then the white empty space appears.

          I replaced 'px' in the script with '%' but then it's like at the very beginning and I guess that would defeat the purpose.

          PHP Code:
          thetds[i].style.height = (f_clientHeight() / 4) + 'px'
          I can imagine some sort of "if" condition for the situation where the height cannot be divided into equal parts.. or some math that allows for results with a +/- "range" as result ?

          Firefox displays the window height. Here are some height values where the lines appear: 545, 537, 519, 509, (from 508 to 506 all is OK for example) 505, (from 504 to 502 all is OK again), 501, (all OK from 500 to 498), 497, ...

          There seems to be a pattern: every 4 pixels of window height, the lines appear


          Martin

          PS: I tried to remove the height: 25%; from the style in the head of the code here but it doesn't get rid of the lines.

          Comment

          Working...
          X