Question

[EDIT: The HTML is invalid and needs to be cleaned up after being spit out by a Markdown processor. Thanks Jukka K. Korpela!]

I have a p element nested inside of a span element, but when I use
display: inline; in my css on the p element, it seems to work only
intermittently.

Here’s the html:

<div class="item">
    <a name="3">
        <div class="image">
            <img src="http://benjamingolder.com/media/images/portfolio/denver-installation_1.jpg" alt="Biennial of the Americas" />
        </div>
    </a>
    <span class="name">Biennial of the Americas</span>
    <span class="description"><span class="punct"> | </span> <p>To present the Local Code project at the <a href="http://www.biennialoftheamericas.org/artistsnicholas-de-monchaux.html">Biennial of the Americas</a> in Denver<span class="punct">,</span> Colorado<span class="punct">,</span> we constructed 225 site models from recycled doors<span class="punct">,</span> furniture<span class="punct">,</span> laser<span class="punct">-</span>cut acrylic<span class="punct">,</span> fur coats<span class="punct">,</span> and steel<span class="punct">.</span></p>
    </span>
</div>

And here’s the css:

.name {
    font-style: italic;
}
.description, .projectdescription {
  width: 496px;
}
.description p {
  margin: 0;
  display: inline;
}

Here is the page where you can see it in action:

http://benjamingolder.com/portfolio/local-code/#3

When I inspect it in chrome, it says that the p element has the property
display: inline but it nevertheless displays it as block.

On this page, the same exact setup seems to work fine:

http://benjamingolder.com/portfolio/rec-center/

And if I navigate to the page that works, then back to the page that wasn’t
working, suddenly it is working, even though I haven’t edite the css or html at
all.

Again, it fails sometimes so it may actually work the first time you view it.
I’d really like to know if it is occurring for others and if they can spot
anything that might be causing this slight difference.

Answer 1

Markup that has p inside span is invalid by HTML rules, and this may have all kinds of effects. Fix the markup first.