Web Design Forum: Cross brwoser inline block remains a issue for Ie6 and 7 - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Cross brwoser inline block remains a issue for Ie6 and 7 Rate Topic: -----

#1 User is offline   sash_oo7 

  • Forum Newcomer
  • PipPipPipPip
  • Group: Members
  • Posts: 837
  • Joined: 15-August 10
  • Reputation: 45
  • Gender:Male
  • Location:Mars
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 29 December 2010 - 09:11 AM

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
0

#2 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,875
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 29 December 2010 - 11:08 AM

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>

0

#3 User is offline   Miami 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 34
  • Joined: 16-May 07
  • Reputation: 0
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Coder

Posted 29 December 2010 - 04:23 PM

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

#4 User is offline   sash_oo7 

  • Forum Newcomer
  • PipPipPipPip
  • Group: Members
  • Posts: 837
  • Joined: 15-August 10
  • Reputation: 45
  • Gender:Male
  • Location:Mars
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 29 December 2010 - 11:25 PM

View PostWickham, 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

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users