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: 7,998
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: 30th July 2014 - 02:13 PM