odd :first-line behavior

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Phix
Forum Newbie
Posts: 21
Joined: Tue Jan 12, 2010 11:50 pm

odd :first-line behavior

Post by Phix »

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:

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>
 
CSS

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;
}
 
 
Attached are images of the problem occuring. The address/phone info at the top html is as follows:

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>
 
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.
Attachments
cssbad2.jpg
cssbad2.jpg (37.01 KiB) Viewed 1149 times
cssbad.jpg
cssbad.jpg (33.4 KiB) Viewed 1149 times
Phix
Forum Newbie
Posts: 21
Joined: Tue Jan 12, 2010 11:50 pm

Re: odd :first-line behavior

Post by Phix »

Turns out it worked better after adjusting some position:relative behaviors on some of the divs which also fixed some other layout issues I was having. I can't seem to find/remember why that's the case. Can someone shed some light on why adding that line changes behaviors on div elements? Or when that line is necessary? Not necessarily in this case but generally speaking.
Post Reply