I am having a problem with how the <p> text-indent property is rendered when a page is printed with Internet Explorer's Active-X plugin. Here is the relevant CSS:
p {
font-family: Calibri;
font-size: 20pt;
line-height: 1.75em;
margin-bottom: 1.00em;
margin-top: 1.00em;
margin-left:1.0em;
margin-right:1.0em;
text-indent:1.5em;
}
Below you can see what is happening when the HTML page, using the above code, is printed:
The top of every new page has the text indentation applied! Is there an alternative method of having the first line of every <p>"paragraph tag" indented without using "text-indent" property? The solution must be browser independent.
What about using ::first-letter pseudo-element?
p:first-letter {
padding-left: 30px;
}
JsFiddle Demo
Browser Support
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 5.5+ All All
You could use pseudo elements to mimic the effect of text-indent
p:before
{
content: '\00A0 \00A0 \00A0 \00A0 \00A0 \00A0 \00A0';
dispay:inline-block;
}
FIDDLE
EDIT: (As per the questioner's comments below)
If the above CSS solution(s) don't work for you, then maybe instead of using css
you could just append a fixed number of non-breaking spaces after each paragraph element.
Like so <p> ...
FIDDLE
You could do this simply by copy/replace:
<p> -> <p> ...
Related
I want to add an em-space just after BR tag so as to achieve text-indent effect. But the following STYLE doesn't work on my Chrome.
Or, any other way to achieve text-indent effect after BR tag?
<style>
br::after {
content: " ";
}
</style>
<p>Note:<br>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>
I managed to do this to add an em space just after BR tag!
<style>
br {
content: '';
white-space: pre;
}
br::after {
content: "\A\2003";
}
</style>
Another problem is that I also want to keep 1em margin-bottom. The following style ALONE works well.
<style>
br {
content: '';
display: block;
margin-bottom: 1em;
}
</style>
BUT, if i mixed the two styles into the following, it doesn't work!!!
<style>
br {
content: '';
white-space: pre;
display: block;
margin-bottom: 1em;
}
br::after {
content: "\A\2003";
}
</style>
You really shouldn't be using a line break (br) tag to break up paragraphs, not in modern web design. See the HTML 5.2 spec for some examples.
Furthermore, there is a CSS property text-indent which also achieves the text indentation you are after.
Basically, use <p> as intended (eg to wrap a paragraph) and then apply text-indent to the p tags.
p {
text-indent: 1em;
}
p.unindented {
text-indent: inherit;
}
<p class="unindented">Note:</p>
<p>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>
<p>Here is another paragraph to show how this applies when you have more than one <p> of content. The text-indent property is supported by all major browsers. (That is, IE 3 and later. Not that IE is a major browser anymore....)</p>
<p>See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent</p>
text-indent is a very old property with wide support across all major browsers and a lot of older ones too. It was first introduced in IE 3, to give a sense of how old it is. See MDN for more information.
According to http://www.w3schools.com/cssref/sel_not.asp the "not" selector is supported in IE9
However the following doesn't work in ie9:
HTML:
<input type="checkbox"><span>I agree to the terms and conditions</span>
CSS:
input:not(:checked) + span
{
font-weight:bold;
text-decoration:underline;
color:red;
}
When you check the checkbox, the style is still applied. In other browsers (FF, Chrome) it works as expected.
Is it some sort of bug with IE9?
Thanks.
I don't know what the bug is exactly, but I have got a workaround for you.
With some experimenting I discovered that if you put this line
input:checked + p {}
above your CSS, your CSS works fine in IE. So I propose you just put that in and forget about it, unless you want to invest a lot of time in finding out what the extent of the bug is exactly.
input:checked + p {}
input:not(:checked) + span {
font-weight: bold;
text-decoration: underline;
color: red;
}
<input type="checkbox"><span>I agree to the terms and conditions</span>
To test, you can comment out the first line, and then it stops working in IE.
It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).
Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.
The question:
Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+
Is there a bug report for this somewhere? Or is it actually by the standards?
I'm aware this is a rather elderly thread, but having just been up against this problem in IE 11, and unable to find much help, I decided to experiment. Aided by a significantly improved dev tools than in the earlier versions I managed to figure it out - for what I'm working on at any rate. Chances are it'll work for others as well, although you might need to tweak. YMMV.
The HTML:
<li>Whatever</li>
The CSS (edited after #frnhr pointed out that the initial version I posted didn't actually work):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
The secret sauce is setting the height and the overflow: hidden; line; it means that the underline is still there but outside the viewport provided by pseudo element, and so never gets seen on screen. It also works across other browsers (tested on Chrome and Firefox as well). Depending on your existing styling you'll probably want to tweak the pixel value in the calc() value.
See http://jsbin.com/biwomewebo/1/edit?html,css,output
IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”
There does not seem to a bug a report on this at the IE Feedback Home.
In this case, a suitable workaround might be to use an image as the generated content:
a:before {
content: url(arrow.png);
}
where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in #EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.
If the background is white you may use the bottom border:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
Not sure what standards say, but IE behavior seems to be more logical. Think of :before as an element inside of <a> tag, not outside of it. Child's text-decoration property should have nothing to do with its parent's.
This workaround will work
http://jsfiddle.net/9N35f/4/
<span>a link</span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.
I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.
In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
JSFiddle Demo
This works for me:
html:
<span>a link</span>
css:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
In this the before tag is still part of the anchor.
I’ve created an element a h4 element which the :before pseudo element to insert an icon font (generated at IcoMoon). The h4 element is set to text-align: center; and the icons are set to display: block; so that they also center. Perfect!
The problem is in IE8. The h4 elements are centered but the icons inserted using :before are left-aligned. I’ve tried giving the before element a text-align: center property and I also tried applying:
display: block;
width: 80px;
margin: 0 auto;
Now I don’t know what to try next. Here is the code for the icons:
[class^="ico-fonts-"]:before,
[class*=" ico-fonts-"]:before {
font-family: #icoFont;
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
}
Any suggestions would be appreciated! :-)
So I found the answer to my own question and it’s this:
Internet Explorer 8 treats the content generated by the :before and :after as outside of the element.
However, all other browsers (except IE7) treat the content generated by the :before and :after pseudo-elements as part of the element.
So I simply had to write:
.ico-fonts:before {
text-align: center~"\9";
}
Have you tried adding zoom:1 yet? Fixes a lot of IE8 CSS quirks.
I am trying to change the underline color during a hover event using spans and it works in IE9 and Firefox 13.01 but it doesn't work in Chrome (it should underline in gold).
#menu li:hover span.underline {
text-decoration:underline;
color: #FAA301; }
<ul id="menu">
<li style="z-index: 7;"><span class="underline">link1</span></li>
</ul>
Here is js.fiddle: http://jsfiddle.net/wuUpL/7/ .
I originally got the idea from this post https://stackoverflow.com/a/1175402/1490248 but that one doesn't work in chrome either.
Note: I don't want to use borders to fix this, I am already using borders as a border
Can anyone help me out here? Is there some sort of chrome hack/exception I could use to fix this?
I know you said you didn't want to use borders here, but you have found something that doesn't work the same between the two browsers.
You can get this to work on Chrome by adding an inner span and using a border on it.
http://jsfiddle.net/wuUpL/10/
Sorry if it is not what you had in mind, but Gecko and WebKit are not agreeing on something here!
Maybe worth noting that generally setting different parent and child text colour to get differently coloured underline works even in Chrome. But there is some weird bug in link decoration inheritance in Chrome:
u {
text-decoration: underline;
color: red;
}
u:hover {
text-decoration: overline;
color: green;
}
u * {
text-decoration: none;
color: black;
}
u:hover * {
text-decoration: none;
color: gold;
}
<p>
<u>
Parent with decoration.
<span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span>
</u>
</p>
<p>
<p>
<u>
Parent with decoration.
Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.
</u>
</p>
What is strange is that both innermost elements have exactly same computed style in Chrome (according to the Dev Tools), so it seems there is nothing to do to fix that now.
In the future it will be possible to use single element and text-decoration-color CSS property.