By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,247 Members | 1,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,247 IT Pros & Developers. It's quick & easy.

Container in text flow needs to have block elements

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a

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

P: n/a
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

P: n/a

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.