简体   繁体   中英

Code working in Safari, Firefox, and Chrome, but not in IE (Alignment)

I've got a code that has a mix of html, css, and javascript. Obviously this is just a test page that I built to test a page that will be working with php content. The problem is, the code doesn't seem to work well on IE 6 or 8...I could understand maybe not IE 6 as its an old browser, but why would it work on 7, 9, and 10 and not seem to work on 8. Last I checked, it worked on 7, 9, 10 but might not now. I'm not sure if its the javascript or the css thats throwing everything off, which is why I am seeking help and posting it in multiple categories.

Live Site: http://www.technicallyworship.com/styles/style3/test.php

JSFiddle: http://jsfiddle.net/qu5Vc/

Thanks for all yalls help in advance! I'm just stumped at this point and can't figure out how to fix it. I know for a fact it works the way I want it to on Safari and Chrome (so that may give you a reference point). I am also including the code below all this too.

<style>
/* Syle 3 CSS Document */

.clear { clear: left; }

#style3 { width: 750px;}

#s3_left { 
width: 750px;
}

#s3_right { 
    float: right;
    padding: 10px;
}




    .meDiv
    {
        position:relative;
        border:1px solid black;
        max-width: 400px;
    }

    .meSmall
    {
        display:block;
        max-width: 400px; border: 2px solid #000;
    }

    .meBig
    {
        z-index:10;
        position:absolute;
        left:0px;
        top:0px;
        display:none;
        max-width: 700px;
        border: 2px solid #000;
    }
    #bigOne { max-width: 700px; max-height 800px;}
</style>

<script>
function Big() {
    document.getElementById('bigOne').style.display = "block";
}

function Small() {
    document.getElementById('bigOne').style.display = "none";
}
</script>


<h1>Testing this out</h1>

<div id="style3">

<div id="s3_left">
<div id="s3_right">
<div class="meDiv">
    <img class="meSmall" src="http://openwalls.com/image/399/explosion_of_colors_1920x1200.jpg" onmouseover="Big();" style="align: right;" />
    <img id="bigOne" class="meBig" src="http://openwalls.com/image/399/explosion_of_colors_1920x1200.jpg" onclick="Small();" onmouseout="Small();" />
</div>
</div>  <!-- s3_right -->
This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content.This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. This is test content. 
</div>  <!-- s3_left -->

</div>  <!-- style 3 -->
<div class="clear"></div>

The problem is you are using min-width property for small pic ( .meSmall ). You should define width value too. That's why IE not showing small image.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM