Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[HTML] [CSS] I have told css to display a label as "inline-block" but it insists on displaying it as a "block"

January 10 (8 years ago)
Chris D.
Pro
Sheet Author
API Scripter
Compendium Curator
I have a series of labels all of the general form of 
    <label class="sheet-small-label2 sheet-autoexpand">
        <input title="@{height}" type="text" name="attr_length" />
        <span name="attr_length" class="sheet-autoexpand"></span>
        <span>Length</span>
    </label>
the css for the label is 
.sheet-small-label2.sheet-autoexpand{
    display: inline-block;
    position: relative;
    width: auto;
    float: left;        /* Note: it is all wonky without this. Don't know why. */
    height:     2.75em;
    max-height: 2.75em;
    min-width: 4em;
    margin-right: 1em;
    white-space: nowrap;
}
The funny thing is, that it refuses to display as inline-block, it insists on displaying as "block" even though the top two css instructions tell it to display as inline-block!



Can anybody tell me what might be happening here and how I can correct it?
January 10 (8 years ago)
Natha
KS Backer
Sheet Author
API Scripter
Don't you miss a comma in your CSS between the two class name ?
January 10 (8 years ago)
Finderski
Pro
Sheet Author
Compendium Curator
You can also try prefacing it with label...
.charsheet label.sheet-small-label2...
January 11 (8 years ago)

Edited January 11 (8 years ago)
Lithl
Pro
Sheet Author
API Scripter

Natha said:

Don't you miss a comma in your CSS between the two class name ?
.class1.class2 means "an element with both class1 and class2"
.class1,.class2 means "an element with class1 or an element with class2"

As to the actual problem, float is overriding your inline display. Float implies block, see the table on computed display of floated elements on MDN. It makes sense if you think about it. How is it inline if you're moving it with float?
January 11 (8 years ago)
Chris D.
Pro
Sheet Author
API Scripter
Compendium Curator
Ah, thank you very much, that was indeed the reason it was block, and once I removed the float it did indeed become an inline-block. 
Like the comment says, everything ELSE about the css then becomes wonky, but hopefully this tip will give me enough to straighten all of that back out.
Thanks.
January 11 (8 years ago)
Natha
KS Backer
Sheet Author
API Scripter

Brian said:

Natha said:

Don't you miss a comma in your CSS between the two class name ?
.class1.class2 means "an element with both class1 and class2"
.class1,.class2 means "an element with class1 or an element with class2"

Oh, I didn't know about that !
Thanks.