Results 1 to 4 of 4

Thread: CSS Image Gallery help. Image and text overlay.

  1. #1
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery help. Image and text overlay.

    1) Script Title: CSS Image Gallery

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...image-gallery/

    3) Describe problem:
    No problem with firefox but having problem with IE6 and IE7 (tried only both IE 6 and & 7)

    There are texts on the right side of the small thumbnail images.When mouse over the thumbnail image, the enlarge image will appears on the right side. Since i have text on the right side, I can see the text when the enlarge image appears in IE browser. Meaning the text is on top of the image, so i can see the text and image as well. If using firefox, those text will be cover when the enlarge image appear.

    I have attach pictures as well.
    text and image.JPG is from IE browser
    image.jpg is from firefox browser
    box layout.jpg shows how i create the image and text layout.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Could you please post a link to your site or attach the code you are using?

  3. #3
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i have upload the file here:
    http://www.freedrive.com/folder/191159

    but i think copy and pass the code will be faster. All the html, css and jpg are under the same directory or same level. HAve also attach here. the testpage.txt is actually testpage.html

    or here is the html code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title></title>
    <link rel="stylesheet" href="testpage.css" type="text/css" />
    <SCRIPT src="javascript.js" language="JavaScript"></SCRIPT>
    </head>
    <body>
    <div id="container">


    <div id="outerboxsp">
    <div id="outerbox">
    <div id="box3">
    <div class="spacebs">&nbsp;</div>
    <table>
    <tr>
    <td width="100%">
    <div class="gallerycontainer">

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

    <br />
    </div> </td>
    </tr>
    </table>
    </div>
    <div id="box4">
    <div class="spacebs">&nbsp;</div>
    <table>
    <tr>
    <th colspan="3"></th>
    </tr>
    <tr>
    <td width="33%">Left1</td>
    <td width="33%">Good</td>
    <td width="33%">Good</td>
    </tr>
    <tr>
    <td width="33%">Left2</td>
    <td width="33%">Good</td>
    <td width="33%">Excellent</td>
    </tr>
    <tr>
    <td width="33%">Left3</td>
    <td width="33%">Excellent</td>
    <td width="33%">Excellent</td>
    </tr>
    <tr>
    <td width="33%">1</td>
    <td width="33%"></td>
    <td width="33%"></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>



    here is the css code

    body
    {
    background-color:#FFFFFF;
    background-image:none;
    padding:0;
    margin:0;
    }
    #container
    {
    position:relative;
    clear:both;
    width:1000px;
    background-color:transparent;
    font-size:10px;
    }
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }

    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    }

    .thumbnail:hover img{
    border: 1px;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 215px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }

    #outerboxsp
    {
    position:relative;
    float:left;
    clear:both;
    width:1000px;
    background:transparent;
    font-size:1px;
    }
    #outerboxbot
    {
    position:relative;
    float:left;
    clear:both;
    width:1000px;
    height:200px;
    background:transparent;
    font-size:1px;
    }
    #outerbox
    {
    position:relative;
    float:left;
    clear:both;
    width:1000px;
    background-color:transparent;
    font-size:10px;
    }
    #box3
    {
    position:relative;
    float:left;
    width:240px;
    background-color:transparent;
    font-size:10px;
    }
    #box3 .spacebs
    {
    font-size:0;
    margin:0;
    padding:0;
    }
    #box3 table
    {
    position:relative;
    width:235px;
    left:5px;
    border-collapse:collapse;
    border:0 none #000000;
    font-family:arial,sans-serif;
    font-size:12px;
    color:#000000;
    margin:0;
    padding:0;
    }
    #box3 tr
    {
    vertical-align:middle;
    }
    #box3 th
    {
    background:#FFFFFF;
    border:0 none #000000;
    text-align:left;
    margin:0;
    padding:0;
    color:#000000;
    }
    #box3 td
    {
    border:0 none #000000;
    text-align:left;
    margin:0;
    padding:0 0 2px 5px;
    color:#000000;
    }
    #box4
    {
    position:relative;
    float:left;
    width:760px;
    background-color:transparent;
    font-size:10px;
    }
    #box4 .spacebs
    {
    font-size:0;
    margin:0;
    padding:0;
    }
    #box4 table
    {
    position:relative;
    width:755px;
    left:5px;
    border-collapse:collapse;
    border:0 none #000000;
    font-family:arial,sans-serif;
    font-size:12px;
    color:#000000;
    margin:0;
    padding:0;
    }
    #box4 tr
    {
    vertical-align:middle;
    }
    #box4 th
    {
    background:#FFFFFF;
    border:0 none #000000;
    text-align:left;
    margin:0;
    padding:0;
    color:#000000;
    }
    #box4 td
    {
    border:0 none #000000;
    text-align:left;
    margin:0;
    padding:0 0 2px 5px;
    color:#000000;
    }
    Last edited by sha; 12-22-2008 at 05:07 PM.

  4. #4
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anybody can help please.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •