Layout problem in ie7 only!

HTML & CSS
1

Sorry for duplication but I posted this to wrong forum :blush:

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

2

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.

3

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.

4

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ā€¦ " :blush:

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