The Arcive of Official vBulletin Modifications Site.

DemOnstar · #1 11-21-2015, 12:21 PM

If you have time and/or patience, please drop the following code into an HTML module and compare browsers.

Code:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  <title>Responsive Tiled Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
  <!-- Enable media queries for old IE -->
[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
[endif]
body {
   margin: 0;
   padding: 0;
   background: #EEE;
   font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 22%;
   padding-bottom: 20%;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
}
<!--.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}-->

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 800px) and (min-width : 400px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}

  </style> 
</head> 
<body> 
<div class="wrap">
    
  <!-- Define all of the tiles: -->
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg">
      <!--<div class="titleBox">Poster</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
    <!--  <div class="titleBox">An old greenhouse</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
    <!--  <div class="titleBox">Purple wildflowers</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
    <!--  <div class="titleBox">A birdfeeder</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
    <!--  <div class="titleBox">Crocus close-up</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
    <!--  <div class="titleBox">The garden shop</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
    <!--  <div class="titleBox">Spring daffodils</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
    <!--  <div class="titleBox">Iris along the path</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
    <!--  <div class="titleBox">The garden blueprint</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
    <!--  <div class="titleBox">The patio</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
    <!--  <div class="titleBox">Bumble bee collecting nectar</div>-->
    </div>
  </div>
  <div class="box">
    <div class="boxInner">
      <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
    <!--  <div class="titleBox">Winding garden path</div>-->
    </div>
  </div>
  
</div>
<!-- /#wrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   // See if this is a touch device
   if ('ontouchstart' in window)
   {
      // Set the correct [touchscreen] body class
      $('body').removeClass('no-touch').addClass('touch');
     
      // Add the touch toggle to show text when tapped
      $('div.boxInner img').click(function(){
         $(this).closest('.boxInner').toggleClass('touchFocus');
      });
   }
});
</script>
</body> 
</html>

It looks okay in Firefox but IE, Chrome and Opera don't handle it very well. They are all up to date versions.
Even though it looks okay in Firefox, something is wrong; the size is lost somewhere.

Could somebody tell me what the issue is?

Thanks. . . .

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.10454 seconds Memory Usage 2,915KB Queries Executed 13 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (6)bbcode_code (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (18)post_thanks_box (3)post_thanks_box_bit (18)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (3)post_thanks_postbit (18)post_thanks_postbit_info (18)postbit (3)postbit_attachment (18)postbit_onlinestatus (18)postbit_wrapper (1)showthread_list (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_threadedmode.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids_threaded showthread_threaded_construct_link showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start postbit_attachment post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!