Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Thanked 0 Times in 0 Posts

    Dynamic width and IE problem.

    I have a problem I just can't seem to fix. Please view the following link in firefox and IE to see the issue:


    All the gallery thumbnails in IE are overlayed on one another instead of next to one another like in Firefox.

    /* gallery pages */
    #gallery_Select { font-family: Helvetica, sans-serif; font-size:0.7em; text-align:justify; height:345px; width:132px; margin-top:11px; background-color:#000; overflow:hidden; }
    #gallery_Select img {border:none; margin:0; padding:0;}
    #gallery_select hr {color:#FFF; width:120px; height:1px; text-align:center;}
    .galleryPhotos { overflow: hidden; border: none; height:443px; width: 800px; padding: 0 0 0 75px;}
    .galleryPhotos div img { border: 1px solid #888; margin: 11px 8px 0 0; float: left; }
    #wn { float:right; position:relative; width:390px; height:68px; overflow:hidden; margin:0; padding:0; }
    #wn img { margin:0; padding:0; height:64px; border:none;}
    #scrollLinks { margin: 10px 140px 0 0;}
    #scrollLinks img { border:none; margin:0; padding:0;}
    #scrollLinks a { float:right; position:relative; }
    .galleryThumbs td { -moz-opacity:.5; filter:alpha(opacity=50); opacity:0.5;}
    .galleryThumbs td:hover { opacity:1.0; }
    .galleryThumbs td { padding:0px; margin:0px;}
    #galleryHeads {margin-left:20px; width:175px;}
    #galleryList {padding:20px; height:250px;}
    #galleryList a {line-height:30px; text-decoration:none; color:#FFF; display:block; width:100px;}
    #galleryList a:hover { color:#FC9; display:block; width:100px;}
    #downloadBroch {padding:0 20px 0 20px; background-image:url(../images/galleries/pdf_BG.jpg); background-repeat:no-repeat; height:40px; }
    #downloadBroch a {text-decoration:none; color:#FFF; display:block; width:100px; line-height:40px;}
    #downloadBroch a:hover { color:#FC9; display:block; width:100px;}

    <div id="wn">
    <div id="lyr1">
    <table id="t1" border="0" cellpadding="0" cellspacing="0" ><tr class="galleryThumbs">
    $i = $numPhotos;
    for ( $i = $numPhotos; $i > 0; $i-- ) { ?>
    <td><a href="javascript:void(0)" onMouseOver="gallerySwapInfo('galleryPhoto_<?php echo $i; ?>', <?php echo $numPhotos; ?>);"><img src="images/galleries/<?php echo $galleryNum; ?>/thumb/<?php echo $i; ?>.jpg" alt="" /></a></td>
    <?php } ?>
    </div> <!-- end wn div -->

    All of the javascipt code works great and the problem is in the width not being inherited by div lyr1 (only in IE). I have been able to make it work by adding a width to the lyr1 div but this doesn't help me because each gallery has a different number of thumbnails. Any help would be greatly welcomed. Thanks to all.

  2. #2
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    Thanked 727 Times in 721 Posts
    Your page does not have a valid doctype. See here for more info It's quite possible that this alone may be causing IE to display oddly.

    Looking at the code you've got I'd recommend starting your html with:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    in place of your existing single <html> tag.

  3. #3
    New to the CF scene
    Join Date
    Apr 2007
    Thanked 0 Times in 0 Posts
    That did it...thank you...I should have known that one.


Tags for this Thread

Posting Permissions

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