Inline Info Box popup

HTML & CSS
1

Hi,

I’m trying to get an information box popup when hovering over a text. Consider test case 1.

TEST CASE 1: Test Case 1 link

This is how the markup should be, but many things are not behaving as I thought it would. Firstly, the info box is not showing up when hovering over “more” text which is contained in .infobox class and the .info paragraph is where the info box is manipulated. The second problem is that the paragraph with class .infobox is not behaving as inline even though I have set display: inline; on .infobox class. Here if I use span instead of p for .infobox then it will behave as inline. I may need to use block elements within info box. After looking over the source, please head over to test case 2.

TEST CASE 2: Test Case 2 link

Here setting p tag as a whole to display: inline; makes the .infobox paragraph behave more or less like a span would, the “more” appears in the same line as the other text. However, the info box still doesn’t appear. After looking over the source, please head over to test case 3.

TEST CASE 3: Test Case 3 link

Okay… I gave up and changed p tag where .infobox was applied to span, now remember that the span has a p tag within it with class .info. Anyway, I get the result I want, the “more” appears inline without having to make the parent p tag inline and the info box does appear. Good! However, the markup is wrong, there is no way an inline element should contain blocks like ps or divs. How do I go about fixing this with test case 1’s markup?

I test run test case 3 on different browsers, and found there are browser inconsistencies there. So even if correct this, it may still have some problems as shown in attached image. Please take a look.

By the way, I could do info boxes on images and such without much problem, but doing it inside a block of text seems a bit different.

Thanks in advance. :slight_smile:

2

I’m not quite sure what we are aiming for here.

A picture is worth a thousand words, so please look over the image attached.

(Here it’s make do block of text, and not a single <p> containing everything from start to finish which is what I was trying to achieve in my original post.)

To get desired result, the following doesn’t make use of any floats and uses only display: inline as well as Paul’s suggestion of using inline-block.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case: Info Box</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #fff;
}
p {
    padding: 8px 4px;
}
h1 {
    padding: 20px 5px;
}
h2 {
    padding: 10px 5px;
}
#wrapper {
    padding-top: 2%;
}
.content {
    margin-left: 5px;
    border: 4px solid #006699;
    padding: 15px;
    width: 90%;
    background-color: #FFFFFF;
}
.content:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.infobox {
    padding: 0px;
    display:inline-block;
    position: relative;
}
* html .infobox {
    display:inline/* ie6*/
}
*+html .infobox {
    display:inline;/* ie7*/
}
.infobox .more {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
}
.info {
    top:-999em;
    left:0;
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:0 0 0 25px;
    z-index:999;
}
.infobox:hover {visibility:visible}
.infobox:hover .info {
    top:2.2em;
}
.run-in, .more, .infobox {
    display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Info Box Test Case 1</h1>
    <div class="content">
        <p class="run-in">The use of XHTML &amp; CSS has been doccumented throughout the internet.</p>
        <div class="infobox">
            <p class="more">More </p>
            <p class="info">This is a test description.</p>
        </div>
        <p class="run-in">information available </p>
        <div class="infobox">
            <p class="more">with some more here.</p>
            <div class="info">
                <p>This is the second test description. </p>
                <p>With 2 lines and a <a href="#">link</a>.</p>
                </p>
            </div>
        </div>
		<p class="run-in">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. Praesent placerat erat accumsan risus accumsan pharetra sollicitudin dolor lacinia. Sed sodales suscipit ipsum quis cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>
</body>
</html>

This brings about consistent behavior in all browsers except Opera. Moreover, Opera is not behaving now (because of inline-block?) as Paul pointed earlier:

Opera won’t do popups from inline elements properly and if you want opera support you would need to float all the pieces instead of making them inline.

Please refer to the attached image. So, here is the problem, if I float - the longer content doesn’t wrap properly into next line, but when using inline - Opera renders it differently and rendering problem Opera had before using floats is gone now. As it is, if you do one thing it causes problems and if you do another it also causes problems. I’m officially lost. :agree:

In achieving desired result test case, top spacing is not same in Opera as with other browsers.

Any ideas how I may go about from here? Maybe I should consider this not fully possible and move on… :slight_smile:

3

Hi,

I’m not quite sure what we are aiming for here :wink:

Do you mean that you don’t want the whole “p.more” text to wrap as a block.


<div class="infobox">
            <p class="more">with some more here.</p>

That would essentially mean going back to using inline elements and then it would trigger all the mis-positioning bugs in various browsers that we had earlier.

Your best choice would be to simply ensure that only one word is the target and therefore only one word will ever move to the next line when required.


<div class="infobox">
            <p class="more">here.</p>

I’m not sure if that’s what you were talking about though :slight_smile:

4

Since it’s outside the parts with the info box, I’d not float it. At least in modern browsers (IE might be different), floats seem to want to be as wide as possible and would rather drop to a new line to be wider than let text inside wrap first.

Actually, I’ve got boxes who must act like floats and I’d be really interested in knowing any technique to change this float behaviour: that is, encourage it to start wrapping and shrinking FIRST before doing the float drop thing (mine have min and max widths).

5

Hi,

Ok I see what you mean and perhaps the best way is to go back to the original method using inline elements to simplify it all. It also makes more semantic sense now that you want these tips in the middle of inline text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
span.tooltip {
    position:relative;
    display:inline-block;
    cursor:pointer;
}
span.tooltip em{    
    text-decoration:underline;
    font-style:normal;
    color:red;
}
span.tooltip b {
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:-999em 0 0 -15px;
    z-index:999;
    font-weight:normal;
    top:0;
}
span.tooltip:hover b {
    margin:1.5em 0 0 -15px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
span.tooltip:hover b {
    margin:1.1em 0 0 -5px;
    left:10px;
}
</style>
<![endif]-->

</head>
<body>
<p>The use of XHTML &amp; CSS has been documented throughout the internet <span class="tooltip"><em>here</em> <b>This is a test description.<br>
    with 2 lines and a <a href="#">link</a></b></span> and more information can be <span class="tooltip"><em>found here also</em> <b>This is a test description.<br>with 2 lines and a <a href="#">link</a></b></span>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. Praesent placerat erat accumsan risus accumsan pharetra sollicitudin dolor lacinia. Sed sodales suscipit ipsum quis cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</body>
</html>

That looks much the same to me in Firefox, Safari, opera and Ie8 with a little fix for ie7 (ie6 would need the hover js to work as before).

6

Hi, I need it to work on IE6 though, or did you mean about the hover part? If so then it’s okay. I’ll use a hover fix.

consider text: The use of XHTML & CSS has been documented throughout the internet. more. And further more…

suppose I have more text after “more” I’d have to apply inline to a new p tag yes? I was trying to avoid that by trying to nest p tags. p tags are block level, yes? then why can’t p tags be nested within p tags? does this mean it’s inappropriate to nest divs inside p tag too? OR is it it invalid because of it’s semantic meaning as “paragraph?”

Just when I thought I more or less understood XTML and css, new things keep coming my way. I was clearly under the impression block level elements can have block level elements.

7

Hi,

If you make an element display:in line it will only line up with the element before if that is display:inline also.

You can’t nest p elements either as that is invalid. Just use a div like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case: Info Box</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #fff;
}
p {
    padding: 8px 4px;
}
h1 {
    padding: 20px 5px;
}
h2 {
    padding: 10px 5px;
}
#wrapper {
    padding-top: 2&#37;;
}
.content {
    margin-left: 5px;
    border: 4px solid #006699;
    padding: 15px;
    width: 90%;
    background-color: #FFFFFF;
}
.infobox {
    padding: 0px;
    height: 100%;
    display:inline;
}
.infobox:hover {
    position: relative;
}
.infobox .more {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
    z-index: 1000;
}
.info {
    top:-999em;
    left:0;
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:0 0 0 25px;
}
.infobox:hover .info {
    top:0;
}
.run-in, .more, .infobox {
    display:inline
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Info Box Test Case 1</h1>
    <div class="content">
        <p class="run-in">The use of XHTML &amp; CSS has been doccumented throughout the internet.</p>
        <div class="infobox">
            <p class="more">more</p>
            <p class="info">This is a test description.</p>
        </div>
    </div>
</div>
</body>
</html>

Won’t work in IE6 though.

8

The fact that thinks look different in various browsers should be regarded as a feature and not a bug

Esp when considering available fonts, font sizes, and monitor sizes/resolutions. I use em’s to size boxes a lot, and this causes many differences in box placement cross-GUI due to font sizes and rendering etc.

9

Well, I thought about that and as the content is being inserted inside inline content then it is probably more sense for it to be held inside inline content anyway. Don’t forget that even if you use spans you can still style them as you wish and turn them into block elements. You will be able to make them look exactly as you want.

The position does vary a little between browsers but you have to learn to live with these things and it doesn’t matter that things don’t look the same between browsers as long as they look ok in each and work acceptably in each. 99.9% of people won’t compare browsers - only developers do that.

The fact that thinks look different in various browsers should be regarded as a feature and not a bug :slight_smile:

You can turn the inline version into a block version if you don’t mind the nn semantic way uyou have to do it. This is valid but not really semantic but does what you want.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.popup div.tooltip {
    position:relative;
    display:inline-block;
    cursor:pointer;
}
.tooltip em {
    text-decoration:underline;
    font-style:normal;
    color:red;
    margin-right:3px;
}
.tooltip p {
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:-999em 0 0 -15px;
    z-index:999;
    font-weight:normal;
    top:0;
}
.tooltip:hover p {
    margin:1.5em 0 0 0;
}
.popup div{display:inline}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.popup div.tooltip{display:inline}
.tooltip:hover p {
    left:0px;
}
</style>
<![endif]-->
</head>
<body>
<div class="popup">
    <div>The use of XHTML &amp; CSS has been documented throughout the internet
        <div class="tooltip"><em>here</em>
            <p>This is a test description.</p>
            <p> with 2 lines and a <a href="#">link</a></p>
        </div>
        and more information can be
        <div class="tooltip"><em>found here also </em>
            <p>This is a test description.</p>
            <p> with 2 lines and a <a href="#">link</a></p>
        </div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. Praesent placerat erat accumsan risus accumsan pharetra sollicitudin dolor lacinia. Sed sodales suscipit ipsum quis cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</body>
</html>

There are always going to be minor differences in whatever you do. :slight_smile:

10

Hi Paul,

The example using floats work great. I was thinking things over a bit, thats why I wasn’t able to get back to you sooner. Have to consider all the possible downsides after all.

Consider the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case: Info Box</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #fff;
}
p {
    padding: 8px 4px;
}
h1 {
    padding: 20px 5px;
}
h2 {
    padding: 10px 5px;
}
#wrapper {
    padding-top: 2%;
}
.content {
    margin-left: 5px;
    border: 4px solid #006699;
    padding: 15px;
    width: 90%;
    background-color: #FFFFFF;
}
.content:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.infobox {
    padding: 0px;
    float:left;
    position: relative;
}
.infobox .more {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
}
.info {
    top:-999em;
    left:0;
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:0 0 0 25px;
    z-index:999;
}
.infobox:hover {visibility:visible}
.infobox:hover .info {
    top:2.2em;
}
.run-in, .more, .infobox {
    float:left;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Info Box Test Case 1</h1>
    <div class="content">
        <p class="run-in">The use of XHTML &amp; CSS has been doccumented throughout the internet.</p>
        <div class="infobox">
            <p class="more">More </p>
            <p class="info">This is a test description.</p>
        </div>
        <p class="run-in">information available </p>
        <div class="infobox">
            <p class="more">with some more here.</p>
            <div class="info">
                <p>This is the second test description. </p>
                <p>With 2 lines and a <a href="#">link</a>.</p>
                </p>
            </div>
        </div>
		<p class="run-in">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed velit velit, vel auctor erat. Cras lobortis dictum lectus, dignissim luctus tellus consequat et. Nam sed urna erat, in mattis sapien. Praesent placerat erat accumsan risus accumsan pharetra sollicitudin dolor lacinia. Sed sodales suscipit ipsum quis cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>
</body>
</html>

I added an additional long run-in p tag. Here when the text wraps, the whole p tag goes to next line. Any way around it? I can’t seem to figure it out. Thanks. :slight_smile:

11

Hi,

Ie7 can be fixed by using inline-block instead of inline but has to be done exactly like this to work.

e.g.


.infobox {
    padding: 0px;
   [B] display:inline-block;[/B]
    position: relative;
}
[B]* html .infobox {
    display:inline/* ie6*/
}
*+html .infobox {
    display:inline;/* ie7*/
}[/B]

Opera won’t do popups from inline elements properly and if you want opera support you would need to float all the pieces instead of making them inline.

12

Here this is much the same within a pixel or two and works in opera also but uses floats as I mentioned above.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case: Info Box</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #fff;
}
p {
    padding: 8px 4px;
}
h1 {
    padding: 20px 5px;
}
h2 {
    padding: 10px 5px;
}
#wrapper {
    padding-top: 2&#37;;
}
.content {
    margin-left: 5px;
    border: 4px solid #006699;
    padding: 15px;
    width: 90%;
    background-color: #FFFFFF;
}
.content:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.infobox {
    padding: 0px;
    float:left;
    position: relative;
}
.infobox .more {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
}
.info {
    top:-999em;
    left:0;
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:0 0 0 25px;
    z-index:999;
}
.infobox:hover {visibility:visible}
.infobox:hover .info {
    top:2.2em;
}
.run-in, .more, .infobox {
    float:left;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Info Box Test Case 1</h1>
    <div class="content">
        <p class="run-in">The use of XHTML &amp; CSS has been doccumented throughout the internet.</p>
        <div class="infobox">
            <p class="more">More </p>
            <p class="info">This is a test description.</p>
        </div>
        <p class="run-in">information available </p>
        <div class="infobox">
            <p class="more">with some more here.</p>
            <div class="info">
                <p>This is the second test description. </p>
                <p>With 2 lines and a <a href="#">link</a>.</p>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
13

More or less same in different browsers, but still there are inconsistencies as the horizontal position varies. For example, in Firefox, its starts at the boded area “found here also” but in chrome and Safari it’s “be found here also” i.e. even before red/underlined text. And in IE, it’s here “f[B]ound here also[/B].” I guess I’ll tweak around and try to make it more consistent across browsers.

I was going to post screencaps, but decided against it, because with the current markup - I can’t use block elements within the info box. From my original post:

I may need to use block elements within info box.

I guess I’ll just have to not use blocks inside these info boxes. Thanks paul for all your help. I really appreciate it. I realize now that it may be close to impossible to make a cross-browser CSS info box with support for blocks within block of text. :slight_smile:

14

p tags are block level, yes? then why can’t p tags be nested within p tags? does this mean it’s inappropriate to nest divs inside p tag too? OR is it it invalid because of it’s semantic meaning as “paragraph?”

Because there are some blocks who aren’t allowed to hold other blocks (h1-h6, p); there are some blocks who MUST hold other blocks (blockquote, form); and many elements who can have whatever inside them except themselves (forms, anchors).

Yup, p’s can’t have divs or any other kind of block inside them.

<!ELEMENT P - O (%inline;)* – paragraph –>

Element’s tag name is P. Opening tag is required (-), closing tag is optional (O, though we still consider it correct form to close them, otherwise browsers close them in possibly unexpected-to-you places), and may contain any number of inline elements only (%inline;)* and is called a “paragraph”.

I think Paul’s code should work if you have a :hover fix for IE6.

If it’s going to be random text called “more” sitting around in p’s then I’d almost consider just having an anchor (works default for IE6) show an absolutely positioned block span child (or some inline child)… except Opera at least used to have issues with that. Dunno if it still does. Text also has to make sense if there’s no CSS. Or, it should.

15

I had hoped that perhaps they had fixed it because it was broken years ago when I wrote this section and mentioned Opera’s buggy behaviour.

Opera has always had trouble with re-flowing content right from the start. It never liked normal drop downs, sticky footers or hundred percent height. I guess there is something inherrent in its structure that causes these types of bugs.

16

Ah, so Opera still hasn’t fixed this… meanwhile they’ve added border-radius support :confused:

17

Hi,

Stomme has answered most of your questions above.:slight_smile:

Yes you would need a hover fix if doing popups on anything but anchors (just like the suckerfish dropdown which is essentially what you are doing here).

suppose I have more text after “more” I’d have to apply inline to a new p tag yes?

Yes.

As I mentioned above what you are doing is exactly the same as you would do for a dropdown menu and the techniques are the same. If you want a popup box to hold more than one link and loads of text then you would need block level elements to do it. If you only have a small amount of text and no extra links in the popup then you can do it all insde an anchor with inline elements but you can of course style them to look like block elements.

Here is your example with more test added.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case: Info Box</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: #fff;
}
p {
    padding: 8px 4px;
}
h1 {
    padding: 20px 5px;
}
h2 {
    padding: 10px 5px;
}
#wrapper {
    padding-top: 2&#37;;
}
.content {
    margin-left: 5px;
    border: 4px solid #006699;
    padding: 15px;
    width: 90%;
    background-color: #FFFFFF;
}
.infobox {
    padding: 0px;
    height: 100%;
    display:inline;
}
.infobox:hover {
    position: relative;
}
.infobox .more {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
    z-index: 1000;
}
.info {
    top:-999em;
    left:0;
    padding: 10px;
    border: 1px solid #999999;
    width: 235px;
    font-size: 12px;
    color: #000000;
    background-color: #CCCCCC;
    position: absolute;
    margin:0 0 0 25px;
}
.infobox:hover .info {
    top:1.5em;
}
.run-in, .more, .infobox {
    display:inline
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Info Box Test Case 1</h1>
    <div class="content">
        <p class="run-in">The use of XHTML &amp; CSS has been doccumented throughout the internet.</p>
        <div class="infobox">
            <p class="more">More </p>
            <p class="info">This is a test description.</p>
        </div>
        <p class="run-in">information available </p>
        <div class="infobox">
            <p class="more">with some more here.</p>
            <div class="info">
                <p>This is the second test description. </p>
                <p>With 2 lines and a <a href="#">link</a>.</p>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
18

That example works great, but a little bit of a problem when it comes to different browsers. It appears only Firefox, Chrome, Safari, and IE8 renders them properly. This could be a problem, say if it were to have a speech balloon tail of sorts.

Please look over the attached image. The first column has consistent behavior.

Thanks in advance.