What are some different CSS options for setting the indentation of the first line of

I've encountered an issue with how the <p> text-indent property appears when a page is printed using 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;  
}

Upon printing the HTML page with the above code, the issue arises as displayed below:

The problem persists where the top of each new page showcases the text indentation. Is there an alternative approach to indenting the first line of every <p> element without relying on the "text-indent" property? The solution needs to be compatible across various browsers.

htmlcss

Answer №1

Have you considered using the ::first-letter pseudo-element?

p:first-letter {
    margin-left: 20px;
}

Check out this JsFiddle Demo

Supported Browsers

Chrome    Safari    Firefox    Opera    IE      Android    iOS
1+        2+       3+         6+     8+      All        All

Answer №2

To create the same effect as text-indent, consider using pseudo elements.

p:before
{
    content: '\00A0 \00A0 \00A0 \00A0 \00A0 \00A0 \00A0';
    dispay:inline-block;
}

Check out the demo here

UPDATE: (Based on feedback from the original poster)

If the provided CSS solutions do not suit your needs, you can try another approach by adding a specific number of non-breaking spaces after each paragraph.

For example, like this 

<p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ...

View alternative solution in action here

You can easily achieve this by copy/pasting and replacing:

 <p> -> <p>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The art of website creation: incorporating images into the background and using image tracing techniques

Trying to figure out where to find a solution for this. I had the idea of using a semi-transparent Photoshop design as a background and building on top of it, almost like tracing over it. This way, aligning things would be much easier. I remember Microsoft ...

htmlcssimagetrace

Uploading Images Dynamically with Ajax and jQuery in PHP

[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...

javascriptphpjqueryhtmlajax

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

Generate an image of a "button" with dynamic hover text

I am trying to create a clickable image with dynamically changing text overlaid on it. I have the PHP code that retrieves the necessary information for the text, but I am struggling to create the button as I am new to this type of task. Here is an example ...

phpjavascripthtmlcss

Can Wireframe be applied to a 3D gltf model within an HTML document?

I am currently working on achieving a specific design concept, which can be viewed at the following link: To guide me through this process, I have been following a tutorial available here: While I have successfully implemented the model and created mater ...

htmlthree.jsmodel3dgltf

Transform the page into a Matrix-inspired design

I decided to transform the appearance of my web pages into a stylish The Matrix theme on Google Chrome, specifically for improved readability in night mode. To achieve this goal, I embarked on the journey of developing a custom Google Chrome extension. The ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

What methods can be used to cloak JavaScript functions from the end user?

Looking to utilize jQuery AJAX calls? Here's an example: function addNewTeacher(){ $.ajax({ type: "POST", url: "/actions/dboss/newteacher.php", data: "uname=" + $("#newteacheruname").val() + "&upass=" + $("#new ...

javascripthtmlajaxfunction

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

htmlcss

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

htmlbootstrap-4

Looping through PHP to set the background color of a map

A basic code I have writes out a 'map' or grid. My goal is to define specific areas - for example, if the value for $i or $j equals 1, it should mark the edge of my 'map' by setting the cell's class to 'edge', which curre ...

phphtmldictionaryhtml-table

Please indicate the value of the JQuery class

How can I display the value of the selected button? All buttons have the class "nummer" and their values should appear on the display. Is there a better approach to achieve this? JQUERY $(document).ready(function() { $(".nummer").click(function() { ...

jqueryhtml

Creating a vertical scrolling marquee to showcase a list in React - step by step guide

Trying to create a marquee effect that displays a list of items in a vertical auto-scroll. After reaching the end of the list, I want it to loop back to the beginning seamlessly for continuous animation. The code snippet below shows my progress so far - a ...

htmlcssreactjsfrontendmarquee

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

Utilizing Bootstrap for Proper Alignment of "Link" and "Label"

Even though I have used "href" and a "label", the alignment is still off. Both elements are in the same line, but "My Text" appears slightly higher than "myImage". <div class="col-md-6 bottom"> <a href="~mydata"><img src="~/Images/myI ...

htmltwitter-bootstrap-3

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

htmlcsssasshaml

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

htmlrotationcss

adaptive menu bar with collapsible submenus

I would like to create a right side inline navigation bar with dropdown functionality. When the screen size is small, I want to hide all the menus and display a button. Clicking on the button should reveal a vertical navigation bar. I am facing an issue i ...

htmlcss

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

javascriptjqueryhtmlajax

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations