The line-height is not inheriting correctly as expected

After extracting both the html and css from this specific page, I noticed a display issue when viewing the html in Firefox, particularly with the div containing c++ code snippets.

To troubleshoot, I copied and pasted the problematic code snippet div into jsfiddle, along with the entire css file which encompasses all the stylesheets linked within the html.

Upon inspecting the css attributes using the Firefox inspector tool after linking to the css file via 

<link rel="stylesheet" type="text/css" href="cpp.css">
:

  • The crayon-line divs exhibit a line-height: inherit !important

  • The parent div is the crayon-pre div

  • The crayon-pre div reveals a line-height: 15px !important

Why are the line heights behaving in this manner? How can this be resolved?

htmlcssinheritanceattributes

Answer №1

You attempted to duplicate the webpage incorrectly. Here is the correct working code :)

HTML:

<div id="DIV_1" class="crayon-syntax crayon-theme-familiar-learncppcom crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped" data-settings=" no-popup minimize scroll-mouseover wrap" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;">

    <div class="crayon-plain-wrap" id="DIV_2"></div>
    <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;" id="DIV_3">
        <table class="crayon-table" id="TABLE_4">
            <tbody id="TBODY_5">
                <tr class="crayon-row alt" id="TR_6">
                    <td class="crayon-nums " data-settings="show" id="TD_7">
                        <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;" id="DIV_8">
                            <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-1" style="height: 15px;" id="DIV_9">1</div>
                            <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-2" style="height: 15px;" id="DIV_10">2</div>
                            <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-3" style="height: 15px;" id="DIV_11">3</div>
                            <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-4" style="height: 15px;" id="DIV_12">4</div>
                            <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-5" style="height: 15px;" id="DIV_13">5</div>
                            <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-6" style="height: 15px;" id="DIV_14"></div>
                            <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-7" style="height: 15px;" id="DIV_15">7</div>
                        </div>
                    </td>
                    <td class="crayon-code" id="TD_16">
                        <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;" id="DIV_17">
                            <div class="crayon-line" id="DIV_18"><span class="crayon-p" id="SPAN_19">#include &lt;iostream&gt;</span></div>
                                (Code continues...)

Fiddle!

I hope this resolves any confusion.

Cheers,

P.S The CSS was too lengthy to include in this post.

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

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

htmlcss

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...

jquerycsshtmldrag-and-drop

Tips for splitting h4 and p elements

Having trouble separating some of my h4 and p tags, even after setting margins for them. Any suggestions on how to overcome this? <div class="row text1 offset-md-1"> <h4>Description</h4> &l ...

htmlcss

When using Angular, the onSelectionChange event is not triggered for angular mat-option components

I am working with a mat-form-field that includes both an input field and a mat-autocomplete feature with mat-options. The input field has a (blur) event triggered when it loses focus, while the mat-option has an (onSelectionChange) event triggered when an ...

htmlangularangular-material

Using Bootstrap 4 causes text to wrap buttons onto a separate line

I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-float ...

htmlcssbootstrap-4

Having trouble finding the element for an image of a body part using xpath

When using driver.findElement(By.xpath(".//*[@id='bodyPartContainer']/div[1]")).click(); to select a part of the human body image, I'm encountering the following exception in webdriver: org.openqa.selenium.NoSuchElementException: no such ...

jqueryhtmlcssseleniumxpath

Determine the length of the content within an HTML container that has

I am attempting to retrieve the length of the container's content in HTML dynamically. However, I am only receiving the object instead of the desired result. <script> $(document).ready(function (e) { var adsense_box_len = $(&apo ...

jqueryhtml

Guide for Sending a Textnode from One Page to a Different Page within a Specific Id Element through PHP

firstpage.html : <body> <?php $text = $_POST['text']; ?> <p style = "color:red; " id = "getext"><?php echo $text; ?></p> </body> secondpage.php : <body> <?php $text = $_POST['text']; ?> ...

javascriptphphtml

The search for 'post_sharing' with parameters ('',) did not yield any results. No matching patterns were found

Whenever I try to click on the option Share this Post in show_more.html, I encounter an error. show_more.html <p> <a href="{% url 'mains:post_share' post.id %}">Share This Post</a> </p> urls.py path('< ...

htmldjangodjango-viewsdjango-formsdjango-templates

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

htmlcssreactjs

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

javascripthtmlcss

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

phphtmlcssmenu

Attempting to iterate over a JSON object and display its contents using HTML

I have been attempting to iterate through this JSON data and display it in an accordion format similar to the one shown here: but unfortunately, my implementation is not functioning correctly. Here is what I currently have: HTML: <div class="a ...

javascriptjqueryhtmljson

Ensure that the element is positioned above other elements, yet below the clickable area

Currently, I am working on developing a notification system that will display a small box in the top right corner of the screen. However, I am facing an issue where the area underneath the notification is not clickable. Is there a way to make this part o ...

htmlcss

The first generation iPad, CSS3 transformations, and the constraints on image processing due to limited RAM

During my exploration of the original iPad on iOS 5.0.1, I stumbled upon some peculiar quirks that appear to be linked to the number of images being loaded into the browser simultaneously. I noticed certain things rendering at half resolution or even lowe ...

cssiosipadresolutionram

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS. Instead of using :hover, I utilize :focus ...

htmlcsshyperlinkfocustabindex

Use Bootstrap to center list items while keeping them aligned to the left edge

Using this particular Bootstrap modal on a website (simplified version with fewer list items): #manufacturer-modal .modal-body { padding: 0; } #manufacturer-modal .nav-item { list-style: none; } #manufacturer-modal .nav-link { font-size: 1.2em; ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

Ensure to verify the input's value by clicking the button

Upon clicking a button, I am trying to determine if there is any content in an input field. However, it seems that the check only happens once when the website first loads. Subsequent clicks of the button do not detect any new input values entered into the ...

javascriptjqueryhtml

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

htmlcss

Unlock the power of nested dynamic content creation with JavaScript

Every time I attempt to use getelementbyid on a dynamically loaded div, I receive null as the result. This occurs even after trying both window.onload = function () { and $(window).load(function() { index.html: <main > <div id="main-div"> ...

javascriptjqueryhtmldynamicgetelementbyid