Scrollbar removes right part of images |
Scrollbar removes right part of images |
RainLover |
Jul 5 2012, 11:25 PM
Post
#1
|
Advanced Member Group: Members Posts: 216 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 |
Darin McGrew |
Jul 6 2012, 12:29 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 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.
|
RainLover |
Jul 6 2012, 12:38 AM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
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. |
Lo-Fi Version | Time is now: 25th April 2024 - 12:21 PM |