tring to flow text around an image:
HTML
<div>
<span id="photo"><img src="photo.png"</span>
<span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>
CSS
#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**
The text flows around the image, but it is not justified (alignment is left). If I float the text element left, then the alignment is correct (justified, as I want), but then the text does not flow around the image, rather it flows below the image - how can I fix this?
The text-align property actually belongs on the enclosing block element not the inline element. So move it to the enclosing block:
div { text-align: justify; }
See 16.2 Alignment: the 'text-align' property of the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:
This property describes how inline
content of a block is aligned. Values
have the following meanings:
(emphasis added)
You need to either take the image out of the span, or float the span left.
Related
With respect to vertical-align, W3C spec says:
The following values only have meaning with respect to a parent inline
element, or to the strut of a parent block container element.
What's the meaning of parent inline element here? Is it the first inline element inside a container? If yes, why is it called "parent"?
Best explained with an example, I think.
.bar {
vertical-align:-20px;
}
.baz, .qux {
vertical-align: text-top;
line-height:30px;
}
<div>foo
<span class="bar">bar
<span class="baz">baz</span>
</span>
<span class="qux">qux</span>
</div>
All the spans and text content are part of a single line box. The div establishes the inline formatting context, the line box and its strut.
The "foo" text sits on the baseline with respect to the strut's baseline.
The .bar span is offset with respect to the strut's baseline by 20px.
The .baz and .qux spans have the same styling, where the top of their upper half leading is aligned with the top of content area of their "parent". But you can see that they are not aligned with one another.
That's because the .qux span is aligned with respect to the strut, but the .baz is aligned with respect to its parent inline element, that is, the .bar span element.
Today I have had a problem with hiding text with text-indent: -9999px rule. I realized that it was caused by some parent element which has had text-align: right. Example on jsfiddle. Setting text-indent to positive value of 9999px did not work as well.
I have managed to hide text by setting it's text-align to the left, but I do not understand why such problem occurred.
Could someone explain why text-indenting does not work while text-align is set to the right?
Fiddle with ids:
http://jsfiddle.net/sNbfv/2/
It seems that maintaining the alignment is more important to the browser, so the right edge of the text is kept to the right side, no matter what.
The document is set to the ltr direction, so the indent is applied to the left of the line, but since you've said you want it to align to the right, the browser disregards the indent entirely. I have no explanation as to why this happens, other than early browsers setting a precedence of justification importance. There is nothing in the CSS spec as far as text-align explicitly ignoring text-indent.
The box is indented with respect to the left (or right, for
right-to-left layout) edge of the line box. User agents must render
this indentation as blank space.
http://www.w3.org/TR/CSS2/text.html#propdef-text-indent
If we update the fiddle to have an rtl direction, the indent indeed affects the right side of the text. I've added a border to show that the overflow is happening.
http://jsfiddle.net/sNbfv/3/
.rtl{direction:rtl;}
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
<div class="rtl">
<div class="parent">
<div class="indented">
Lorem ipsum ipsum!
</div>
</div>
<div class="indented">
Cupcake ipsum!
</div>
</div>
The simple solution seems to be aligning that nested indent to text-align:left.
http://jsfiddle.net/sNbfv/4/
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
.parent .indented{ text-align:left; }
<div class="parent">
<div class="indented">
Lorem ipsum ipsum!
</div>
</div>
<div class="indented">
Cupcake ipsum!
</div>
CSS 3 Specs:
“This property specifies the indentation of the first line of text in a block container. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. …”
“Note: Since the 'text-indent' property inherits, when specified on a block element, it will affect descendant inline-block elements.”
May be the last quote can explain magic display: inline-block; effect.
Also, accordingly to this answer to similar question. direction: rtl; force element to respect css spec: “box is indented with respect to the left (or right, for right-to-left layout”. I think text-align: right; works in similar way.
Just change text-indent:-9999px to text-indent:9999px when combined with text-align: right
So... I found something interesting on this.
If you have an element with text-align:right and you indent the text left (text-indent:-9999px) the text will show.
I guess aligning text one direction and indenting another is rather contradictory. However, changing the text-indent to a positive number (text-indent:9999px) the indent is respected.
On another note, another (more elegant?) solution is to not indent the text at all but to push it outside the element.
Fiddle: http://jsfiddle.net/robche/TNdbh/
white-space: nowrap property solved the issue in my anchor element.
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).
In my application I have tags that can be from 5 to 15 characters. By that reason the tags width differ, but the surrounding divs increases with the parents width, not the content.
What should I put in the CSS to make the divs width adapt to the width of it's content?
Thanks in advance!
HTML
<div class="tag">
<a href="#">
<span class="content">Test album</span>
</a>
X
</div>
CSS
div.tag {
background: red;
}
Test case: http://jsfiddle.net/T4XJ3/1/
The <div> element has display:block, so it will always take the full width of their container.
You can make them "flexible" by using display: inline-block (demo).
Is this what you're looking for?
inline-block to the rescue!
div.tag {
background: red;
display: inline-block;
}
From the w3c spec:
This value causes an element to generate an inline-level
block container. The inside of an inline-block is formatted as a
block box, and the element itself is formatted as an atomic
inline-level box.
In simpler terms this means that outside of your div it acts like a span would (sizes to fit contents, flows inline in content, etc.), and inside of your div it acts like a div normally would (for positioning, sizing, padding, etc.).
I have the following HTML chunk:
<span class='instruction_text'>
Line 1<br>
Line 2
</span>
And the CSS declaration of instruction_text is:
.instruction_text {
margin-left: 70px;
font-style: italic;
color: #555;
}
The first line has a 70px margin as expected, but the next line starts with no indent. How can I make ALL of the lines indented?
Use a block-level element. <div> is block-level by default, but adding the CSS display:block to your instruction_text class should send you in the right direction.
Using BR tags inside a SPAN element doesn't make a lot of sense as SPAN in an inline element which means it's meant to be used in the flow of a line of text or other inline elements.
You really should be using an element that is a "block" level element like DIV or P, e.g. one that is designed to contain multiple lines of text (or inline elements).
As you'll have noticed, you CAN use a BR tag inside a SPAN and it will cause a line break, however inline elements don't play well with margins/padding etc.