Experiencing an issue while rendering due to the presence of display: table-cell;

I am currently in the process of developing a website. The HTML Header section is structured as follows:

<div id="page">
    <header>
        <a href="#" class="redsquare">&nbsp;</a>
        <div class="head-wrapper">
            <!-- more content here -->
        </div>
        <div class="flags-container">
            <!-- more content here -->
        </div>
    </header>

The CSS styling for this particular HTML section is as follows:

#page {
    width: 100%;
    display: table;
    clear: both;
    margin-bottom: 30px;
}

header {
    width: 100%;
    height: 223px;
    background: #F0F0F0 url("../resources/header-background.png") repeat-x;
    margin: 0;
    padding: 0;
    display: table-row;
    clear: both;
}

header > a.redsquare {
    background-image: url("../resources/logo-figure.png");
    float: left;
    height: 223px;
    width: 240px;
    margin: 0px;
    padding: 0px;
    display: table-cell;
    vertical-align: top;
}

header > .head-wrapper {
    height: 223px;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: top;
}

header > .flags-container {
    width: 110px;
    height: 100px;
    padding: 20px 5px 20px 5px;
    margin-bottom: 83px;
    float: right;
    display: table-cell;
    vertical-align: top;
    clear: both;
}

Although all elements are correctly positioned, there is a small line visible between the redsquare and the head-wrapper, as well as between the head-wrapper and the flags-container (as depicted in the image below).

https://i.sstatic.net/0plXN.png

How can I prevent this unwanted line from appearing?

htmlcsstablecell

Answer №1

After reviewing the markup and css provided, I created a fiddle to demonstrate the solution. Since tables by default separate cells with borders, you can override this behavior by adding

border-collapse: collapse;

to your #page element.

https://i.sstatic.net/7NwJ5.png

I quickly tested this in both IE and Chrome, and the fiddle is available here.

However, I agree with other comments suggesting that using tables or imitating their design is not ideal. Instead of

display: table-cell;

try using 

display: inline-block;

This will achieve the same column effect but is considered a better practice than using tables for layout purposes. Tables are best avoided.

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 input field template

Is there a way to limit the HTML text box to only allow specific patterns such as: A1+A2*A3 It must consist of alphanumeric characters (A1 to A5) 2) It should be able to recognize and accept arithmetic operators in the specified format above. I am util ...

htmlangularjs

Implementing a function in ReactJS that is activated by multiple buttons

Apologies for the unclear title. My issue revolves around having three different button tags, each of which should send a unique argument to the function selectSupplier(). However, no matter which button is clicked, only the last value ("ultramar") is be ...

javascripthtmlnode.jsreactjs

Shrink or vanish: Creating a responsive header image with Bootstrap

Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content. I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the ima ...

jqueryhtmlcsstwitter-bootstrap

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

javascripthtmliframe

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

javascripthtml

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

javascripthtmlcss

What could be the reason that my for loop executes only when it is embedded within a while loop?

Hey there, I've been trying to understand why this code snippet works when the while loop is included: some = 0 n = 5 while some == 0: for title in itertools.islice(driver.find_elements_by_css_selector("a[class='link-title']"), ...

pythoncsspython-3.xselenium

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

javascriptjqueryhtmlcssfirefox

Unable to access content from a dictionary in Django templates

Currently, I am attempting to retrieve the value of the class method that returns a dictionary. The function is structured as follows: class GetData: def __init__(self, api_key, ip, interface): self.api_key = api_key self.asa_ip = ip ...

pythonhtmldjangotemplatesjinja2

Adjusting image dimensions dynamically using JavaScript based on screen size

My bootstrap setup seems to be causing issues when using the @media (min-height: 1000px) rule as the image class does not respond as expected. I am looking to implement a JavaScript solution that will automatically resize images once the screen height exc ...

javascriptjquerycss

I am attempting to integrate the file path of my images using PHP

Let me start off by showing you the file structure of my website. File Structure Of my website In order to organize my code, I created a header file named header.html.php which contains all the necessary elements for the header, including an image tag fo ...

phphtml

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. https://i.sstatic.net/2FQkD.png In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span ...

htmlcss

Inscribe latitude from marker onto input field

Currently, I am working on a feature where markers are added to Google Maps API v3 by clicking on the map. Each marker then displays its coordinates in an info window. However, I am facing an issue with picking up the latitude and longitude values and inse ...

javascriptjqueryhtmlformsgoogle-maps-api-3

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

htmlcssselenium

Exploring AngularJS: A Guide to Accessing Millisecond Time

Is there a way to add milliseconds in Time using AngularJS and its "Interval" option with 2 digits? Below is the code snippet, can someone guide me on how to achieve this? AngularJs Code var app = angular.module('myApp', []); app.controller(&ap ...

javascripthtmlcssangularjs

Angular Material - truncating selected text in a list

I'm having trouble implementing the Angular Material list with checkboxes, where the text needs to be truncated instead of word-wrapped due to limited UI space. I have modified an example on the Angular Material site to demonstrate the issue. The text ...

cssangularangular-material

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascripthtmlcssreactjs