Initial caps - :first-letter pseudo element not behaving as intended on Firefox

I created a dropcap using the :first-letter pseudo class and it displays properly on Chrome, IE, and Edge but is not working as expected in Firefox.

What seems to be the issue?

The problem lies in its height.

Below is the CSS code I've used:

.dropcap:first-letter {
    font-size: 3em;
    float: left;
    margin-top: .15em;
    padding: 2px 20px;
    border-radius: 6px;
    margin-right: 15px;
    padding: 3px 22px;
}

.dropcap.dc-bg-primary:first-letter {
    background-color: #1a73e9;
    color: #fff;
}
<p class="dropcap dc-bg-primary">[content here]</p>

You can view the codepen link here.

NOTE: My browser versions are Chrome 69.0.3497.100 (Official Build) (64-bit) and Firefox 62.0.3 (32-bit).

csspseudo-classdrop-cap

Answer №1

Directly Targeting Firefox

If you want to target Firefox directly and address the issue with specific styling, you can use the following code snippet:

@-moz-document url-prefix() {/*your styles here*/}

https://i.sstatic.net/yrI1e.jpg

.dropcap:first-letter {
    font-size: 3em;
    float: left;
    margin-top: .15em;
    padding: 2px 20px;
    border-radius: 6px;
    margin-right: 15px;
    padding: 3px 22px;
}
@-moz-document url-prefix() {
.dropcap:first-letter {
padding: 15px 20px;
}
}

.dropcap.dc-bg-primary:first-letter {
    background-color: #1a73e9;
    color: #fff;
}
<p class="dropcap dc-bg-primary">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,...
                                                    </p>

Answer №2

The reason for the different behavior is that Chrome applies the line-height value to the containing element (p in this case), while Firefox does not.

Both implementations are considered correct according to W3C specifications, as point 7.2.1 of the CSS selectors specification allows user agents to choose line-height, width, and height based on the shape of the letter for typographically correct drop caps or initial caps.

However, discussions in bug 290125 reveal that Firefox developers are planning to update their implementation to align with other browsers. In the meantime, it may be necessary to implement additional fixes such as resetting line-height for :first-letter and adding separate padding values specifically for Firefox. This can be achieved using a hack like the one found here to detect Firefox.

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 attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

javascriptcssreactjsdomfrontend

Utilize a variety of trigger buttons to open a single modal window

I have a large modal and instead of creating new buttons and modal windows, I would like to use multiple buttons that will all trigger the same modal. Here is an example of a modal taken from getbootstrap.com I have attempted to create multiple buttons ...

javascriptjquerycssrubytwitter-bootstrap-3

Overlap of Navigation and Logo Divs on Mobile Website

Trying to optimize my website for mobile at coveartschildcare.com, but the header divs keep overlapping and nothing I do seems to fix it. Here's the CSS code I'm currently using: @media only screen and (min-device-width: 320px) and (max-devi ...

htmlcssmobileoverlapping

How can I create a CSS grid with two groups of columns, each occupying 50% of the grid?

My goal is to create a CSS grid layout with 6 columns, but I want to divide them into 2 groups of 3 columns each. Each group should take up 50% of the width, and be left-aligned. For example: #parent { width: 100%; display: grid; grid-template-r ...

htmlcsscss-grid

At what point will the browser display changes made to css using jQuery?

When I run my JavaScript code in Firebug, it looks like this: tr=$(this).parent('tr'); tr.find('.img-delete').css('display','block'); However, I am unable to see the change reflected on the browser. Is there a wa ...

jquerycss

Applying CSS background styles to HTML elements for a visually cohesive grouping with rounded edges

Searching for a method to group HTML elements together with a background. The challenge lies in the rounded corners as shown in the image. Is there a way to successfully accomplish this task? ...

htmlbackground-colorcss

"Enhance user interactions: Zooming in on input fields in

Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus. While this may not seem like an issue initially, once focus moves away from the input bo ...

htmlcssios

After the animation has finished, the ".animated" class should be removed. If the element is reloaded, the class should be added back using plain

Within my CSS, there is a ".animated" class that is automatically applied to all elements with the "drawer-wrapper" class. The HTML structure looks like this: <div class="drawer-wrapper animated"> foo </div> I created a function that ...

javascriptcssanimationevent-listener

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

cssangularjsangular-material

The mouse scurries away once the div height has been adjusted

How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme? If anyone knows a solution, please check out my jsfiddle as it's not working as I intended. Here is ...

javascriptjquerycssheight

Vue is actively eliminating a background image through the use of the style attribute

There appears to be an issue where Vue is removing both the style attribute and the background image from this tag. <section style="background: url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:j ...

htmlcssvue.js

The image refuses to align to the left side below a floated paragraph

Hey there, I'm working on some CSS and I've run into an issue. I have two paragraphs and I want to place a picture below the paragraph on the left side. The left paragraph is longer than the one on the right, which seems to be causing the picture ...

htmlcss

The TypeError encountered is with the init function, as it is unable to access the property 'style' of a null

Regardless of how I attempt to write the code, I keep getting the same error message, and I've been working to resolve this issue since last night. However, I can't seem to understand why it's bothering me so much. The error message insists ...

javascripthtmlcss

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss

Shifting Objects within Bootstrap 5 Navigation Menu

Hey there! I'm having some trouble aligning the items in a Bootstrap 5 navigation bar to the side, just like in this screenshot: https://i.sstatic.net/nxh80.png I tried adjusting the alignment but nothing changed on the site (I was using Live Server ...

javascripthtmlcsstwitter-bootstrap

Issue with the Navigation in CSS and jQuery

I'm struggling to understand a problem with the desktop navigation on this website, specifically in Safari on certain pages. The issue seems to only occur on Safari for Windows, Mac Desktop, and Mac Laptop. Interestingly, the navigation works perfect ...

jqueryhtmlcsssafarinavigation

Creating a form that seamlessly integrates with the content using a combination

As I continue to explore the depths of WordPress and delve into learning HTML/CSS, my latest project involves embedding an email signup form on my website using Klaviyo. The basic code provided by their form creator initially had everything condensed into ...

htmlcssforms

Encase your image in a stylish frame using fancyBox 3

How can I enhance the appearance of image-slides in fancyBox 3? So far, I have experimented with the following code: <style> .fancybox-placeholder { padding: 40px; background: #fff; } .fancybox-image { position: static; } < ...

cssfancyboxfancybox-3

The partnership between Selenium and WhitePages has created an innovative solution

I am currently attempting to register on . The registration process requires entering my first name, last name, email address, and password. For the first name field, I attempted to locate the element by CSS using the syntax "input#name_fname", however, I ...

cssseleniumselenium-webdriver

Is it best practice to display a DIV once it is no longer visible after scrolling down?

Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling. I have figured out how to keep it visible at ...

javascriptcss