Custom code for new smugmug works in FF but not in IE8
pignanny
Registered Users Posts: 15 Big grins
Hello all,
I do not know if this is the correct place to post this question. I have looked around and cannot find the correct board (if it exists). I am in the process of converting from the legacy smugmug to the new smugmug. As all smugmug user know any advanced customization is toast after migrating. That said, I have created custom page using HTML and CSS so I can have a profile page that has a landscape collage but where the pictures cannot be clicked on. I submitted this as a fix to smugmug because when adding the Multiple Photos content there is no option for the "on Click" to do "nothing". It currently makes you go to lightbox or the actually gallery. Here is a picture of what I am talking about. I hope the image shows as I have never posted an image in this forum.
At the bottom of this post is a picture of what I am seeing in IE. I have also posted the code I used. It works beautifully in Firefox, however when trying it in IE 8 all I get are lines where the portfolio would be.
Here is the code that I have used:
HTML:
<ul id="myContent">
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Rachel-I/Rachel-I-Album-2/i-535wSdh/1/XL/IMG_9646-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Gentlemen/Joshua-R/Joshua-R-2012-Christmas-Album2/i-D6sHSdc/2/XL/IMG_7004-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-J8c4xgc/1/M/IMG_2584-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-65DHw45/1/XL/IMG_7407-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-tg4jxft/1/XL/IMG_7411-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-BThSMsw/1/XL/IMG_7267-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-cZQhj48/1/XL/IMG_7448-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-P8jDXvX/1/XL/IMG_7415-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Amira-AI/Amira-AI-Album-3/i-cGzh6mQ/1/M/IMG_2822-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Dana-E/Dana-E-Album-3/i-z834vVc/1/XL/IMG_1258-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-bJhqcBS/1/M/IMG_2600-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Gentlemen/Akiem-W/Aliem-W-Album-4/i-FSkdQpb/1/XL/IMG_3340-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Ashley-DB/Ashley-2012-Christmas-Album-2/i-LPWtXVd/2/XL/IMG_6717-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-z9Lj2RR/1/XL/IMG_7359-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Hillary-W-and-Joshua-R/Hillary-W-and-Joshua-R-Album-1/i-3JJDhgb/1/XL/IMG_0824-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Nathalie-F/Nathalie-F2012-Christmas-Album/i-n6L7j7b/3/XL/IMG_4434_1-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-fLXvVKW/1/XL/IMG_7174-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Kelsey-C/Kelsey-2012-Christmas-Album-2/i-R5qqqCR/4/XL/IMG_6271-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-Rj9DNNB/1/XL/IMG_2473-XL.jpg" width="auto" height="auto" alt="" /></li>
</ul>
CSS:
#container {
width: 100%;
margin: 0 auto;
}
#myContent {
-moz-column-count: 4;
-moz-column-gap: 4px;
-webkit-column-count: 4;
-webkit-column-gap: 4px;
column-count: 4;
column-gap: 4px;
width: 100%;
height: 100%}
#myContent img {
display: inline-block;
margin-bottom: 0;
width: 100%}
I have not unveiled my new site yet because of this issue.
Any help to correct this problem would be greatly appreciated.
Thanks,
Tony
I do not know if this is the correct place to post this question. I have looked around and cannot find the correct board (if it exists). I am in the process of converting from the legacy smugmug to the new smugmug. As all smugmug user know any advanced customization is toast after migrating. That said, I have created custom page using HTML and CSS so I can have a profile page that has a landscape collage but where the pictures cannot be clicked on. I submitted this as a fix to smugmug because when adding the Multiple Photos content there is no option for the "on Click" to do "nothing". It currently makes you go to lightbox or the actually gallery. Here is a picture of what I am talking about. I hope the image shows as I have never posted an image in this forum.
At the bottom of this post is a picture of what I am seeing in IE. I have also posted the code I used. It works beautifully in Firefox, however when trying it in IE 8 all I get are lines where the portfolio would be.
Here is the code that I have used:
HTML:
<ul id="myContent">
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Rachel-I/Rachel-I-Album-2/i-535wSdh/1/XL/IMG_9646-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Gentlemen/Joshua-R/Joshua-R-2012-Christmas-Album2/i-D6sHSdc/2/XL/IMG_7004-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-J8c4xgc/1/M/IMG_2584-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-65DHw45/1/XL/IMG_7407-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-tg4jxft/1/XL/IMG_7411-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-BThSMsw/1/XL/IMG_7267-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-cZQhj48/1/XL/IMG_7448-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-P8jDXvX/1/XL/IMG_7415-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Amira-AI/Amira-AI-Album-3/i-cGzh6mQ/1/M/IMG_2822-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Dana-E/Dana-E-Album-3/i-z834vVc/1/XL/IMG_1258-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-bJhqcBS/1/M/IMG_2600-M.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Gentlemen/Akiem-W/Aliem-W-Album-4/i-FSkdQpb/1/XL/IMG_3340-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Ashley-DB/Ashley-2012-Christmas-Album-2/i-LPWtXVd/2/XL/IMG_6717-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-z9Lj2RR/1/XL/IMG_7359-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Hillary-W-and-Joshua-R/Hillary-W-and-Joshua-R-Album-1/i-3JJDhgb/1/XL/IMG_0824-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Nathalie-F/Nathalie-F2012-Christmas-Album/i-n6L7j7b/3/XL/IMG_4434_1-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Roberts/Roberts-Family/i-fLXvVKW/1/XL/IMG_7174-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/Ladies/Kelsey-C/Kelsey-2012-Christmas-Album-2/i-R5qqqCR/4/XL/IMG_6271-XL.jpg" width="auto" height="auto" alt="" /></li>
<li><img src="http://mintphoto.smugmug.com/Galleries/CouplesFamily/Lyons-Kids/Amber-L-Kayla-and-Marcus/i-Rj9DNNB/1/XL/IMG_2473-XL.jpg" width="auto" height="auto" alt="" /></li>
</ul>
CSS:
#container {
width: 100%;
margin: 0 auto;
}
#myContent {
-moz-column-count: 4;
-moz-column-gap: 4px;
-webkit-column-count: 4;
-webkit-column-gap: 4px;
column-count: 4;
column-gap: 4px;
width: 100%;
height: 100%}
#myContent img {
display: inline-block;
margin-bottom: 0;
width: 100%}
I have not unveiled my new site yet because of this issue.
Any help to correct this problem would be greatly appreciated.
Thanks,
Tony
0