Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here

This is the HTML code for the table:

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 900px;">
<tr>
    <td colspan="3" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="3" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg" style="width: 100%;" />
    </td>
    <td colspan="1" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="3" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="2" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg" style="width: 100%;" />
    </td>
</tr>
<tr>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg" style="width: 100%;" />
    </td>
    <td colspan="2" rowspan="1" >
        <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg" style="width: 100%;" />
    </td>
</tr>

In my experience, this does not display correctly in IE even when setting the width and height of ALL cells in pixels.

You can see the intended layout by referring to this screenshot.

Minor spacing issues are currently insignificant. The background has been set to pink and a black border added for clarity.

Does anyone have suggestions on how to resolve the significant spacing and row/column spanning problems in IE?

cssinternet-explorerhtml-tableinternet-explorer-11

Answer №1

Consider organizing your design into a 9-column grid system, where the content can span 1, 2, or 3 columns. Utilize float properties to achieve this layout:

#grid {
  width: 900px;
  overflow: hidden;
}
#grid div {
  float: left;
}
#grid .col-3-9 {
  width: 33.33%;
}
#grid .col-2-9 {
  width: 22.22%;
}
#grid .col-1-2 {
  width: 50%;
}
#grid img {
  display: block;
  width: 100%;
}
<div id="grid">
  <div class="col-3-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg">
  </div>
  <div class="col-2-9">
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg">
    </div>
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg">
    </div>
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg">
  </div>
</div>

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

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

cssreactjsdraftjs

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

Exploring the issue of varying site header widths in WordPress: The mystery behind my unfinished author page

Why is there a difference in site header width between the author page and other pages? It seems incomplete on the author page while it's complete on other pages. What am I missing? <header id="site-header" role="banner&q ...

phphtmlcsswordpress

The height set to 100% is causing issues with the padding-bottom property

Currently, I have a setup that includes: A div with width set to 100% and height set to 100% An SVG element inside the div with default width and height of 100% My issue is that when applying padding to the div, the left, right, and top padding seem to w ...

css

Adjusting the height of a CSS div to be 0 while also modifying the

I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...

css

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

CSS: The addition selection operator is not functioning as expected

The span's background color is not changing correctly when the radio button is changed. Why is this happening and how can it be fixed? div { margin: 0 0 0.75em 0; } .formgroup input[type="radio"] { display: none; } input[type="radio"], label { ...

htmlcss

Acquire a set of picture cards for displaying in a grid layout

After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, ...

javascripthtmlcss

Arrange symbols in fontawesome into a pile

Is there a way to stack grid icons in the font awesome framework to create a 3x2 grid icon? Demonstration Jsfiddle <a href="./"><i class="fa fa-square"></i> 1x1</a> <a href="./" ><i class="fa fa-square"></i>< ...

jquerycssfont-awesome

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...

htmlcss

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

javascriptjqueryhtmlcssweb

Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this eff ...

jquerycss

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

Selenium's standalone server tailored for Microsoft's Internet Explorer

While running some selenium tests on Internet Explorer using the selenium server standalone, I encountered an issue where it opens an embedded Internet Explorer with two drawbacks: My sites render differently (everything looks fine in IE but not in the e ...

internet-explorertestingselenium

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

javascripthtmlcssreactjsstyled-components

The HTML attribute "hasbox" specifies the presence of a box within the element

I am currently working on resolving some rendering issues specifically in IE9 and have encountered a tag attribute that I am not familiar with - hasbox. Upon further investigation, it seems like IE is injecting this attribute at runtime as it does not app ...

javascripthtmlcss

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Here is the code I have written: body{ margin:0; padding:0; line-height: 1.5em; background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); background-repeat:no-repeat; background-attachment: ...

htmlcss

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position