Hello friends,

 

i just wanted this on my page

 

and i used this css

ul#recent_works,
ul#recent_works li {
	/* Setting a common base */
	margin: 0;
	padding: 0;
}
ul#recent_works{
min-height:400px;
}
ul#recent_works li {
	display: inline-block;
	/*width: 100px;
	min-height: 100px;
	background: #ccc;*/
	margin-top:10px;
	margin-left:5px;
}
ul#recent_works li img { 
border:none;
}

which shows fine in firefox,opera,ie8,chrome,safari but fails in ie6 and 7?

 

i tried the method mentioned in mozila blog but it dint worked

Your code hasn't included all the styles from the tutorial yet.

 

I'm not sure that I agree with all the hacks, but if it works, fair enough I suppose.

 

Personally, I take the easy way out which adds a bit of extra markup but is foolproof. I add the style:-

.clear { clear: both; width: 100%; height: 0; visibility: hidden; }

and leave the li tags as float: left (not inline-bloack or dispaly: inline) and put this div between the markup rows:-

<div class="clear"> </div>

Inline block in ie 6 and 7 only work on elements that are naturally inline only

Your code hasn't included all the styles from the tutorial yet.

 

I'm not sure that I agree with all the hacks, but if it works, fair enough I suppose.

 

Personally, I take the easy way out which adds a bit of extra markup but is foolproof. I add the style:-

.clear { clear: both; width: 100%; height: 0; visibility: hidden; }

and leave the li tags as float: left (not inline-bloack or dispaly: inline) and put this div between the markup rows:-

<div class="clear"> </div>

 

actually my main problem starts when i tried to display images like this under recent works but without it it works fine in ie6 see here

 

ok i think i got it fixed here

Edited December 30, 201015 yr by sash_oo7