I'm trying to position a label above inline sections containing a set of spans, but I'm finding that Chrome appears to be clipping the labels weirdly. Take a look at these two screenshots:
In Firefox:
In Chrome:
If you look at the screenshot from Chrome, you can see the labels are being clipped based on the start point of the next label. The desired result would be the same as the Firefox screenshot, where the labels go all the way up to the end of the line.
Here is the code used for these two examples:
.section {
position: relative;
border-right: solid 1px #000;
}
.section-title {
display: inline-block;
position: absolute;
top: -10px;
left: 5px;
right: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: sans-serif;
font-size: 0.8em;
}
.pieces {
font-family: monospace;
}
.pieces span {
display: inline-block;
padding: 10px 5px 0 5px;
}
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
Is this a known Chrome/WebKit bug? Is it possible to fix without drastically modifying the HTML?
It's not a bug in Chrome... it's a problem with the code, which Chrome interpreted in a way that it deemed logical.
Firstly, note that your .section-title is absolutely positioned and set with both left and right. This means:
It automatically becomes display:block.
It tries to be 5px from left, and 5px from right boundary of the parent.
Then, note that your parent .section is an inline element, since all span tags are inline by default. Therefore, it takes the width that it requires to accommodate its children. Your long line of 00 overflows to the next row, and hence the "right boundary" also overflows to the next row.
Being an obedient element, .section-title tries its best to stay 5px away from that right border, which is now very much nearer. Hence, the text-overflow: ellipsis correctly kicks in.
To fix your code:
Having display: inline-block for an absolutely positioned element is useless. It confuses. Take it out.
Don't set it to right:5px. Take it out. (this is the only fix that matters, actually).
Please do feedback to the author who wrote this HTML that the HTML vocabulary is more than just <span>. It's ridiculous to use only <span> for everything when more logical tags like <section>, <h1>-<h6> will fit the content better.
Related
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve ยท vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I want to do a songbook in HTML, something like
I wonder whether this can be easily achieved by some css trick on the <sup> tag (or similar)
<sup>F</sup>Yesterday <sup>Em7</sup> all my <sup>A7</sup> troubles seemed so <sup>Dm</sup>far away <sup>Dm/C</sup>
<sup>Bb</sup>now I <sup>C7</sup>need a place to <sup>F</sup>hide away <sup>C</sup>oh <sup>Dm</sup>I <sup>G7</sup>believe in <sup>Bb</sup>yes<sup>F</sup>terday
Now two questions:
Which adjustments should be added to the <sup> tag for this to work? At least it must be higher and must behave as if it occupied no space at all (for example, 'yesterday' should not be divided)
Is there a better trick than using the <sup> tag?
Thanks for all your comments
Rather than a sup, I'd suggest a span with a data-attribute in a pseudo-element.
The pseudo-element can then be positioned as you desire and provided a suitable line-height is used this all works out fairly dynamically.
Size everything in em and:
p {
line-height: 2em;
margin: 1em;
}
span {
position: relative;
}
span::after {
content: attr(data-note);
display: inline-block;
position: absolute;
top: -2em;
color: red;
font-size: .75em;
padding-right: 1em;
}
<p>
<span data-note="F"></span>Yesterday <span data-note="Em7"></span>all my <span data-note="Dm"></span>troubles seemed so <span data-note="A7"></span>far away
<br><span data-note="Bb"></span> <span data-note="Bb"></span>now I <span data-note="C7"></span>need to find a place to <span data-note="F"></span>hide away <span data-note="C"></span>oh <span data-note="Dm"></span>I beli<span data-note="G7"></span>eve in yes<span data-note="Bb"></span>terday
</p>
As the span's are empty screenreaders shouldn't have a problem with them (although I'm unsure as whether the content is read by screenreaders.
I need a little help here. I created a larger button on my order page and the bottom gets cut off to close. I need to add a little space on the bottom. I added a 1px border so you can see how it's laid out. You can view the problem here: https://www.evernote.com/shard/s329/sh/a408b2ff-472c-481a-8fb1-b9e48c1205e1/5ddd92e9d940c78a57487e07d6eedcd4
<p><span id="old-price">$199 </span>
<span id="new-price">$147</span>
<strong><font color="#FF0000">
35% off! "Halloween Special" </font></strong><em>Expires Nov 1st.</em>
<p class="cart-btns">
</p>
.products li p.cart-btns a.add-to-cart {
width: 120px;
height: 50px;
background: url(images/add-to-cart.gif) no-repeat;
}
a is an inline object and will not accept a height. Use margin: 5px or put padding:5px in the p.cart-btns {}
You can also just float:left the a.add-to-cart {} to make it ignore the boundaries in a way (takes out of the normal flow of the document).
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)
The code below can be viewed # http://jsbin.com/itole4/5
<html>
<head>
<style>
.field { position: relative; border: 2px solid black;}
.tag { position: absolute; left: 100%; top: -2px; background: black; color: white;}
.icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
</style>
</head>
<body>
<a>Some text <span class='icon'>X</span> </a>
<h2>
<span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
</h2>
<h2>
<span class='field'>Some Text</span>
</h2>
</body>
</html>
Actually, the icon is acting exactly the same. To test, try setting a's style to
display: inline-block; width: 50px;
When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").
So the short answer is: the icon is acting the same, but the block containing it is not.
In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)
because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body
I can't explain it better in English >.<, i hope you can understand
it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment