Please help. Issues getting HTML/CSS to render in Internet Explorer 8
pignanny
Registered Users Posts: 15 Big grins
Hi all,
Below is some code I am trying to use to create a portfolio (Landscpe Collage) that is not clickable. Currently the new smugmug forces you to either click to lightbox or into the gallery when using the multiple photo content box. It does not give the option to "do nothing". Anyway, the code below works like a charm in firefox, but only renders lines in IE8 (have not tested other versions of IE). Can anyone please correct (add) necessary code to make this work in all browsers?
Thanks much!!
Here is the code.
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%}
Below is some code I am trying to use to create a portfolio (Landscpe Collage) that is not clickable. Currently the new smugmug forces you to either click to lightbox or into the gallery when using the multiple photo content box. It does not give the option to "do nothing". Anyway, the code below works like a charm in firefox, but only renders lines in IE8 (have not tested other versions of IE). Can anyone please correct (add) necessary code to make this work in all browsers?
Thanks much!!
Here is the code.
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%}
0
Comments
www.richknechtphotography.com