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. . . .

Dragonsys · #2 11-21-2015, 12:55 PM

Well, your CSS If for IE is missing part, it should be this

Code:

<!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

It looks the same to me in Chrome, Firefox & Edge. I do notice that Chrome won't change the number of columns though, but that might be a Chrome issue.

DemOnstar · #3 11-21-2015, 01:33 PM

Both Chrome and IE display as in attached.... How odd that it looks okay for you.

Thanks for the response. . .

Dragonsys · #4 11-21-2015, 01:35 PM

Quote:

Originally Posted by DemOnstar

Both Chrome and IE display as in attached.... How odd that it looks okay for you.

Thanks for the response. . .

Strange, they look fine to me. Try it here on my test site - http://dragonsys.noip.me/test.html

Looks like the attached to me (this is from Chrome)

DemOnstar · #5 11-21-2015, 02:14 PM

Quote:

Originally Posted by Dragonsys

Strange, they look fine to me. Try it here on my test site - http://dragonsys.noip.me/test.html

Looks like the attached to me (this is from Chrome)

Yep, it does but is that held within the HTML module?

Dragonsys · #6 11-21-2015, 02:20 PM

Quote:

Originally Posted by DemOnstar

Yep, it does but is that held within the HTML module?

http://dragonsys.noip.me/vb4/

Attachment from Chrome, this is in a VB HTML Block. I'm not sure what Module you are meaning.

DemOnstar · #7 11-21-2015, 02:34 PM

Ooop. Sorry, not clear.

I am using a Static HTML module from the site builder in vB 5. Using on localhost.
It appears you are using 4...

Dragonsys · #8 11-21-2015, 02:40 PM

doh, I didn't notice this was vb5. Yeah, I'm still on vb4, sorry.
However, the html code looks good other than the CSS Comment Select I mentioned earlier. So it must be something specific to the vb5 module, and i can't help with that

DemOnstar · #9 11-21-2015, 02:44 PM

Quote:

Originally Posted by Dragonsys

So it must be something specific to the vb5 module, and i can't help with that

Cheers. That is what I was afraid of.
Maybe someone will report it now they have seen it.

Lynne · #10 11-21-2015, 05:11 PM

You cannot add any <head> or <body> or <html> or <doctype> tags to the module. You can only add the actual html stuff or you will break the page.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06264 seconds Memory Usage 2,303KB Queries Executed 14 (?)
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 (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (2)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (3)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (3)post_thanks_postbit (10)post_thanks_postbit_info (10)postbit (3)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (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_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 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 pagenav_page pagenav_complete 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!