By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > crossbrowser percentage width inconsistancy
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Crossbrowser percentage width inconsistancy

P: 2
I am trying to create a film strip of thumbnails in a photo gallery type page.

I have an idea to create a div with all the thumbnails in it and then use another div to contain that so it can be shaped to where I want the strip to fit. (For example I don't necessarily want the strip to be flush with either side of the browser window). I have been experimenting and found something that is almost right but I need some help with the following points:

1) The following code renders as I would expect it to on Opera(9.01) and IE6 but not Firefox (1.5.0.6). In firefox the right hand side of the strip dissapears off the side of the browser and causes a horizontal scrollbar. How can I fix this in FF so it looks the same as in IE and O?

2) I want to be able to offset the thumbnails by a pixel amount such that I can use java script to "scroll" through them. I tried using left: -100px in the imageBoxInside but this doesn't work... Any suggestions?

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. #container 
  3. {
  4.     background-color: yellow;
  5.     width: 100%;
  6.     height: 100px;
  7.     text-align: center;
  8.     margin: 30px;
  9.     padding: 0px;
  10.     border: 0px;
  11. }
  12.  
  13. #imageBox 
  14. {
  15.     background-color: black;
  16.     margin-left: 0;
  17.     margin-right: 0;
  18.     width: 100%;
  19.     border: 1px #000 solid;
  20.     overflow: hidden;
  21. }
  22.  
  23. #imageBoxInside 
  24. {
  25.     width: 2500px;
  26.     left: -100px
  27. }
  28.  
  29. #imageBox img 
  30. {
  31.     backcolour: black;
  32.     float: left;
  33.     padding: 0px;
  34.     margin-left: 10px;
  35.     margin-right: 10px;
  36.     margin-top: 5px;
  37.     margin-bottom: 5px;
  38. }
  39.  
  40. #imageBox br 
  41. {
  42.     clear: both;
  43. }
  44.  
  45. </style>
  46. </head>
  47. <body>
  48.     <div id="container">
  49.         <div id="imageBox">
  50.             <div id="imageBoxInside">
  51.                 <img src="thumb1001.jpg" height="85px" />
  52.                 <img src="thumb1002.jpg" height="85px" />
  53.                 <img src="thumb1003.jpg" height="85px" />
  54.                 <img src="thumb1004.jpg" height="85px" />
  55.                 <img src="thumb1005.jpg" height="85px" />
  56.                 <img src="thumb1006.jpg" height="85px" />
  57.                 <img src="thumb1007.jpg" height="85px" />
  58.                 <img src="thumb1008.jpg" height="85px" />
  59.                 <img src="thumb1009.jpg" height="85px" />
  60.                 <img src="thumb1010.jpg" height="85px" />
  61.                 <img src="thumb1011.jpg" height="85px" />
  62.                 <img src="thumb1012.jpg" height="85px" />
  63.                 <img src="thumb1013.jpg" height="85px" />
  64.                 <img src="thumb1014.jpg" height="85px" />
  65.                 <img src="thumb1015.jpg" height="85px" />
  66.                 <img src="thumb1016.jpg" height="85px" />
  67.                 <img src="thumb1017.jpg" height="85px" />
  68.                 <img src="thumb1018.jpg" height="85px" />
  69.                 <br />
  70.             </div>
  71.         </div>
  72.     </div>
  73. </body>
  74.  
Mar 25 '07 #1
Share this Question
Share on Google+
2 Replies
P: 2
I fixed the problem. I love google.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. body {
  3.     margin: 0px;
  4.     padding: 0px;
  5.     border: 0px;
  6.     overflow: hidden;
  7. }
  8.  
  9. div#holder    { 
  10.     position:absolute; 
  11.     background-color: black;
  12.       left:0px; top:0px;
  13.     width:100%; height:91px; 
  14.   overflow:hidden; z-index:101;
  15.     }
  16. div#clippedWindow    { 
  17.     position:absolute; 
  18.     left:0px; top:0px; 
  19.     width:100%; height:91px; 
  20.     clip:rect(0px, 100%, 91px, 0px); 
  21.     overflow:hidden; z-index:10; 
  22.     }
  23.  
  24. #filmstrip { 
  25.   position:absolute; 
  26.   width: 2500px; height: 91px;
  27.   left: -100px;
  28.   top:0; z-index:1;
  29. }
  30.  
  31. #filmstrip img 
  32. {
  33.     backcolour: black;
  34.     float: left;
  35.     padding: 0px;
  36.     margin-left: 5px;
  37.     margin-right: 5px;
  38.     margin-top: 3px;
  39.     margin-bottom: 3px;
  40. }
  41.  
  42. #filmstrip br 
  43. {
  44.     clear: both;
  45. }
  46.  
  47. #filmstrip table {
  48.     border-width: 0px;
  49.     border-spacing: 0px;
  50.     padding: 0px;
  51.     border-style: none;
  52. }
  53. #filmstrip table td {
  54.     border-width: 0px;
  55.     padding: 0px;
  56.     border-style: none;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61.     <div id="holder">
  62.         <div id="clippedWindow">
  63.                 <div id="filmstrip">
  64.                 <img src="thumb1001.jpg" height="85px" width="128px" />
  65.                 <img src="thumb1002.jpg" height="85px" width="128px" />
  66.                 <img src="thumb1003.jpg" height="85px" width="128px" />
  67.                 <img src="thumb1004.jpg" height="85px" width="128px" />
  68.                 <img src="thumb1005.jpg" height="85px" width="128px" />
  69.                 <img src="thumb1006.jpg" height="85px" width="128px" />
  70.                 <img src="thumb1007.jpg" height="85px" width="128px" />
  71.                 <img src="thumb1008.jpg" height="85px" width="128px" />
  72.                 <img src="thumb1009.jpg" height="85px" width="128px" />
  73.                 <img src="thumb1010.jpg" height="85px" width="128px" />
  74.                 <img src="thumb1011.jpg" height="85px" width="128px" />
  75.                 <img src="thumb1012.jpg" height="85px" width="56px" />
  76.                 <img src="thumb1013.jpg" height="85px" width="128px" />
  77.                 <img src="thumb1014.jpg" height="85px" width="56px" />
  78.                 <img src="thumb1015.jpg" height="85px" width="128px" />
  79.                 <img src="thumb1016.jpg" height="85px" width="128px" />
  80.                 <img src="thumb1017.jpg" height="85px" width="56px" />
  81.                 <img src="thumb1018.jpg" height="85px" width="56px" />
  82.             </div>
  83.         </div>
  84.     </div>
  85. </body>
  86.  
  87.  
Mar 25 '07 #2
drhowarddrfine
Expert 5K+
P: 7,435
And Google loves you. :)
Mar 25 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 1731
  • replies: 2
  • date asked: Mar 25 '07
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates