Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Scrollbar removes right part of images
Posted by: RainLover Jul 5 2012, 11:25 PM
Hi,
Sample:
CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
Except in Internet Explorer and Opera the right part of images are cut. I wonder what's the reason and how they can be displayed the same across different browsers.
Many thanks in advance!
Mike
Posted by: Darin McGrew Jul 6 2012, 12:29 AM
Without seeing the entire page (Can you provide a URL?), my guess is that the CSS "overflow-x:hidden" is causing the right parts of the images to be hidden when they are wider than the available display area.
Posted by: RainLover Jul 6 2012, 12:38 AM
QUOTE(Darin McGrew @ Jul 6 2012, 12:29 AM) 
Without seeing the entire page (Can you provide a URL?)
It's the whole page content -- no more elements.
QUOTE
my guess is that the CSS "overflow-x:hidden" is causing the right parts of the images to be hidden when they are wider than the available display area.
To clarify the problem here's a similar code without overflow-x:hidden:
CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
Now you see an unnecessary horizontal scrollbar except in IE and Opera.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)