The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#11
|
||||
|
||||
That is interesting.
So if I take all of that out? --------------- Added [DATE]1448134654[/DATE] at [TIME]1448134654[/TIME] --------------- Yep, it still works but with the same result. I.E. and Chrome won't work with it. Opera too. |
#12
|
||||
|
||||
Can we get a link to view the problem? Images really don't help with CSS issues.
|
#13
|
||||
|
||||
Quote:
Code:
<!DOCTYPE HTML> <html lang="en-US"> <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> <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> Thank you. . . |
#14
|
||||
|
||||
Quote:
Also, I noticed this line. Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> |
#15
|
||||
|
||||
Thanks for the tip.
It still behaves the same is the initial inquiry. I am guessing that all the development work is done on Firefox. Cheers. . . |
#16
|
||||
|
||||
Quote:
|
#17
|
||||
|
||||
However, even putting in the incorrect code you provided, the modules were just fine on both Chrome and Firefox.
Chrome: Attachment 153698 Firefox: Attachment 153699 So, I would conclude it is something else on your page that is causing the issue (perhaps another html module that has incorrect html also?) and that is why it is best if we could see the actual page. Run it through and html validator, then fix the issues, then see if it works. |
#18
|
||||
|
||||
Sorry about that. I get a little mixed up with templates and codes when I have no idea what I am doing. And this is a prime example.
I have tried every which way to do this to no avail. I have played around with forum blocks, widgets now modules and have had success with all but the latter. Yes both the incorrect code and the correct code work but not in Chrome or I.E. There is no other module on the page. I will try the default style next. Thanks. . . --------------- Added [DATE]1448216035[/DATE] at [TIME]1448216035[/TIME] --------------- Default style did the trick. . . Process of elimination next. . . Ta. . . --------------- Added [DATE]1448218857[/DATE] at [TIME]1448218857[/TIME] --------------- After some messing around, I was able to narrow it down to something in this. Code:
div.box { background-color: transparent; border: medium none; overflow: auto; padding: 13px; } .box { padding-bottom: 20%; width: 22%; } Very good. . . . Thanks all. . . . |
Thread Tools | |
Display Modes | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|