CODEWITHSUNDEEP
htmlcssinternet-explorer
user2153627
user2153627

Reputation:

Incorrect image size in IE

I am using unsorted list to display image with the a tag to implement lightbox on each images to see a bigger version of the image. On Mozilla Firefox, Google chrome and Opera the image are displayed with the correct size but in Internet Explorer they are smaller.

W3C Validator reports 0 errors and I declared the Doctype.

Here is the source code of the web page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Makeup Artist - Hair Stylist | Natalie Bennet</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mouseoverscroll.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js" ></script>
<div id="border"></div>
<div id="hide"></div>
<div id="header" align="center">
<div id="logo" align="center">
<img src="images/makeup-artist-hair-stylist.jpg" alt="Natalie Bennett" />
</div>
</div>
<div class="footer-arrow previous" style="left:1%; position:fixed;">
<img src="images/left-arrow-out.png"
onmouseover="this.src='images/arrow-left-on.png'"
onmouseout="this.src='images/left-arrow-out.png'" alt="previous" /></div>
<div class="galleryWrapper">
<ul class="galleryItems" style="list-style-type:none;">
<li><a href="images/portfolio/big/Sofia_1.jpg"><img class="portfolio" src="images/portfolio/Sofia_1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_2.jpg"><img class="portfolio" src="images/portfolio/Sofia_2.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_3.jpg"><img class="portfolio" src="images/portfolio/Sofia_3.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4a.jpg"><img class="portfolio" src="images/portfolio/Sofia_4a.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4b.jpg"><img class="portfolio" src="images/portfolio/Sofia_4b.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_4.jpg"><img class="portfolio" src="images/portfolio/Sofia_4.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Sofia_5.jpg"><img class="portfolio" src="images/portfolio/Sofia_5.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_1.jpg"><img class="portfolio" src="images/portfolio/Andro_1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_2.jpg"><img class="portfolio" src="images/portfolio/Andro_2.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_3.jpg"><img class="portfolio" src="images/portfolio/Andro_3.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/Andro_4.jpg"><img class="portfolio" src="images/portfolio/Andro_4.jpg" alt="" /></a></li>
[...]
<li><a href="images/portfolio/big/T1.jpg"><img class="portfolio" src="images/portfolio/T1.jpg" alt="" /></a></li>
<li><a href="images/portfolio/big/T2.jpg"><img class="portfolio" src="images/portfolio/T2.jpg" alt="" /></a></li>
</ul>
</div>
<div class="footer-arrow next" style="left:96.5%; position:fixed;">
<img src="images/right-arrow-out.png"
onmouseover="this.src='images/arrow-right-on.png'"
onmouseout="this.src='images/right-arrow-out.png'" alt="next" /></div>
<div id="footer">
<div id="site-navigation" align="center">
<ul>
<li><a href="javascript:void(0)" class="active">Portfolio</a></li>
<li><a href="javascript:closeThenNavigate('about.php')">About</a></li>
<li><a href="javascript:closeThenNavigate('backstage.php')">Backstage</a></li>
<li><a href="javascript:closeThenNavigate('contact.php')">Contact</a></li>
</ul>
</div>
<div id="footer-menu">
</div>
<div id="copyright">
&copy; Natalie Bennett 2012
</div>
</div> 
<script type="text/javascript">
    $('.galleryItems a').lightBox({fixedNavigation:true});
openFooter();
var menuopen = false;
function openFooter(){
$('#footer').animate({
height: 40,
bottom:0
}, 750, 'linear');

}

function closeFooter(){
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear');

$('#footer-button').css("backgroundPosition","center 0px");
}

var currentImage = 0;

function closeThenNavigate(url)
{
 $('#footer').animate({
 height: 20,
bottom:0
}, 750, 'linear', function() {
  window.location.href=url+"?i="+currentImage;
});
}
</script>
</body> 
</html>

And here is the CSS for the images :

img {
    border:none;
}
ul{
    padding:0px;
}
.galleryWrapper{
    top:6%; 
    left:0px; 
    width:100%;
    height:100%; 
    display:inline-block;
    position: fixed;
    width:100%;
    overflow:hidden;

}
.galleryItems li {
    list-style-type: none;
    float:left;
}

.portfolio{   
    widht:80%;
    height:88%;
    margin: 6px;
    cursor:pointer;
    margin-bottom:250px;;
}

Do you know why they are smaller in IE ?

Edit, forgot the link : http://www.zackdibe.com/final/

Upvotes: 0

Views: 1451

Answers (3)

Deepak Kamat
Deepak Kamat

Reputation: 1980

Give a position:relative; value to the .portfolio elements and then try.

Upvotes: 0

e--
e--

Reputation: 198

Indeed use pixels instead of % or live with it. IE7/8 uses quite a lot bigger area for the addressbar (bigger then for example Chrome or FF), so the viewable area is smaller, from where the percentage is calculated.

Upvotes: 0

reza ostadi
reza ostadi

Reputation: 197

use pixel Instead of % in width and height size ...

Upvotes: 1

Related Questions