Image issues??

[eclipsa]

I know the site is rebuilding itself, but that's not what this is. I'm trying to give a column a background with images on top. On the first column it worked, but the second column doesn't? It's like the images are behind it, because I can still click to enlarge.


Here's the code.

Spoiler

<p>
    &nbsp;
</p>
<link href="https://fonts.googleapis.com/css?family=Megrim|Poiret+One" rel="stylesheet">
<style type="text/css">
.suttonbg {
margin: auto;
background-repeat: no-repeat;
background-image: url("http://static.tumblr.com/523b7ec1e2696580269f3fffd389771b/amdoznp/VySn2mok9/tumblr_static_scale.jpg");
border-radius: 15px;
width: 75%;
height: auto;
padding: 12px;
background-size: 800px 600px;
font-size: 14px;
border: 2px solid #fffee7;
font-family: 'Poiret One', cursive;
color: #20b2aa;
}
.suttonh {
text-align: center;
font-family: 'Megrim', cursive;
color: #7f7399;
font-size: 40px;
text-shadow: 3px 3px #ebffc0;
}
.suttonsubh {
font-size: 24px;
color: #7f7399;
font-family: 'Megrim', cursive;
}
.suttoncolumns {
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}
.suttonbg2 {
background-color: #fffee7;
height: 500px;
overflow-y: scroll;
padding: 12px;
border-radius: 15px;
}
.suttonbg3 {
background-color: #c2e7e1;
border-radius: 15px;
height: auto;
margin: auto;
}
.suttonbg4 {
background-color: #20b2aa;
height: 500px;
overflow-y: scroll;
display: block;
    margin-left: auto;
    margin-right: auto ;
border-radius: 15px;
}
.suttonimg {
padding: 10px;
width: 150px;
height: 150px;
border-radius: 100px;
display: block;
    margin-left: auto;
    margin-right: auto ;
}</style>
<div class="suttonh">
    S U T T O N
</div>


<div class="suttonbg">
    <div class="suttoncolumns">
        <div class="suttonbg2">
            <div class="suttonbg3">
                <img alt="tumblr_obluxqrSnP1ul6n0wo7_1280.png" class="suttonimg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://67.media.tumblr.com/f4630286f1695ee03522501f35e726d4/tumblr_obluxqrSnP1ul6n0wo7_1280.png&amp;key=c46440baaec2b6aa1589f368894c5afef039b4e02f50c2689f4b527825733e53">
                <div class="suttonsubh">
                    Basics<em> !</em>
                </div>


                <p>
                    Sutton Thea Lord
                </p>


                <p>
                    19
                </p>


                <p>
                    December 31
                </p>


                <p>
                    Capricorn
                </p>


                <p>
                    Female
                </p>


                <p>
                    Heteromantic, bisexual
                </p>
            </div>


            <p>
                &nbsp;
            </p>


            <div class="suttonbg3">
                <div class="suttonsubh">
                    Appearance <em>!</em>
                </div>


                <p>
                    5&#39;3&quot;
                </p>


                <p>
                    105 lbs
                </p>


                <p>
                    Brown
                </p>


                <p>
                    Mint green eyes
                </p>


                <p>
                    Nose ring, scar on the back of her neck
                </p>
            </div>


            <p>
                &nbsp;
            </p>


            <div class="suttonbg3">
                <div class="suttonsubh">
                    Persona <em>!</em>
                </div>


                <p>
                    Spoiled, hubris, unempathetic
                </p>


                <p>
                    Concise, honest, dedicated
                </p>


                <p>
                    Resourceful, gymnastics, lock-picking
                </p>


                <p>
                    ESTJ-T
                </p>


                <p>
                    True Neutral
                </p>
            </div>


            <p>
                &nbsp;
            </p>


            <div class="suttonbg3">
                <div class="suttonsubh">
                    Theme <em>!</em>
                </div>
                <a href="https://www.youtube.com/watch?v=X-Qjyh1qCYY" rel="external nofollow" style="text-decoration: none; color: #ff80c1;">Reflection - Fifth Harmony</a>
            </div>
        </div>


        <div class="suttonbg4">
            <img alt="tumblr_obluxqrSnP1ul6n0wo2_1280.png" class="suttonimg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://67.media.tumblr.com/f7b7bd8596b22fa7358ef2552f148311/tumblr_obluxqrSnP1ul6n0wo2_1280.png&amp;key=67d8b4d39d7ecfe2b4d35c3c23c80af45619930fb93a8f68b79bb2953f98e901"><img alt="tumblr_obluxqrSnP1ul6n0wo4_1280.png" class="suttonimg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://67.media.tumblr.com/cef15fec380423de0f0a62cbaa22b2c2/tumblr_obluxqrSnP1ul6n0wo4_1280.png&amp;key=5bb08eb03b5ad777ceab7bda7f2cdf7becb0a0d26baa5158ff91947bac1c54c1"><img alt="tumblr_obluxqrSnP1ul6n0wo5_1280.png" class="suttonimg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://65.media.tumblr.com/522f0acab15b7d105b1d551a7bc5ded6/tumblr_obluxqrSnP1ul6n0wo5_1280.png&amp;key=0962722170c9a7c6b60fa85f6104c7bd36766cd6ee821c16384d164163941027"><img alt="tumblr_obluxqrSnP1ul6n0wo6_1280.png" class="suttonimg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://67.media.tumblr.com/b668283e3b2696ce1483c4de665cdade/tumblr_obluxqrSnP1ul6n0wo6_1280.png&amp;key=fbbf256e420d3f88bd6c1edc6bcd2e39d90812e1d44eed7d1b4146b29e69e59e">
        </div>
    </div>
</div>

 

[Chordling]

The second columns seem fine in my opinion.  These are the results I get when I use the coding you provided:

​

 

[eclipsa]

That's so weird??? This is what I see:

 

[Dusky]

It may have to do with browser. Apparently IE is not great at supporting HTML.


I'm not sure what all the various browser-specific elements are, but maybe that can put you on the right track?

 

[eclipsa]

I used a similar base to what I do for most of my codes :\\ I'm on Safari. I'll just sob in the corner and try to be satisfied that others see it correctly.

 

[eclipsa]

Thanks either way though!

 

[Chordling]

From Safari, your font CSS does not apply:

​

 

[eclipsa]

It still works on my end on Safari, just no images.


html/css just hates me apparently.

 

[Dusky]

xD Might have to do with update version?


I sometimes google codes to figure 'em out, and w3 has little charts that say which browsers support what codes how much.

 

[Dusky]

I've had some weird experiences with code as well - like for some reason hover effects get layered over link effects and stuff.... So it may be site-based. It's bound to be a little difficult when there's competing code from the site itself.

 

[eclipsa]

I guess I'll tinker with it a bit and try to see what happens. Thanks to both of you!