Tutorial :LI element in Internet Explorer 8



Question:

for some reason my LI elements are not floated to the left in internet explorer, they are showed each below the other. Anybody knows how I could fix this?

#books ul{      list-style:none;      margin:0px;      float:left;      display:inline;  }  #books ul li{      float:left;      margin-right: 20px;      padding-bottom: 20px;      height:300px;      display:inline;  }  


Solution:1

If I understand your issue correctly, it may have to do with setting display: inline. Changing to display:block; seems to solve the issue in IE and FF.

#books ul{  list-style:none;  margin:0px;  float:left;  display:block;}  

#books ul li{ float:left; margin-right: 20px; padding-bottom: 20px; height:300px; display:block;}


Solution:2

There is no need to use float, if you just want each LI to be inline you can use just the display property.

#books ul{      width: 100%;      list-style: none;      margin: 0px;  }  #books ul li{      margin-right: 20px;      padding-bottom: 20px;      height: 300px;      display: inline-block;  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »