I'm currently working with a Jade template that looks like this:
extends layout
block content
h2 Characters and Portraits
div(id="portraitsBox")
- var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
for filename in portraits
- var url = "/images/portraits/" + filename.toLowerCase() + ".png"
div(class="characterBox" id=filename)
h3(class="characterName")= filename
img(class="portrait" src= url)
link(rel='stylesheet', href='/stylesheets/characters.css')
The CSS it's using is as follows:
#portraitsBox {
border: 1px solid black;
padding: 10px;
}
.characterBox {
position: relative;
padding: 5px;
border: 1px solid black;
width: 350px;
display: inline;
}
.characterName {
padding-top: 0px;
width: 150px;
font: Arial;
text-align: center;
}
Everything seems to be fine without the display: inline property, but once I include it, it messes everything up. The result can be seen here:
And for some reason, the container div resizes itself to 169.9px wide! What could be causing this issue? I've checked for Bootstrap default stylings in Firebug, but there doesn't seem to be anything overriding my custom CSS (which is included in the extended layout file).