Picture leading to the expansion of a table cell's height

I despise CSS more than anything.

My table header with multiple inline table cells was working flawlessly until I attempted to add an image to one of the cells, causing the div's height to inexplicably expand.

Here's an example of the blank table cells functioning perfectly.

And here's the demon that has plagued me all day.

.header {
    display: table;
    width: 100%;
    background: white;
    border-bottom: 2px solid #eeeff3;
    .burger-menu {
        width: 75px;
        margin-left: auto;
        margin-right: auto; 
        background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png");
        background-size: 30px 30px;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        cursor: pointer;
        text-indent: 0px;
    }
}

.outer {
    display: table;
    vertical-align: top;
    position: relative;
    height: 100%;
    width: 100%;
}

.outer-icon {
    display: table-cell;
    position: relative;
    height: 75px;
    width: 5%;
    overflow: hidden;
    border-right: 2px solid #eeeff3;
    img {
        height: 100%;
    }
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.search-bar {
    display: table-cell;
    vertical-align: top;
    width: 80%;
    input {
        height: 75px;
        border: 0;
        padding: 0;
        width: 100%;
        border-right: 2px solid #eeeff3;
    }
}

.inner {
    width: 75px;
    margin-left: auto;
    margin-right: auto; 
}

Can someone please rescue me from this nightmare?

htmlcss

Answer №1

Delete the height property from the .outer-icon class. It is not recommended to add height to a table cell. Instead, apply vertical-align: middle; to both the .search-bar and .outer-icon classes.

Answer №2

Perhaps this adjustment could enhance the situation, although I cannot guarantee it will resolve all issues. Modifying the display property on add-friend appears to have a positive impact:

.add-friend {
    background-image: url(https://placeimg.com/75/75/face);
    width: 75px;
    height: 75px;
    display: inherit; <- this modification
}

Check out the code snippet here

Answer №3

Avoid setting a fixed height for .outer-icon as it may not be necessary since the inner content should determine the height.

.outer-icon {
  height: 75px; // consider removing this line!!!
}

Instead, make the hamburger menu absolute within its relative parent div.

.burger-menu {
  position: absolute;
  left: 20px;
  top: 25px;
}

Thanks!

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

A guide to smoothly transition box-shadow with jQuery's addClass() function

UPDATED I have a div with the class .shadow-circle-lg: <div class="shadow-circle-lg"></div> To add a different border styling to the div, I am using another class called .circle-highlight: .circle-highlight{ box-shadow: 0 0 0 1px rgba(0,0, ...

jquerycss

"Troubleshooting PHP Safari's Issue with Converting PDFs

I've been working on using headers and Imagick to display PDFs as images. Everything seems to be working fine in browsers other than Safari, where the image is displayed with a black background. You can check out an example here, along with the code u ...

phpcsspdfsafariimagick

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

What is the best way to horizontally scroll to a selected item within a scrollable div using React?

I'm working on a project that involves creating a horizontal scrollable list. The goal is to have the list automatically scroll to the selected item, centering it in the view. While attempting to implement this feature using React, I've encounte ...

javascriptcssreactjs

In JavaScript, you can verify whether the content or blank space of an element was clicked

Is it possible to determine if the clicked part of an element is text or white space? https://i.sstatic.net/0pFgB.jpg My attempts so far have been unsuccessful: body.addEventListener('contextmenu', (e) => { e.preventDefault(); // Prevent ...

javascripthtmlcss

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

The width of the Div element is not determined by the parent CSS grid, leading to a lack of ellipsis

I am working on a grid layout where each column contains a div with text. My goal is to have the text show ellipsis when it overflows the column, even though the number of columns is random. I attempted to use the following CSS for the text-containing div ...

reactjscsscss-gridellipsis

Tips on retrieving the text content of an HTML element using its tag

Is there a way to retrieve the selected text along with its HTML tags using window.getSelection()? When using window.getSelection(), it only returns plain text such as HELLO. However, I need the text with the HTML tag included, like this <b>Hello< ...

javascripthtmljquery

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

javascriptphpjqueryhtmlckeditor

I successfully created a Chinese writing practice deck in Anki, which is functional on the desktop version but unfortunately not compatible with Ankidroid

While AnkiDesktop is functioning properly, there seems to be an issue with character encoding in Ankidroid. Despite trying numerous solutions, the problem persists. The character length displays correctly in Anki Desktop, but not in Ankidroid. For example ...

javascripthtmlcssanki

What is the best way to position this span on the right side of the div?

Here is some HTML code snippet: <div class="title"> <span>Cumulative performance</span> <span>20/02/2011</span> </div> This is the corresponding CSS: .title { display: block; border-top: 4px solid #a7a ...

htmlcss

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

There was an issue encountered when trying to load the Angular JS controller

<html> <body ng-app="testApp" ng-controller="testControl"> <ul> <li ng-repeat="x in devices"> {{x.brand}}<br />{{x.info}} </li> </ul> </body> </html> JS Fil ...

javascripthtmlangularjs

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

Is there a method to maintain highlighted text on a webpage even after a user has selected it and clicked elsewhere on the page?

Consider this scenario: a user uses their mouse to select the first line of a paragraph, and then later goes on to select another line lower down on the page. How can we ensure that both the previously selected text and the new selection remain highlighted ...

javascripthtmlcsstextselection

Trigger an event prior to the loading of a div

I have been working on a jQuery code that needs to run just before a specific div is displayed on the page. Take a look at the snippet below as an example of what I am trying to achieve: $(document).ready(function(){ $('.article').on('m ...

javascriptjqueryhtmlcssevents

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

htmlcssperformancecss-transitions

How to align text vertically in columns by utilizing the column-count CSS property?

Utilizing the CSS column-count property, I have divided text into four columns on an HTML page. The issue is that the first column always seems to be slightly lower than the other three columns. To illustrate the problem in a straightforward manner, chec ...

htmlcss

What is the process for indicating a specific spot on Google Maps?

Hello, I am a new programmer trying to indicate the location of my company. The map pointer is not showing up even though the location is correct. I have tried numerous solutions but none seem to be working. Any assistance would be gre ...

htmlgoogle-mapslocationpoint

Adjusting font sizes based on window dimensions

I am currently in the process of building a website that requires the inclusion of images along with corresponding headings and descriptions. When viewing the website in full screen, the heading displays on a single line. However, as the browser width decr ...

htmlcssruby-on-railstwitter-bootstrapweb