The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Scrollbar removes right part of images
RainLover
post Jul 5 2012, 11:25 PM
Post #1


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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>


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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 6 2012, 12:29 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 6 2012, 12:38 AM
Post #3


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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>


Now you see an unnecessary horizontal scrollbar except in IE and Opera.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2014 - 05:19 AM