The <h> tag gains height on its own accord

Here is my original code:

<h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> </a></h4>

The CSS for orange2 is:

.orange2{font-family: 'Open Sans', sans-serif;font-weight:600;font-size:13px;color:#ef9950;margin:10px;}

When I inspected the code in Chrome on H4 element, it appeared as:

<h4 class="orange2" style="height: 227px;"><a href="http://allvideolectures.com/v/o2355Um7qD/Martial-Arts-Weapons-Training-Kama-Techniques-in-Martial-Arts">Martial Arts Weapons Training : Kama Techniques in Martial Arts </a></h4>

And in Mozilla, it showed as:

<h4 class="orange2" style="height: 286px;"><a href="http://allvideolectures.com/v/o2355Um7qD/Martial-Arts-Weapons-Training-History-of-the-Kama-in-the-Martial-Arts">Martial Arts Weapons Training : History of the Kama in the Martial Arts </a>

I'm unsure why this height is being added automatically. This seems to be causing issues specifically in Mozilla. You can view the problematic link here. When you try to hover over any image, the problem becomes apparent.

javascriptcsshtmltwitter-bootstrap

Answer №1

Based on the information provided in the hyperlink you included, there is a JavaScript code responsible for dynamically adjusting the height of elements with the class h4.orange2:

let maxH = 0;
$("h4.orange2").each(function(){
   if ($(this).height() > maxH) { maxH = $(this).height(); }
});
$("h4.orange2").height(maxH);

This appears to be the underlying cause of the issues you are experiencing.

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

Styling containers with Pandoc

Currently, I am utilizing Pandoc for the purpose of transforming Pandoc Markdown documents into HTML5 documents. Within my md input, I incorporate custom divs by employing a special Pandoc syntax, like so: ::: Resources A nice document Informative website ...

htmlmarkdownpandoc

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

What is the best way to send a form using ajax?

I am having trouble submitting forms without a post back using AJAX. My code is not working as expected. What could be the issue in my script? I am new to AJAX and would appreciate some help with AJAX scripts. Below you can find my code: Please note: I ...

javascriptajaxasp.net-mvc

Tips for sending multiple variables to PHP using jQuery

Hello everyone, I could really use some assistance with a jQuery and AJAX issue I'm facing. I admit that I am not very well-versed in these technologies, so it's likely that I am missing something simple here. My problem lies in trying to pass mo ...

javascriptphpjquerymysqlajax

I utilized the explode function in PHP to transform a string into an array. Now, I require assistance with manipulating

Currently, I am facing a challenge where I have converted a string into an array in PHP using explode. I need to pass this array to a separate JavaScript page and then access the data values from within. Below is the structure of the array in JavaScript o ...

phpjavascriptajaxarrays

Discovering the oldest date in an array with JavaScript

Is there a way to identify the earliest date, also known as the minimum date, within an array using JavaScript? For instance: ["10-Jan-2013", "12-Dec-2013", "1-Sep-2013", "15-Sep-2013"] The desired output would be: ...

javascript

The variables $invalid and $valid in my AngularJS form have not been assigned any values

I came across a post on StackOverflow discussing the issue of both "myForm.$valid" and "myForm.$invalid" being undefined on an Angular form. However, my problem is slightly different. I have defined a form like this: <form name="EntityForm" role="form ...

javascriptangularjs

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

javascripthtmljquerycssweb

How to display two elements side by side within a div using React

I have an array that looks like this: const arr = [1,2,3,4,5,6,7,8,9,10] I am looking to display the elements in pairs per line within two-dimensional divs. Here is what I have in mind: This represents the main React element: render() { return <di ...

javascriptreactjstypescript

The image source is not functioning properly to display the image, even though it is working perfectly on

I'm currently attempting to retrieve an image from Instagram. Everything seems to be in order with the image link on Instagram. However, when I try to use it within an img tag, it fails to fetch. One thing worth noting is that this particular image d ...

htmlcssimagesrc

"Use jQuery to select all the cells in a row except for the

I found a visually appealing table layout that looks like this : https://i.stack.imgur.com/oRxYP.png What caught my attention is how clicking on a row selects the entire row. Take the example in the image above, where the second row is highlighted upon s ...

javascriptjqueryhtmlajax

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

javascriptjquerytwitter-bootstrappopover

Several buttons, each requiring to show distinct text

Currently, I am attempting to enhance an existing project that was graciously created for me. I must admit, I am quite new to this, so please be patient with me! In my project, there are 9 buttons, each triggering the display of a different image upon bei ...

javascriptjquerycssonclickreactjs

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Currently studying the Material UI documentation, I came across this statement: It is noted in the example above that we used: import RaisedButton from 'material-ui/RaisedButton'; instead of import {RaisedButton} from 'material-ui&apo ...

javascriptreactjstypescriptecmascript-6material-ui

React not properly updating state variable with setState

I am facing an issue while attempting to assign the response data from an API call to a state variable. There is an array called 'divisions' in the 'responseJson' object that I am trying to set to the 'divisions' array in the ...

javascriptreactjs

Switching CodeIgniter's controller to the primary controller within a designated div

<li><a href="maine/home#services">SERVICES</a></li> <li><a href="maine/home#about">ABOUT</a></li> <li><a href="maine/home#contact">CONTACT</a></li> I'm currently using CodeIgnite ...

phphtmlcodeignitercodeigniter-3

Steps to create a personalized material-ui element

I am looking to create a custom time duration component by modifying the TextField component. https://i.stack.imgur.com/fLsFs.png https://i.stack.imgur.com/SdpdH.png If anyone has any advice or assistance, it would be greatly appreciated. Thank you! ...

javascriptreactjsmaterial-uimaterial-design

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

jqueryhtmlcssscroll

Tips for emphasizing matches within a string using JSX

I've implemented a custom autocomplete feature that suggests options based on user input. I want to highlight the characters in the suggestions list that match the input value. For example, if the suggestion list includes "alligator", "lima", and "li ...

javascriptreactjs

What is the best way to display a description overlay on an adjacent image when hovering over it?

Seeking assistance or guidance in the right direction. I have a desire to showcase a grid of images with hover-over functionality for additional information, similar to what can be seen here. Could someone advise if this task is manageable with pure CSS ...

jquerycsshover