Weird line-break in span - css

For some reason, the following HTML snippet wraps the % sign onto a new line (FireFox only):
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
<br />
</span>
</span>
And css:
.label {display: inline-block;}
Its a snippet, so it doesn't make much sense on its own, but I don't understand why this is happening, I think its valid HTML5. Can someone explain what the problem is with this snippet, because it works in Chrome and not in FireFx ?
DEMO

Adding white-space:nowrap; should fix it:
.label {
background-color: yellow;
display: inline-block;
white-space:nowrap;
}
jsFiddle example

Firefox renders this incorrectly.
Inline blocks should use the shrink-to-fit algorithm:
calculate the preferred width by formatting the content without
breaking lines other than where explicit line breaks occur,
calculate the preferred minimum width, e.g., by trying all possible
line breaks.
find the available width: in this case, this is the width of the
containing block minus the used values of 'margin-left',
'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right', and the widths of any relevant
scroll bars.
Then the shrink-to-fit width is:
min(max(preferred minimum width,available width), preferred width)
In this case:
preferred width is the width without any word wrapping.
preferred minimum width is the width of the widest element, in this case "1,22."
available width is the width of the document body, in this case 100%.
min(max(preferred minimum width,available width), preferred width) should therefore be equal to preferred width.
You can fix Firefox's behavior by changing your HTML or by using white-space:nowrap.
But I have another alternative: br is an inline element, but changing it to a block element fixes the problem.
Doing so shouldn't have an impact on any other br elements in your HTML (that I can think of).
Fiddle

What's happening is Firefox is interpreting your second span as being inline with the <br/> element. Try putting the <br/> element outside of the span wrapping the 2 spans like so:
<span class="label">
<input type="radio" />
<span>
<span>1,22</span>
<span>%</span>
</span>
<br />
</span>
http://jsfiddle.net/gc0sq29k/12/

Related

Input ignores CSS grid [duplicate]

In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.
Which attribute should I use to make the div's width match the input's size attribute?
code :
<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>
The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.
To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.
<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>
try width attribute in both i.e. in input and div also , plus try to give width in %
html:
<html>
<input id="myinput"></input>
<div id="myDiv"></div>
</html>
css :
#myDiv{
width:x%(set x per your requirement)
}
Use this style to set exact same width for both your input and your div
input#b, div#c {width:100px;}

Div Different Height Than Span

I have a issue with a div's height not matching the span's below it:
https://jsfiddle.net/daneren2005/f2bmfkxg/:
<div class="outerDiv" style="line-height: 1.33">
<div class="innerDiv" style="font-size: 68.57px; font-family: libre baskerville;">
<span>Large Text</span>
</div>
</div>
The innerDiv's height is 91 which is correct (68.56 x 1.33 = 91.19). The span's height is 86 though. I have no idea where the height came from. I have a HTML -> SVG converter that mostly works except for in some edge cases like this. I just need to understand where this discrepancy comes from so I can handle it in my calculations.
The issue is that the span element is an inline element. For these instances, change the span to and inline-block display:
span {
display:inline-block;
}
Here's some more reading:
css - inline elements ignoring line-height
Here's the updated fiddle:
https://jsfiddle.net/f2bmfkxg/1/
If you change your div's line-height to 1 you will see that it does not affect span's height.
It happens because inline elements like span take only required amount of space to render them.

Bootstrap btn-link vertical alignment slightly out

When placing a Bootstrap 3 button with class btn-link in a block of text, the vertical alignment seems to be out by a few pixels:
<div>Foo<button class="btn btn-link">Button</button>Bar</div>
Fiddle
How can I fix this? Removing the padding from the button improves the issue somewhat, but I'm still seeing a discrepancy of a few pixels.
The best way to fix this would be to wrap the text nodes with <span> elements and then modify the vertical-align property:
Updated Example
div span {
vertical-align: middle;
}
<div>
<span>Foo</span>
<button class="btn btn-link">Button</button>
<span>Bar</span>
</div>
If you don't want to (or can't) wrap all non-button items within <span>'s, a simpler approach may be to change the btn-link's vertical-alignment from middle to baseline.
.btn-link { vertical-align: baseline; }
Quoting from CSS-Tricks.com: "What is Vertical Align?"
The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don't line up with the lowest point of the descenders, that isn't the baseline.

hr makes the parent div resize to 100% in IE7

I have the following div
<body>
<span style="border:1px solid red; display:inline-block">
Some text<br />
<hr />
some more text
</span>
</body>
In "normal" web browsers, the width of the div is calculated to fit the text. And the hr is 100% of the div.
But in IE7 the hr causes the div to expand to 100% of the body.
Is there any clever css I need to add somewhere so it behaves correctly in IE7?
Please note, I can't set any fixed width.
In IE6/7, display:inline-block only works on elements that are inline by default (e.g., span). So if you try setting a div to display:inline-block, it won't work in IE6/7.
An inline element will size itself to the width of its content. An inline-block element will do the same by default, if it's not given an explicit width. If the hr is 100% (100% of its parent, which in turn is 100% of the child), then there's a circular definition for the hr width that may not work as expected (100% of what? 100% of itself).
To avoid a circular definition for the width that may not work as expected in some browsers (especially IE6/7), either the container of the hr (div, span, or whatever) should have a defined width (in px, %, or em) or the hr itself should have an explicit width (in px or em). Otherwise, the width is not defined in any identifiable way, and it's left up to the browser to decide what to do by default.
If you can't set any widths, that may rule out using an hr tag. And based on the tests I ran, the options don't look very good for CSS solutions either (without setting a width).
Edit:
I think the only way to do this without setting widths or relying on JavaScript or jQuery, is if it's acceptable to have a horizontal line after every line of text (including any long paragraphs that wrap around to the next line, if there are any). In that case you could add a bg image to the container that contains a horizontal line at increments equal to the line-height of the text, displayed at a vertical offset equal to the line-height so a line doesn't appear at the top of the first line of text.
HTML
<div class="main">
<p>This is the first line.<br/>
This is the second line.<br/>
This is a long line that will wrap around to the next line if the container is not very wide.
</p>
</div>
CSS
.main {
background: url(image.png) repeat-x left 15px;
}
p {
font-size: 12px;
line-height: 15px;
}
jsfiddle demo
The width property of the <hr> tag has been deprecated, so you're styling options are limited on the <hr> tag.
15.3 Rules: the HR element
Index of Attributes
A more modern approach is to use the border property of a <div> instead.
Image rendered by IE 7:
Image rendered by Chrome 19:
jsFiddle Demo
HTML
<body>
<div style="border:1px solid red; float:left;">
<p>
Some text
</p>
<p class="border-top">
some more text
</p>
</div>
</body>​​​
CSS
​.border-top{
border-top:#000 1px solid;
padding-top:1em;
}​
Note: IE 6 & 7 don't support display:inline-block, so you might need to use float:left instead. The article below compares the use of the aforementioned properties:
CSS display: inline-Block: Why It Rocks, And Why It Sucks
Found a method at a blog. The original one required modernizer.js. I've edited it.
HTML:
<div class="hrdemo"><hr /></div>
CSS:
.hrdemo hr {
display:none
}
However, if your div.hrdemo is inside some floated container; you may have to assign a fixed width for it (for IE7).

Aligning divs with different dimensions horizontally

I have a tag cloud with different font sizes.
<div>
<a style="font-size:15px;">tag1</a>
<a style="font-size:10px;">tag1</a>
</div>
And it looks like this:
alt text http://img69.imageshack.us/img69/5120/49274398.gif
Now I need to wrap each tag into its own div:
<style>
.cloud {float:left}
.tag {float:left}
</style>
<div class="cloud">
<div class="tag"><a style="font-size:15px;">tag1</a></div>
<div class="tag"><a style="font-size:10px;">tag1</a></div>
</div>
Which puts them all over the place. How to make them look like on the first picture?
alt text http://img26.imageshack.us/img26/7355/12644278.gif
UPDATE: Here is how it looks if I set fixed height for the .tag:
alt text http://img710.imageshack.us/img710/3385/59552565.gif
Replace
.tag {float:left}
by
.tag {display: inline}
Or was there some other reason why you were floating all the tags?
Perhaps increase the line-height or vertical padding of the smaller font-sizes. The reason it's happening is because the smaller ones are wrapping around the larger ones as designed in the specification, so by increasing the size of the area of the smaller elements, the wrapping should be prevented.
As an aside, is there any need to float the tags in the first place? Just putting them all in a row as normal in your first example would seem to have the same effect.

Resources