IE problem displaying thumbs

**stefan72** · Aug 9, 2008, 05:10

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

**Erik J** · Aug 9, 2008, 09:51

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.

**stefan72** · Aug 9, 2008, 12:30

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

**Paul O'B** · Aug 10, 2008, 07:23

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>

**Erik J** · Aug 10, 2008, 08:57

Originally Posted by Paul O'B

...
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.

**Paul O'B** · Aug 10, 2008, 09:18

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.

**stefan72** · Aug 11, 2008, 11:23

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.

**Paul O'B** · Aug 11, 2008, 13:14

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

).

User Tag List

Thread: IE problem displaying thumbs

Thread Tools

Display

IE problem displaying thumbs

Bookmarks

Bookmarks

Posting Permissions