Crossbrowser percentage width inconsistancy

jackgeek

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

 
<style type="text/css">

#container 

{

    background-color: yellow;

    width: 100%;

    height: 100px;

    text-align: center;

    margin: 30px;

    padding: 0px;

    border: 0px;

}
 
#imageBox 

{

    background-color: black;

    margin-left: 0;

    margin-right: 0;

    width: 100%;

    border: 1px #000 solid;

    overflow: hidden;

}
 
#imageBoxInside 

{

    width: 2500px;

    left: -100px

}
 
#imageBox img 

{

    backcolour: black;

    float: left;

    padding: 0px;

    margin-left: 10px;

    margin-right: 10px;

    margin-top: 5px;

    margin-bottom: 5px;

}
 
#imageBox br 

{

    clear: both;

}
 
</style>

</head>

<body>

    <div id="container">

        <div id="imageBox">

            <div id="imageBoxInside">

                <img src="thumb1001.jpg" height="85px" />

                <img src="thumb1002.jpg" height="85px" />

                <img src="thumb1003.jpg" height="85px" />

                <img src="thumb1004.jpg" height="85px" />

                <img src="thumb1005.jpg" height="85px" />

                <img src="thumb1006.jpg" height="85px" />

                <img src="thumb1007.jpg" height="85px" />

                <img src="thumb1008.jpg" height="85px" />

                <img src="thumb1009.jpg" height="85px" />

                <img src="thumb1010.jpg" height="85px" />

                <img src="thumb1011.jpg" height="85px" />

                <img src="thumb1012.jpg" height="85px" />

                <img src="thumb1013.jpg" height="85px" />

                <img src="thumb1014.jpg" height="85px" />

                <img src="thumb1015.jpg" height="85px" />

                <img src="thumb1016.jpg" height="85px" />

                <img src="thumb1017.jpg" height="85px" />

                <img src="thumb1018.jpg" height="85px" />

                <br />

            </div>

        </div>

    </div>

</body>

jackgeek

I fixed the problem. I love google.

Expand|Select|Wrap|Line Numbers

 
<style type="text/css">

body {

    margin: 0px;

    padding: 0px;

    border: 0px;

    overflow: hidden;

}
 
div#holder    { 

    position:absolute; 

    background-color: black;

      left:0px; top:0px;

    width:100%; height:91px; 

  overflow:hidden; z-index:101;

    }

div#clippedWindow    { 

    position:absolute; 

    left:0px; top:0px; 

    width:100%; height:91px; 

    clip:rect(0px, 100%, 91px, 0px); 

    overflow:hidden; z-index:10; 

    }
 
#filmstrip { 

  position:absolute; 

  width: 2500px; height: 91px;

  left: -100px;

  top:0; z-index:1;

}
 
#filmstrip img 

{

    backcolour: black;

    float: left;

    padding: 0px;

    margin-left: 5px;

    margin-right: 5px;

    margin-top: 3px;

    margin-bottom: 3px;

}
 
#filmstrip br 

{

    clear: both;

}
 
#filmstrip table {

    border-width: 0px;

    border-spacing: 0px;

    padding: 0px;

    border-style: none;

}

#filmstrip table td {

    border-width: 0px;

    padding: 0px;

    border-style: none;

}

</style>

</head>

<body>

    <div id="holder">

        <div id="clippedWindow">

                <div id="filmstrip">

                <img src="thumb1001.jpg" height="85px" width="128px" />

                <img src="thumb1002.jpg" height="85px" width="128px" />

                <img src="thumb1003.jpg" height="85px" width="128px" />

                <img src="thumb1004.jpg" height="85px" width="128px" />

                <img src="thumb1005.jpg" height="85px" width="128px" />

                <img src="thumb1006.jpg" height="85px" width="128px" />

                <img src="thumb1007.jpg" height="85px" width="128px" />

                <img src="thumb1008.jpg" height="85px" width="128px" />

                <img src="thumb1009.jpg" height="85px" width="128px" />

                <img src="thumb1010.jpg" height="85px" width="128px" />

                <img src="thumb1011.jpg" height="85px" width="128px" />

                <img src="thumb1012.jpg" height="85px" width="56px" />

                <img src="thumb1013.jpg" height="85px" width="128px" />

                <img src="thumb1014.jpg" height="85px" width="56px" />

                <img src="thumb1015.jpg" height="85px" width="128px" />

                <img src="thumb1016.jpg" height="85px" width="128px" />

                <img src="thumb1017.jpg" height="85px" width="56px" />

                <img src="thumb1018.jpg" height="85px" width="56px" />

            </div>

        </div>

    </div>

</body>

drhowarddrfine

And Google loves you. :)

Crossbrowser percentage width inconsistancy

Post your reply

Similar topics