IE problem displaying thumbs

**stefan72** · Aug 9, 2008, 06: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, 10: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, 13: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, 08: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, 09: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, 10: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, 12: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, 14: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

).

The SitePoint Forums have moved.

User Tag List

Thread: IE problem displaying thumbs

Thread Tools

Display

IE problem displaying thumbs

Bookmarks

Bookmarks

Posting Permissions