Reputation: 311
It doesn't appear in safari when I preview it, but it does in other browsers.
You can see the "portfolio" list items have about 2 pixels of white space under each one. Where is this coming from? I've got the padding and margins set to 0 and nowrap but can't figure out any other reason why.. any ideas?
* {
margin:0;
}
html, body {
height:100%;
}
body {
background-color:#fff;
}
#leftnav {
background-color:#232323;
width:20%;
min-height:100%;
height: auto !important;
float:left;
text-align:center;
padding:75px 0 0px 0px;
position:fixed;
left:0;
top:0;
}
#portfolio {
white-space: nowrap;
text-align:center;
margin:0;
width:80%;
float:right;
}
#portfolio ul {
margin:0;
padding:0;
}
#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
}
#portfolio img {
max-width:100%;
margin:0;
padding:0;
}
#maintop {
width:80%;
height:45%;
background-color:#caab7e;
float:right;
text-align:center;
}
<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
<li><img src="http://dummyimage.com/400x300/000/fff"></li>
<li><img src="http://dummyimage.com/400x300/090/fff"></li>
<li><img src="http://dummyimage.com/400x300/900/fff"></li>
<li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>
Upvotes: 3
Views: 130
Reputation: 43664
It is from the font size / line height. Either add:
#portfolio li {
font-size: 0;
}
or:
#portfolio li {
line-height: 0;
}
Resulting in this updated fiddle.
Upvotes: 3
Reputation: 313
Opera browser have not space too. I am checking it in firefox with firebug plugin and I can see height of img is 285px and height of li is 290px. Now when I add height 285px for li, space disappear.
#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}
Upvotes: 0
Reputation: 2597
I also don't know where that white space is coming from, but you can set li{ height: 87px; }
that will make the white space be gone.
Upvotes: 0