SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE problem displaying thumbs

    Hello
    I am trying to resolve a problem around the IE6/7.

    I've got a ph0toalbum on a website and it displays correctly in FF but not IE.

    It should be displayed with 4 columns, 4 rows, but IE displays more than 4 columns...
    See here alppan.ch - goto 'Fotogalerie' select Album

    My CSS:

    Code CSS:
    /* WT GALLERY list mode */
    .wtgallery_listpic_pic {
    	border: 0px solid white;
    }
    .wtgallery_listpic {
    	border: 0 px solid #888888;
    	width: 120px;
    	height: 120px;
    	margin: 5px;
    	}
     
    .wtgallery_pagebrowser_up {
    	display: none;

    How can I bring IE to collaps the thumbs properly? Any workaround?
    Thanks so much for your help.

    Stephen

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE has a problem sometime to clear float before. As a workaround, e.g. try float:none on the fourth image-div instead of clear:left on the fifth image-div. That should break to new row in IE too.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello
    Thanks so much for your suggestions, unfortunately no luck yet.

    Code CSS:
    .wtgallery_listpic {
    	border: 0 px solid #888888;
    	width: 120px;	
    	margin: 5px;
    	height:1%;
            float: left;	
    	display:inline;
            clear: right;	
    	}

    The above produced so far the best results, but the first line of thumbs still escapes the container. I tried the Holly-Hack but also no luck...

    Can be seen at alppan.ch -goto Fotogalerie, select an Album

    Any other suggestion? I am running out of ideas!
    Cheers

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I posted this the other day and it shows how to create new lines with floated thumbnails without closing the ul and starting again.

    http://www.pmob.co.uk/temp/float-clear3.htm

    Or for right floated elements like this:

    http://www.pmob.co.uk/temp/float-clear2.htm

    It is similar to what erik suggested except that the element need to be display:inline-block to keep everything tidy. Other browsers just get a simple clear as they do this right automatically.

    In your page it would roughly look like this:
    Code:
    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 
        This website is powered by TYPO3 - inspiring people to share!
        TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
        TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
        Information and contribution at http://typo3.com/ and http://typo3.org/
    -->
    <base href="http://www.alppan.ch/" />
    <link rel="shortcut icon" href="http://www.alppan.ch/" />
    <link rel="icon" href="http://www.alppan.ch/" />
    <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_c69acbe596.css" />
    <link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
    <title>Fotogalerie</title>
    <meta name="generator" content="TYPO3 4.2 CMS" />
    <script type="text/javascript" src="http://www.alppan.ch/typo3temp/javascript_93077bb238.js"></script>
    <style type="text/css" id="internalStyle">
    
            BODY {    margin: 0 0 0 0; background-color: white; }
    /* default styles for extension "tx_newloginbox_pi3" */
        .tx-newloginbox-pi3-listrow TH { background:#ccc; padding:0 .5em; white-space:nowrap; }
        .tx-newloginbox-pi3-listrow TD { background:#eee; padding:0 .5em; }
        .tx-newloginbox-pi3-singleView TH { background:#ccc; padding:0 .5em; text-align:right; white-space:nowrap; }
        .tx-newloginbox-pi3-singleView TD { background:#eee; padding:0 .5em; }
    /* default styles for extension "tx_mininews_pi1" */
            .tx-mininews-pi1 .tx-mininews-pi1-listrow { margin-top: 5px; }
            P.tx-mininews-pi1-listrowField-title { font-weight: bold; }
            P.tx-mininews-pi1-listrowField-teaser { margin-bottom:15px; }
            P.tx-mininews-pi1-fp_listrowField-title { font-weight: bold; }
            P.tx-mininews-pi1-fp_listrowField-teaser { margin-top: 0px; margin-bottom: 10px; }
            .tx-mininews-pi1 .tx-mininews-pi1-singleView { margin-top: 5px; }
            P.tx-mininews-pi1-singleViewField-teaser { font-style: italic; margin-top: 5px; margin-bottom: 10px; }
            SPAN.tx-mininews-pi1-browsebox-strong { font-weight: bold; }
            P.tx-mininews-pi1-listrowField-teaser A { color: black; text-decoration:none; }
            P.tx-mininews-pi1-listrowField-teaser A:hover { color: black; text-decoration:none; }
    /* default styles for extension "tx_cssstyledcontent" */
    /* Captions */
        DIV.csc-textpic-caption-c .csc-textpic-caption { text-align: center; }
        DIV.csc-textpic-caption-r .csc-textpic-caption { text-align: right; }
        DIV.csc-textpic-caption-l .csc-textpic-caption { text-align: left; }
    
        /* Needed for noRows setting */
        DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }
    
        /* Border just around the image */
        DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
            border: 2px solid black;
            padding: 0px 0px;
        }
    
        DIV.csc-textpic-imagewrap { padding: 0; }
    
        DIV.csc-textpic IMG { border: none; }
    
        /* DIV: This will place the images side by side */
        DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }
    
        /* UL: This will place the images side by side */
        DIV.csc-textpic DIV.csc-textpic-imagewrap UL { list-style: none; margin: 0; padding: 0; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI { float: left; margin: 0; padding: 0; }
    
        /* DL: This will place the images side by side */
        DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* FE-Editing Icons */
        DL.csc-textpic-image { margin: 0; }
        DL.csc-textpic-image DT { margin: 0; display: inline; }
        DL.csc-textpic-image DD { margin: 0; }
    
        /* Clearer */
        DIV.csc-textpic-clear { clear: both; }
    
        /* Margins around images: */
    
        /* Pictures on left, add margin on right */
        DIV.csc-textpic-left DIV.csc-textpic-imagewrap .csc-textpic-image,
        DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
        DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap .csc-textpic-image {
            display: inline; /* IE fix for double-margin bug */
            margin-right: 10px;
        }
    
        /* Pictures on right, add margin on left */
        DIV.csc-textpic-right DIV.csc-textpic-imagewrap .csc-textpic-image,
        DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
        DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap .csc-textpic-image {
            display: inline; /* IE fix for double-margin bug */
            margin-left: 10px;
        }
    
        /* Pictures centered, add margin on left */
        DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
            display: inline; /* IE fix for double-margin bug */
            margin-left: 10px;
        }
        DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }
    
        /* Space below each image (also in-between rows) */
        DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 5px; }
        DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: 5px; display: block; }
        DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }
    
        /* No margins around the whole image-block */
        DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol { margin-left: 0px !important; }
        DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol { margin-right: 0px !important; }
    
        /* Add margin from image-block to text (in case of "Text w/ images") */
        DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
        DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
            margin-right: 10px !important;
        }
        DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
        DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
            margin-left: 10px !important;
        }
    
        /* Positioning of images: */
    
        /* Above */
        DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }
    
        /* Center (above or below) */
        DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
        DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
        DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image { text-align: left; /* Remove IE-hack */ }
        DIV.csc-textpic-center DIV.csc-textpic-text { text-align: left; /* Remove IE-hack */ }
    
        /* Right (above or below) */
        DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
        DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }
    
        /* Left (above or below) */
        DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
        DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }
    
        /* Left (in text) */
        DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }
    
        /* Right (in text) */
        DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }
    
        /* Right (in text, no wrap around) */
        DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
        /* Hide from IE5-mac. Only IE-win sees this. \*/
        * html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1&#37;; }
        /* End hide from IE5/mac */
    
        /* Left (in text, no wrap around) */
        DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
        /* Hide from IE5-mac. Only IE-win sees this. \*/
        * html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
        /* End hide from IE5/mac */
    DIV.csc-textpic DIV.csc-textpic-imagerow-last { margin-bottom: 0; }
    
    #header {  
       padding: 0;
       background-color:#f1a744; 
       #font-size: 60px;  
       #font-weight: bold;   
       #text-align: center;
       #vertical-align: top;
       text-align: left;
       margin-bottom: 0;
      # height: 180px;
     }
     
     .title {
       font-size: 60px;  
       font-weight: bold;
      # vertical-align: 80%;
       padding-left:200px;
       #text-align: center;
       vertical-align: 80%;
       }
       
      # .title { font-family : Arial,Verdana,Helvetica,sans-serif;
      #font-size: 18px;
     # font-weight: bold;
     # color: black; 
    #  text-align: left;
    #}
         
     
    
    
    #left {
       position: absolute;
       left: 0px;
       width: 260px;
    }
    #right_content {
       position: absolute;
       right: 0;
       margin-right: 0;
       width: 200px;
    }
    
    #content {
    margin-left: 275px;
    margin-right: 20px;
      background-image: url("http://www.alppan.ch/fileadmin/templates/rightbg.gif");
      background-position: 100% 0;
      background-repeat: repeat-y;
    }
    
    #left_content {
        padding-left:10px;
    }
    
    #footer {
        font-size: 10px;
        text-align: center;
        padding-top: 15px;
    }
    
    
    
      p, ol, div { font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-align: left;
        }
        
    
    
    .text_left { font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-align: left;
        }
    
    .text_center { font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-style: normal;
        text-align: center;
        }
    
    .menu_title { font-family: Arial,Helvetica,sans-serif;
        font-size: 16px;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-style: normal;
        text-align: left;
        }
    
    INPUT {
      color : #000000;
      background-color: #EFEFEF;
      font-size: 12px;
      font-weight: normal;
      font-family : Arial,Verdana,Helvetica,sans-serif;
      border: solid 1px;
      border-color: #CD853E;
      padding: 0px 0px 0px 0px;
      vertical-align:bottom;
    }
    TEXTAREA {
      color : #000000;
      background-color: #EFEFEF;
      font-size: 12px;
      font-weight: normal;
      font-family : Arial,Verdana,Helvetica,sans-serif;
      border: solid 1px;
      border-color: #CD853E;
      padding: 0px 0px 0px 0px;
      vertical-align:bottom;
    } 
    /* In Text Hyperlinks */
    a:link {
    #font-size: 12px;
    font-weight: bold;
    color: #CD853F; /* brown */
    text-decoration: none; 
    }
    a:active {
    #font-size: 12px;
    font-weight: bold;
    color: #CD853F; /* brown */
    text-decoration: none; 
    }
    a:visited {
    #font-size: 12px;
    font-weight: bold;
    color: #CD853F; /* brown */
    text-decoration: none;
    }
    a:hover {
    #font-size: 12px;
    font-weight: bold;
    color: #CD853F; /* brown */
    text-decoration: underline;
    }
    
    /* remove borders around images */
    a img {border:0;}
    
    
    /* Menu left column */
    div#menu_left {    
        vertical-align: top; 
        #width: 300px;    
        background-image:  url(file:///E|/DATA/WEBSITES/images/blank.jpg);
        background-repeat : no-repeat;
        padding-top: 50px;
        }
    div#menu_left {
        color: #fffefe;
        #width: 100%;
        text-indent: 10px;
        padding-bottom:3px;
        }
    #menu_left DIV A {
        color: #000000;
        text-decoration: none;
    }
    #menu_left DIV A:hover {
        text-decoration: underline;
    }
    
    /*  MENU left, level 1, normal state (NO) */
    .menu1-level1-no {
      border-bottom: 1px dotted #999999;
      font-size: 16px;
      font-weight: bold;
      padding-top:5px;
      padding-bottom:5px;
      padding-left:5px;
     }
    
    /*  MENU left, level 1, active state (ACT) */
    .menu1-level1-act {
      font-size: 16px;
      font-weight: bold;
      padding-top:5px;
      padding-bottom:5px;  
      padding-left:5px;
      background-color: #ffefd9;
    }
    
    .menu1-level1-act A {
      font-weight:bold;
    }
    
    /*  MENU left, level 2, normal state (NO) */
    .menu1-level2-no {
      font-size: 16px;
      font-weight: bold;
      text-indent:25px;
      padding-top:5px;
      padding-bottom:5px;
      #padding-left:10px;
      border-bottom: 1px dotted #0069ee;
       
    }
    /*  MENU left, level 2, active state (ACT) */
    .menu1-level2-act {
      font-size: 16px;
      font-weight:bold;
     text-indent:25px;
      padding-top:5px;
      padding-bottom:5px;
     # padding-left:10px;
      border-bottom: 1px dotted #0069ee; 
    }
    
    
    /*  MENU left, level 3, normal state (NO) */
    .menu1-level3-no {
      font-size: 16px;
      padding-left:20px;
      padding-top:3px;
      border-bottom: 1px dotted #0069ee;
    }
    /*  MENU left, level 3, active state (ACT) */
    .menu1-level3-act {
      font-size: 16px;
      padding-left:20px;
      padding-top:3px;
      border-bottom: 1px dotted #0069ee;
    }
    
    /* WT GALLERY category mode */
    div.wtgallery_categories { 
        border: 0px solid silver;
        width: 170px;
        padding: 10px;
        float: left;
        margin: 5px 0;
    }
    div.wtgallery_category_pic {
        float: left;
    }
    div.wtgallery_category_pic {
        margin-right: 10px;
    }
    div.wtgallery_category_folder {
        margin: 20px 0 10px 0;
    }
    p.wtgallery_category_pagebrowser {
        display: none;
    }
    
    /* WT GALLERY headers */
    .wtgallery_category_h1 {
        font-size: 12px;
    }
    
    
    /* WT GALLERY list mode */
    
    .wtgallery_listpic_pic {
        border: 0px solid white;    
        }
    
    .wtgallery_listpic {
        border: 0 px solid #888888;
        width: 120px;    
        margin: 5px;
        min-height:1%;
        float: left; 
        
        display:inline;
    clear: right;    
        }
        
    .wtgallery_pagebrowser_up {
        display: none;
    }
    /* WT GALLERY singleview mode */
    .wtgallery_singlepic_pic {
        border: 1px solid white;
    }
    .wtgallery_singlepic {
        border: 0 px solid #888888;
        width: 482px;
        margin-left: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: center;
    }
    /* wt_gallery END */
    }
    
    /* mailform layout  */
    
    legend {
    padding-left:10px;
    padding-right:10px;
    border: 0px;
    }
    
    fieldset {
    border:0px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    border: 1px solid #C0C0C0;
    }
    
    .radiolayout {
    width:60%;
    padding-top:15px;
    padding-bottom:15px;
    border:0px;
    }
    
    .formu {
    width:80%;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:110px;
    border: 1px solid #C0C0C0;
    }
    
    .mf-radio {
    border:0px;
    }
    
    .mf-text {
    color: #000000;
    border: 1px solid #C0C0C0;
    margin-bottom: 5px;
    }
    
    .mf-check {
    border: 0px;
    }
    .mf-select {
    border:0px;
    }
    
    .mf-input {
    border: 1px solid #C0C0C0;
    margin-bottom: 5px;
    }
    
    .mf-submit {
    color: #ffffff;
    background-color: #C0C0C0;
    border: 0px;
    }
    
    /* mailform preview (julle_formpreview  */
    
    .label {
    color: #000000;
    }
    
    .value {
    color: #000000;
    margin-bottom: 8px;
    font-weight: bold;
    }
    
        </style>
    <link href="fileadmin/templates/alppan_1_stylesheet.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
    <style type="text/css">
    .ieclear{float:none!important;display:inline-block}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="header" border="0"><img src="http://www.alppan.ch/fileadmin/templates/../graphics/alp_pan_duo_fanclub.jpg" border="0" alt="" /><span class="title">AlpPan Duo</span></div>
    <div id="left" style="clear:right;">
        <div id="menu_left">
            <div class="menu1-level1-no"><a href="index.php?id=42" onfocus="blurLink(this);">Home</a></div>
            <div class="menu1-level1-act"><a href="index.php?id=43" onfocus="blurLink(this);">Fotogalerie</a></div>
            <div class="menu1-level1-no"><a href="index.php?id=8" onfocus="blurLink(this);">Fanclub Anmeldung</a></div>
        </div>
        <div id="left_content" class="column">
            <!--TYPO3SEARCH_begin-->
            <!--TYPO3SEARCH_end-->
        </div>
    </div>
    <div id="content" class="column">
        <!--TYPO3SEARCH_begin-->
        <!--  CONTENT ELEMENT, uid:98/list [begin] -->
        <a id="c98"></a>
        <!--  Header: [begin] -->
        <div class="csc-header csc-header-n1">
            <h1 class="csc-firstHeader">AlpPan Duo Fotogalerie</h1>
        </div>
        <!--  Header: [end] -->
        <!--  Plugin inserted: [begin] -->
        <!--
    
            BEGIN: Content of extension "wt_gallery", plugin "tx_wtgallery_pi1"
    
        -->
        <div class="tx-wtgallery-pi1">
            <div style="float: left;">
                <div style="float: left; clear: left;" class="wtgallery_listpic wtgallery_listpic_act wtgallery_listpic_firstofrow"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0004.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=02699eb169"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/e62fd711e4243db0f555e5011c07edef.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_act wtgallery_listpic_pic_firstofrow" alt="DSC_0004" title="DSC_0004" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0008.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=308a4b4fea"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/4df22ed0c28d287c7be277c4823b096f.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="DSC_0008" title="DSC_0008" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0018.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=3a59d56c35"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/ba8d81ad32c0be9f42dffa843bb3d9fa.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="DSC_0018" title="DSC_0018" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_lastofrow ieclear"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0020.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=9c84242dec"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/6c86ccb74a5b81a55eef008a5a406927.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_lastofrow" alt="DSC_0020" title="DSC_0020" /></a></div>
                <div style="float: left; clear: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_firstofrow"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0024.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=979cebb1f8"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/75c1a486f21362251e844d2f6d27783f.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_firstofrow" alt="DSC_0024" title="DSC_0024" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0028.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=785ad8fd34"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/0d0ebbdb36d68d2288f28fe8a4f9d333.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="DSC_0028" title="DSC_0028" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0042.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=b79d52d2fc"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/5adeb9694c3bd15577188faaec966d44.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="DSC_0042" title="DSC_0042" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_lastofrow ieclear"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0046.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=a8fcac95da"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/f03a96d371b0e4b2cc9c03c76dfd5344.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_lastofrow" alt="DSC_0046" title="DSC_0046" /></a></div>
                <div style="float: left; clear: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_firstofrow"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=DSC_0056.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=64965fdf46"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/7ba9e564c7e80a41c1723a01cabc00eb.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_firstofrow" alt="DSC_0056" title="DSC_0056" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=HPIM_0058.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=b062c5e9b8"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/4be682192521e71cf36baa544e6602f4.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="HPIM_0058" title="HPIM_0058" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=HPIM_0060.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=3572c0b3dd"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/4ebfa46032a9563629772567b9769551.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="HPIM_0060" title="HPIM_0060" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_lastofrow ieclear"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=HPIM_0062.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=c9980b1296"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/13f334d169e0fdc539c6e0b791bedf6c.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_lastofrow" alt="HPIM_0062" title="HPIM_0062" /></a></div>
                <div style="float: left; clear: left;" class="wtgallery_listpic wtgallery_listpic_no wtgallery_listpic_firstofrow"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=PICT_0090.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=857e27723a"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/d4795925c9a66bc1320c6f6b116ca9a7.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no wtgallery_listpic_pic_firstofrow" alt="PICT_0090" title="PICT_0090" /></a></div>
                <div style="float: left;" class="wtgallery_listpic wtgallery_listpic_no ieclear"><a href="index.php?id=44&amp;tx_wtgallery_pi1[picid]=PICT_0102.JPG&amp;tx_wtgallery_pi1[cat]=Fanclub%20Treffen%20Allerheiligenberg%202008&amp;tx_wtgallery_pi1[thumbid]=0&amp;cHash=5b340431aa"><img src="http://www.alppan.ch/uploads/tx_wtgallery/thumbs/88ae06a28aa6227f0b5ec54f23ee249d.jpg" width="102" class="wtgallery_listpic_pic wtgallery_listpic_pic_no" alt="PICT_0102" title="PICT_0102" /></a></div>
                <div style="clear: both;"></div>
                <div class="wtgallery_pagebrowser">
                    <div class="wtgallery_pagebrowser_sign wtgallery_pagebrowser_back">
                        <!--  -->
                    </div>
                    <div class="wtgallery_pagebrowser_sign wtgallery_pagebrowser_page">1/1</div>
                    <div class="wtgallery_pagebrowser_sign wtgallery_pagebrowser_fwd">
                        <!--  -->
                    </div>
                    <div class="wtgallery_pagebrowser_up"><a href="index.php?id=43">Zur&#252;ck zur Kategorieansicht</a></div>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
        <!-- END: Content of extension "wt_gallery", plugin "tx_wtgallery_pi1" -->
        <!--  Plugin inserted: [end] -->
        <!--  CONTENT ELEMENT, uid:98/list [end] -->
        <!--TYPO3SEARCH_end-->
    </div>
    <div id="right_content" class="column">
        <!--TYPO3SEARCH_begin-->
        <!--TYPO3SEARCH_end-->
    </div>
    <div id="footer">Copyright 2008 
        &copy; alppan.ch</div>
    </body>
    </html>

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ...
    I posted this the other day and it shows how to create new lines with floated thumbnails without closing the ul and starting again.
    ...
    Searched for that thread before I posted above, but couldn't find it.
    Happy ADD/ADHD with Asperger's

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by eirk
    Searched for that thread before I posted above, but couldn't find it.
    Yes it's funny how similar questions always seem to pop up in a row and then you can't find the answer you just posted.

  7. #7
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, strange - but the solution was this:

    Code:
    .wtgallery_listpic {
    	border: none;
    	width: 120px;
    	height: 130px;
    	margin: 5px;
    }
    The css for the pics defined too little space but the thumbs were defined bigger in the CMS. This caused the pics to overlap and - I don't know why - to escape the container...

    Thanks for all your help.
    Last edited by stefan72; Aug 11, 2008 at 12:24. Reason: codebox

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We must have been talking at cross purposes as it still looks broken to me in IE (unless you haven't updated the code yet of course ).


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
  •