471,086 Members | 1,199 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,086 software developers and data experts.

Container in text flow needs to have block elements

I'm taking a stab at making CSS sparklines - see
http://www.edwardtufte.com/bboard/q-...ic_id=1&topic=

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Sparklines</title>
<style type="text/css">
..dot {
border-bottom: 1px solid #777777;
float: left;
width: 3px;
}

#cont {
height: 12px;
width: 60px;
background-color: #dddddd;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ht = parseInt(Math.random()*10);
var cont = document.getElementById('cont');
for (var i=0; i<20; i++) {
ht += parseInt(Math.random()*3)-1;
ht = Math.abs(Math.min(ht, 9));
var d = document.createElement('div');
d.style.height = ht+'px';
d.className = 'dot';
d.appendChild(document.createTextNode(' '));
cont.appendChild(d);
}
};
</script>
</head>
<body><p>a sparkline is a graph
<span id="cont"></spanthat can be embedded within the text of a
paragraph</p>
</body>
</html>

What I want is the span to be flowed in with the text of the paragraph.
This works properly with IE; unfortunately, Firefox sees the nested,
floated divs (DHTML-generated code):

<p>a sparkline is a graph
<span id="cont">
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
</spanthat can be embedded within the text of a paragraph</p>

and makes everything containing it block-level. So the text will flow
around it (as with a floated image), but not incorporate it between two
specific words.

Does anyone know of a solution to accomplish this? Getting an
inline-level element to contain block-level elements? Or perhaps a way
to not use "float" and get the same effect? I prefer a CSS-only
solution where possible; the solutions you find on Google do something
similar but with 1px-wide gifs instead of DIVs.

Thanks,

David

Dec 1 '06 #1
3 3080

David Golightly wrote:
<span id="cont">
<div class="dot" style="height: 9px;"</div>
Your HTML is invalid here. There's never an excuse for that, you can
stick with valid HTML and change the CSS display property as needed.
Does anyone know of a solution to accomplish this? Getting an
inline-level element to contain block-level elements?
Use display: inline-block; This is what it's meant for, but as yet the
implementations haven't caught up with the CSS spec.

I like these sparklines, but the last attempts I made at using them did
it with embedded SVG instead. Worked beautifully, but I'd sacrificed
any thoughts of widespread browser support.

Dec 1 '06 #2
VK

David Golightly wrote:
What I want is the span to be flowed in with the text of the paragraph.
This works properly with IE; unfortunately, Firefox sees the nested,
floated divs (DHTML-generated code):

<p>a sparkline is a graph
<span id="cont">
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 9px;"</div>
<div class="dot" style="height: 8px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 7px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
<div class="dot" style="height: 6px;"</div>
</spanthat can be embedded within the text of a paragraph</p>

and makes everything containing it block-level. So the text will flow
around it (as with a floated image), but not incorporate it between two
specific words.
It is impossible to insert block elements (say DIV) into P: no one of
ever existed browsers will allow it. P block automatically closes up
before any other block element regardless of where the closing </pis.
This behavior is by specs.

As suggested you can use inline elements (say SPAN) and redefine
display to inline-block. Gecko doesn't have this display style but it
has -moz-inline-box instead. -moz-inline-box is still under development
(means use with care) but for simple things it is pretty stable. So it
could be:
SPAN.sparkline {
display: -moz-inline-box;
display: inline-block;
/* other styling */
}

Dec 1 '06 #3

Andy Dingley wrote:
David Golightly wrote:
<span id="cont">
<div class="dot" style="height: 9px;"</div>

Your HTML is invalid here. There's never an excuse for that, you can
stick with valid HTML and change the CSS display property as needed.
Does anyone know of a solution to accomplish this? Getting an
inline-level element to contain block-level elements?

Use display: inline-block; This is what it's meant for, but as yet the
implementations haven't caught up with the CSS spec.

I like these sparklines, but the last attempts I made at using them did
it with embedded SVG instead. Worked beautifully, but I'd sacrificed
any thoughts of widespread browser support.
Hm, well, thanks for the suggestions, but none of them actually solve
the problem. display: inline-block would be great but it actually does
nothing different from display: block in current browsers. I'd like to
avoid using a full-blown cross-browser inline graphics library
(SVG+VML) to do this, and any non-cross-browser solution is pretty much
out of the question. The capabilities of CSS to easily tailor the look
of the sparklines to the page is what I'm after.

Dec 1 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Gordon - Adelphia | last post: by
11 posts views Thread by Robert Bowen | last post: by
2 posts views Thread by zeyais | last post: by
3 posts views Thread by ianv2 | last post: by
18 posts views Thread by Hunk | last post: by
1 post views Thread by Miked | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.