Please help. Issues getting HTML/CSS to render in Internet Explorer 8

pignanny

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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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&quot; 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%}

RKnecht

I read somewhere that the new Smugmug is not compatible with IE8.

pignanny

ugh...doesn't that just figure....