PDA

View Full Version : HTML Heads

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

<!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('touchFoc us');
});
}
});
</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
11-21-2015, 12:55 PM
Well, your CSS If for IE is missing part, it should be this
<!--[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
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
11-21-2015, 01:35 PM
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
11-21-2015, 02:14 PM
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
11-21-2015, 02:20 PM
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
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
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
11-21-2015, 02:44 PM
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
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.
DemOnstar
11-21-2015, 05:27 PM
That is interesting.

So if I take all of that out?

--------------- Added 1448134654 at 1448134654 ---------------

Yep, it still works but with the same result.

I.E. and Chrome won't work with it. Opera too.
Lynne
11-22-2015, 01:07 AM
Can we get a link to view the problem? Images really don't help with CSS issues.
DemOnstar
11-22-2015, 05:21 AM
Can we get a link to view the problem? Images really don't help with CSS issues.

Not live yet. Still on localhost.

<!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('touchFoc us');
});
}
});
</script>

Easy enough to replicate. Just drop the code in a HTML module.

Thank you. . .
Replicant
11-22-2015, 12:51 PM
Easy enough to replicate. Just drop the code in a HTML module.

Thank you. . .

Everybody doesn't have a VB5 installation running that they can just mess with. Also the reason a link would be better is sometimes, the problems you may experience don't always happen for everyone else depending on server configuration and so forth. I would drop the code into an HTML module and check it out, but right now my VB5 test site is inoperable.

Also, I noticed this line.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

You can't run two versions of Jquery on the same page without some extra code defining a new variable for the second version. If there is nothing specifically in that version that you need, delete that line. VB5 uses Jquery - 1.7.2.
DemOnstar
11-22-2015, 01:50 PM
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. . .
Lynne
11-22-2015, 03:33 PM
Not live yet. Still on localhost.

<!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('touchFoc us');
});
}
});
</script>

Easy enough to replicate. Just drop the code in a HTML module.

Thank you. . .

But, as I said, you cannot enter that code as it will break the page. The <html> and <meta> etc.... all codes that would be in the <head> part of a page cannot be put into the module. You said you fixed the code after I commented about this before, so what is the *fixed* code you are entering?
Lynne
11-22-2015, 03:37 PM
However, even putting in the incorrect code you provided, the modules were just fine on both Chrome and Firefox.

Chrome:
153698

Firefox:
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.
DemOnstar
11-22-2015, 04:07 PM
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 1448216035 at 1448216035 ---------------

Default style did the trick. . .

Process of elimination next. . .

Ta. . .

--------------- Added 1448218857 at 1448218857 ---------------

After some messing around, I was able to narrow it down to something in this.


div.box {
background-color: transparent;
border: medium none;
overflow: auto;
padding: 13px;
}
.box {
padding-bottom: 20%;
width: 22%;
}


Case concluded. Although, it does show a purple space between pictures in Firefox but I.E and Chrome are now clear. As is Opera.

Very good. . . .

Thanks all. . . .