Layout problem in ie7 only!

[ColinHughes]

Sorry for duplication but I posted this to wrong forum

I have checked my page against as many browsers as poss and it is fine in all but ie7. The text in the search-desc div breaks out of the float-fix div and moves to the right.

CSS File;

#contents-content { /* Contents Page */
 font-size: .85em;
 margin: 1.5em 1em 0 1em;
 min-height: 85em;
}

.search-results{
 width:52em;
 border:1px solid #000000;
 margin: 1em 1em 0 0; /* Shorthand notation (top, right, bottom, left) */
} 

.float-fix{display: inline-block;}

/* Hide from IE-mac \\*/
* html .float-fix{height: 1%;}

.float-fix{display: block;}
/* End hide from IE-mac */  

  /*Float fix:*/ 
.float-fix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
 }

.search-cols{
 width:16.5em; 
 float:right; 
 position:relative;
 display: inline-block;
  }

.search-desc{
 width:35em; 
 float:right; 
 position:relative;
 padding: 1em 1em 1em 1em;
 }

.search-image{
 width:9.5em; 
 float:left; 
 position:relative; 
 padding: 1.5em 0 0 2em;
  }

HTML File:

<div id="contents-content">
  
 <div class='search-results'>

  <div class='float-fix'>

     <div class='search-cols'>

         <div class='search-desc'>


              TEXT THAT BREAKS GOES HERE


</div> <!-- end search-desc div tag -->
 
  </div> <!-- end search-cols div tag -->
  
      <div class='search-image'> <!-- add image thumbnail -->

    
                THUMBNAIL IMAGE GOES HERE

    
      </div> <!-- end search-image div tag -->

</div> <!-- end float-fix div tag -->

     </div> <!-- end search-results div tag -->

        </div> <!-- end contents-content div tag -->

Thanks for taking the time to look and I hope the solution is obvious to those with more CSS experience than myself.

Colin

[Stomme_poes]

I would like to see what you are (trying to) build here. The 5-wrapping-divs thing smells wrong, but I can't see what the content is to know why they are all there.

Even if the extra divs did get around some IE bug, I'll say more code usually helps make more bugs and hides them better.

If possible, it would be nicer to have fewer divs, thus easier CSS.

[system]

I'm with SP on that -- it smells wrong -- especially that it appears to rely on that clearfix nonsense... though some obvious problems would include comment placement possibly tripping the disappearing content/double render bugs in IE7-, EM containers around px sized elements like images, use of EM instead of % on font sizes (older IE's don't like that), attempting to use inline-block to build columns, declaring font-sizes without restating your line-heights, and nesting floats in a most peculiar manner. Much less the 85EM min-height for JHVH only knows what.

Or just that you have a 35em .search-desc inside a 16.5em .search-cols container...

Or depending on your document you might be in quirks mode; all those width and padding declarations at the same time is something I usually avoid doing in the first place... it's more headaches than it's worth.

Though I'd really have to see the actual content and the visual effect you are going for to say for certain... Though I suspect I would probably end up cutting the markup down to:

<div class="searchResults">

	<div class="thumbnail">
		<img src="images/thumbnail.png" alt="thumbnail" />
	<!-- .thumbnail --></div>
	
	<div class="description">
		Describe the Image
	</div>
	
<!-- .searchResults --></div>

With a bit simpler a CSS too.

.searchResults{
	width:52em;
	margin:2.5em 2em 0 1em;
	font:normal 85%/140% arial,helvetica,sans-serif;
	border:1px solid #000;
} 

.searchResults .thumbnail {
	clear:both;
	float:left; 
	width:160px;
	text-align:center;
	padding-top:1.5em;
}

.searchResults .description {
	padding:1em;
	margin-right:160px; /* thumbnail width */
}

... and if the size of the thumbnail image is always the same, you could probably lose the .thumbnail div... and if you are going to be using paragraphs and/or heading tags on the descriptions you could probably take an axe to that div as well moving the padding and "float-push" margin onto P and whatever heading level is appropriate.

You can see I changed the image declaration to px... EM's + IMAGES == /FAIL/ ... between the horrible behavior of the engines resizing them due to the fact that on many systems EM's do not equal the same amount as others it's best if it's a IMG, use px. EM's is for TEXT -- and with care you can use BOTH. (as in my example code).

But again, that's a wild guess.

[ColinHughes]

Hi all

Thanks for the input it made me think about reducing the divs as suggested. I now have it working. All I needed to do was remove the search-cols tag "a 35em .search-desc inside a 16.5em .search-cols container... "

I will take on board the comments about em and px and change those and the other pointers suggested.

This is my first complete site using only CSS and I would never go back to table layouts again.

Thanks for your help

Colin