Forum Moderators: not2easy
<html>
<body>
test<div style="height:4px; width:40px; border: 1px solid gray; font-size:4px;" title="Similarity score of 30 out of 100">
<div style="height:4px; position:relative; width:30%; background-color: #ff0000;"></div>
</div>
</body>
</html>
Any and all help is appreciated.
Marshall
Just some out loud thoughts, I'm sorry haven't time to do any more for now..
What you *need* here is display: inline-block;, BUT Moz does not support that property so that's not going to help make it easier :(
Moz does have a proprietary extension properties - source [developer.mozilla.org].
display: -moz-inline-box; kind of does the same (note 'box' not 'block' - moz also has the block version but it doesn't work like W3C inline-block at all)
In test case I tried I got close (*I think*) though the vertical alignment is not perfect x-browser the possible biggest downside - it will not accept the percentage width on the inner element, it has to be set explicitly - I presume you may be generating this so I'm not sure if you could calculate the px value of the percentage via a script?
The problem is that if you need widths and heights on your meter elements, they then have to be block elements, you cannot specify widths/heights on inline elements so you can't simply make them inline - which would leave some kind of floated solution - are you saying floats are not good for your purpose, i.e. is there text before and after the meter?
so perhaps no help, anyway if you want to tinker here's what I got to so far, but no time to tinker further, sorry.
CSS:
.p {
background: #cfc;/* just to help visualise vertical alignment */
font-size: 14px;
line-height: 20px;
padding: 0;
margin: 0;
}.meter-outer, .meter-inner {
display: -moz-inline-box;
display: inline-block;
font-size: 1px;
height: 6px;
}.meter-outer {
vertical-align: middle;
width: 40px;
margin: 0 5px;
border: 1px solid gray;
}.meter-inner {
background: #ff0000;
width:30%;
width: 12px; /* moz method needs px .. */
}HTML:
<div class="p">some text
<span class="meter-outer" title="Similarity score of 30 out of 100">
<span class="meter-inner"></span>
</span>
then some more text</div>
edit.. left some redundant test code in!
[edited by: SuzyUK at 2:02 pm (utc) on July 23, 2007]
ref the code above, on having a rethink I realised you only need one inline-block, as an inline-block can contain block elements.
Moz has a stack [developer.mozilla.org] value (for display property), which if applied to a parent, means the parent remains inline and then stacks any *child* elements of on top of one another - so you can then safely make them display block which is OK because your inline-block wrapper can contain blocks too....
then because the children are blocks they can accept and pass on widths via percentages.. viola!
re the vertical-alignment, there may be another way but I haven't found it yet so.. the inline block is easy, just like any inline element simply set it to whatever you want top/middle/bottom or value.
This doesn't work quite the same with the stack, it vertically-aligns but it aligns its TOP with whatever your setting is, e.g. if the setting is baseline instead of the elements bottom being on the baseline of the text - the stacks top is in alignment with the bottom of the text.
However you can use top and/or left co-ordinates to position a child of a stack so you can adjust the top alignment negatively by the few pixels it needs to look similar - it doesn't affect anything else when you use top/left as you cannot normally use co-ordinates unless the element is positioned in the first place, so no other browser should react to this tweak..
FF3 is supposed to have support for inline-block so the way this is written should degrade nicely too, as in FF3 will use inline-block too as per the cascade.
that all said I think this is cool, and I've actually a notion this is the answer to inline blocks for "gallery style" layouts too.. but that will have to wait for another day
new code..
CSS:
.p {
background: #cfc;/* just to help visualise vertical alignment */
font-size: 14px;
line-height: 20px;
padding: 0;
margin: 0;
}
.meter {
display: -moz-stack; /* For Mozilla */
display: inline-block; /* FF3 should read this rule instead of ignoring it */
vertical-align: middle; /* ADJUST TO SUIT */
margin: 0 4px 0 0; /* 4px is the normal whitespace value, you may or may not needs this - it depends if you've text at both sides */
}.mo, .mi {
display: block; /* blocks so widths/heights can be set, also helps percentage width issue in Moz stack*/
font-size: 1px;
height: 6px;
}.mo {
top: -3px; /* used as part of moz stack rule above - determines the stacked child's start position - you can use it to adjust vertical-position */width: 40px;
border: 1px solid gray;
}.mi {
background: #ff0000;
width:30%;
}HTML:
<div class="p">some text
<span class="meter">
<span class="mo" title="Similarity score of 30 out of 100"><span class="mi"></span></span>
</span>
then some more text</div>
anyway enough playing for now.. back to the books!
