display issue with inline blocks in Firefox and Internet Explorer

Issue: Difficulty with displaying inline-block in different browsers

<div class="cell"> 
    <div><img src="images/dftg.jpg" /></div> 
    <p>Sean val</p>
</div>

The challenge arises when inputting a longer name in the paragraph above, causing layout inconsistencies in firefox and ie. The cell div shifts upwards in these browsers, resulting in an erratic appearance.

.cell { 
    display: inline-block;
    display:-moz-inline-stack;
    border: 3px solid #ff0000;
    padding: 7px;
    height: 170px;
    zoom: 1;
    *display: inline;
    _height: 170px;

}

.cell p {
    padding: 10px 25px;
    width: 150px;
}

Answer №1

It seems like the issue you're facing is due to the absence of a specified vertical-align.

You can rectify this by incorporating the following code snippet:

.cell { 
    display: inline-block;
    vertical-align: top;
    border: 3px solid #ff0000;
    padding: 7px;
    height: 170px;
    zoom: 1;
    *display: inline;
    _height: 170px;
}

No need to concern yourself with display: -moz-inline-stack - it's only relevant for Firefox 2, which has exceedingly low usage.

The resource you may have consulted during your "research" could be this:

A revisit to the article might be beneficial, as it highlights the importance of utilizing vertical-align.

Answer №2

Always be sure to double-check the publication dates of the articles you are reading. Inline-block functionality has been supported since Firefox 3.

Yet another valuable feature, inline block, is finally available in Firefox 3 after being adopted by most other major browsers. When applied to an element, setting its display type to inline-block allows the element to be positioned inline (similar to a span), while still laying out its contents as if it were a block-level element.

In any case, it seems like you have successfully resolved the issue at hand.

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

Managing the reset functionality in Orbeon XForms when the escape character is triggered twice

I've noticed a peculiar issue with IE 5 - when the escape character is pressed twice, all form fields are automatically reset. This behavior does not occur in Mozilla. To address this, I've added a simple JavaScript alert that notifies the user w ...

Retrieving inline CSS value using jQuery

How do I retrieve the inline-css value of the second child within div #one using jQuery. <li id="one"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, velit!</h2> <div style="width: 1425px; height: 1080px ...

React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: container: { flex: 1, justifyContent: "cent ...

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

Adjust the size of an element in response to changes in the size of

I've implemented a jQuery function to resize an element dynamically based on window size changes: $(window).resize(function() { topHeight = $("#top").height(); height = $(window).height() - 210; $("#container").height(height); $("#g").height( ...

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

Sending a JavaScript variable through a jQuery and HTML form

My current issue involves a list of images within a div: <div id="holiday"> <ul> <li><img src="images/stationery/christmas.jpg" width="68" height="80" /></li> <li><img src="images/stationery/easter.jpg" wi ...

What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

I'm working on a text-only carousel using Bootstrap, but I'm facing an issue with the slider not functioning properly when I press the "next" and "prev" buttons. Any assistance would be greatly appreciated! <link rel="stylesheet" href="htt ...

What steps can I take to restrict access to my website and make it private?

I am looking to create a secure website that can only be accessed by admin users. The homepage will be located at example.com/homepage, but regular visitors won't be able to view it. Instead, they will automatically be redirected to example.com/login. ...

CSS-Only tooltip that adjusts size dynamically

Having trouble getting a tooltip to work exactly as desired? I need to implement tooltips for the contents of dynamically built HTML tables. It must be done with CSS only, without relying on JavaScript or events for performance reasons. The challenge is ha ...

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

Retrieve the offsetTop value of an accordion following its collapse

My goal is to determine the exact position of a clicked accordion title after it has been clicked. The issue I am facing is that the movement of Bootstrap's accordion collapse and my jQuery function are triggering almost simultaneously. As a result, ...

Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?

Currently, I am working on developing a mobile web app. Unfortunately, Safari in iOS 5.1 or earlier has limited memory capabilities. In order to reduce memory usage while using css3 transitions, I have discovered that utilizing the css styles "display:none ...

Guide on Modifying the color of a selected link tag

Here is the code snippet for a link tab: HTML <div class="sortLinks right"> <label>Sort by</label> <a onclick="javascript:SortOrder('DATE')" href="#">Date Modified</a> <span class="sort_sep">& ...

Reveal and conceal information with a customized web address

I have a PHP and MySQL blog that I want to display in a div using show and hide JavaScript functions. Everything works fine with other divs, but the issue arises when clicking on a vanity URL causing my webpage to refresh every time it's clicked. The ...

Adding an image overlay in an HTML email

I am currently working on an HTML template that includes both text and images. The goal is to position the image above the text in order to cover a certain part of the text (for a specific purpose). I have attempted using absolute positioning for the image ...

display a container and navigate to the specific link

Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...

There is no method called 'footable' within Object [object Object]

My plan was to make my tables responsive using the FooTable jQuery plugin, but I am struggling with integrating it into my website. Here is the CSS code I have: <link href="FooTable-2/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/> ...

Position image in the center with two lines of text that adjust gracefully based on screen size

I am struggling to position an image alongside two lines of centered text. Currently, the image appears to the left of the text in my example, but what I really want is for the image to be centered with respect to the text and have a perfectly aligned imag ...