[sash_oo7]

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

[Wickham]

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">&nbsp;</div>

[Miami]

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

[sash_oo7]

Wickham, on 29 December 2010 - 11:08 AM, said:

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">&nbsp;</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

This post has been edited by sash_oo7: 30 December 2010 - 04:34 AM