The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
#1
|
||||
|
||||
HTML Heads
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> 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 | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|