Remove extra cellspace from div with display: inline table?
This is so annoying. In Firefox and Opera, I'm getting padding between my nested divs, but not in Chrome and Safari.
I tried border-collapse:collapse
But no luck, any ideas? This extra space is screwing up my fluid footer (all div widths add up to 100%, but because Opera and Firefox add this space I never asked for (!) it overflows.
Here's my code:
Html:
<div id="footer">
<div class="info" id="message"> Coming Soon</div>
<div class="info" id="address">The Studio 22 Belsham Street London E9 6NG</div>
<div class="info" id="telephone">+44 (0) 778 079 6488</div>
<div class="info" id="enquiries">Enq开发者_StackOverflow中文版uiries</div>
<div class="info" id="mailingList">Mailing List ___________________ Submit </div>
</div>
CSS:
#footer {
z-index:3;
position:fixed;
bottom:0;
width:100%;
padding: 0;
padding-bottom: 10px;
display: table;
margin: 0;
border-collapse: collapse;
}
.info{
margin:0;
padding: 0;
display: inline-table;
border: red 1px dashed;
}
#message {
width:10%;
}
#address {
width:33%;
text-align:center;
}
#telephone {
width:20%;
text-align:center;
}
#enquiries {
width:5%;
text-align:center;
}
#mailingList {
width:29%;
text-align: right;
}
Answer: Changed inline-table property to table-cell.
Makes sense...
Hope this helps someone out there.
精彩评论