odd :first-line behavior
Posted: Fri Jan 29, 2010 2:17 pm
The :first-line selector is affecting another part of my layout that isn't remotely related. I'm working on a mock template to keep brushed up on CSS and try some of the newer CSS3 stuff out.
html:
CSS
Attached are images of the problem occuring. The address/phone info at the top html is as follows:
Everything works fine if I take the :first-line out (besides affecting the first line, obviously), so, I don't know why the CSS is affecting a completely unrelated class. I'm developing in the latest Opera, if that helps. I think I included all relevant code, let me know if there's something I missed.
html:
Code: Select all
<div class="info_module">
<div class="module inner_content">
<img src="tmp.jpg" width="110" height="110" alt="" rel="" title="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel enim diam. Etiam eget mauris mi, quis sollicitudin mauris.
Nam vel lacus nulla, at auctor metus. Quisque sed ornare felis. Nulla placerat quam id nisl eleifend sed fringilla mauris ullamcorper.
Morbi non justo nibh. Pellentesque quam lectus, tincidunt ut posuere et, hendrerit nec nunc. Pellentesque venenatis sagittis mauris
id venenatis. Proin metus nisi, aliquet in malesuada at, facilisis et massa. Quisque sem risus, luctus at ultricies a, adipiscing a magna.
Nulla rutrum orci sit amet mauris mattis at tempus arcu auctor.
</p>
</div>
</div>
Code: Select all
/* Layout */
.info_module {
display:table-cell;
}
.module.inner_content {
display:table-row;
}
.inner_content img, .inner_content p {
display:table-cell;
vertical-align:top;
padding:10px
}
/* Typog */
.module.inner_content p {
line-height:1.4em;
position:relative;
top:-10px;
}
.module.inner_content p:first-line {
color:#c50000;
font-size:1.1em;
}
Code: Select all
<div id="header">
<h1>The Red</h1><span>J</span>
<h2>Better Websites. Fast.</h2>
<div class="address">
<p rel="phone"><span>Tele</span> (408) 555.1212 <span>Fax</span> (408) 555.1242</p>
<p rel="address">The Red j Inc. 2234 E. 10th Street San Francisco, CA 94423</p>
</div>
</div>