IE displays div height differently compared to Firefox and Chrome

Having trouble adjusting the height of a div tag in different browsers? Need help fixing this issue? Check out the CSS code snippet below and visit the site here for more information.

#payment{
    width: 265px;
    border: 1px solid #cecece;
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    -moz-box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    box-shadow: 0 2px 7px rgba(50,50,50,0.46);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
    position: absolute;
    float: right;
    height: 230px;
    padding: 10px;
    left: 549px;
}
csshtmlxhtml

Answer №1

The issue at hand could be related to differences in padding interpretation between IE and Firefox. Specifically, Firefox includes the padding in its calculation of the total height/width of a div element, while IE does not include it. This discrepancy is commonly seen in older versions of IE (prior to IE9).

To address this problem in older versions of IE, you can implement the following solution:

<!--[if lt IE 9]>
#payment{
    width: 285px; /* original width + padding on left and right */
    height: 250px;/* original height + padding on top and bottom */
    padding: 10px;
}
<![endif]-->

Answer №2

It appears that your webpage is utilizing a Quirk mode doctype.

Please consider changing the 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

to

<!DOCTYPE>

or a more appropriate doctype than a quirk mode.

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

Instructions for passing a single value from a while loop and showing a different value in a text box through PHP

Can one value be displayed while sending another value in an Input text field simultaneously? I have a form that displays details in descending order, but when I update the details from another page, they are being updated in ascending order instead. Cod ...

phphtml

Distance Calculator for Geolocation WatchPosition

I am currently utilizing geolocation to track the user's current location and keep an eye on it using the watchPosition method. Is there a way to determine the distance between the starting position of the user and their current position? Here is the ...

javascripthtmlgeolocationdistance

Trouble with CSS styling in Asp.Net MVC dropdown list

I have encountered an issue while trying to apply a CSS class to an ASP.NET MVC dropdown list. The CSS class works fine for the EditorFor case, but not for the DropDownListFor case. I am wondering what could be missing from my code? Here is the working CS ...

cssasp.netasp.net-mvc

Personalized Owl Carousel - OWL.JS Hover Pause Feature

I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...

javascriptjqueryhtmlcssowl-carousel

What is the best way to implement a media query for changing styles on hover for an element

I am facing an issue with media queries where when I apply a hover effect to an element, such as a clickable link in the navigation bar, the new rules work as expected but also retain the default browser styles. For instance: nav ul li a:hover{ border:0; ...

htmlcss

The Mysteries of Key Codes in JavaScript

I'm curious about the character codes used for keyboards. Recently, I came across an informative article discussing this topic. In particular, I am interested in finding out which key code to use when a user presses both the alt and down arrow keys s ...

javascripthtml

What is the best way to line up changing column values with changing row values in an HTML table?

In its current state, the data appears as follows without alignment: https://i.sstatic.net/o5OLu.jpg The data columns are housed within a single variable due to the presence of multiple excel tabs with varying columns. Within the tr tag, rows are checked ...

htmlcssangularhtml-table

Prevent an interruption in the flow of content by keeping the line unbroken

Having an issue with a visible line break between the content of an HTML element and its :after content. The problem arises in a sortable table where a small arrow is displayed at the top. To view the problem, check out this fiddle http://jsfiddle.net/ceu ...

htmlcsscss-content

Choosing a key from Angular's controller

Here is the combo box I am working with: <select data-ng-model="data.selectedChannel" data-ng-options="salesChannel.value for salesChannel in salesChannels"> </select> In my controller, I have a function that calls a factory to retrieve a k ...

angularjshtmlangular-controller

How can I capture a screenshot of the div displaying pictures uploaded by the user on the frontend?

Take a look at this code snippet. It allows users to upload images, move them around, resize, and rotate them once uploaded. $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages() { ...

javascriptphpjquerycssjquery-plugins

Struggling with implementing ng-repeat in AngularJS for displaying HTML content

I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...

javascripthtmlangularjs

Positioning Bootstrap footer vertically in HTML

Having trouble with aligning the left text and custom styled button to the right and top of the checkout button, despite using various codes like float:right, margin-left, position relative/absolute. Shifting the button also didn't work, so now consid ...

htmlcssbootstrap-modal

Data structure designed specifically for a drawing tool application

Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...

javascriptalgorithmdata-structureshtmlcanvas

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

javascriptjqueryhtml

What is the purpose of calling Array.prototype.filter on the 'forms' array with the function(form)?

I'm struggling to grasp the inner workings of this code snippet. It appears to be a piece of form validation code taken from Bootstrap and pasted here. My confusion arises from this line var validation = Array.prototype.filter.call(forms, function(f ...

javascripthtmlbootstrap-4

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc

How come the form fields keep getting cleared when you go back?

I am currently experiencing an issue with two forms on my website. One form is for initial registration (for members) and the other is for outsiders posting. Both forms lead to a confirmation page with error checking in PHP. However, I have noticed that if ...

phphtmlforms

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

htmlcss

Incorporating and utilizing the HTML5-captured image as a point of reference

I understand that all I need to do to achieve this is insert <input type="file" id="photo" accept="image/*;capture=camera"> However, my lack of coding skills has caused issues with actually grabbing and using the image selected/taken by the user. ...

javascriptcsshtmlimage

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...

htmlcssbootstrap-5