Skip to main content

When Table Cells are Smaller than the Table

I ran into an issue at work the other day that was a bit strange. A portion of one of our forms is using tables for layout (Yeah, I know... it's older code), in all other browsers the fields lined up with the others on the page, but in IE9 there was some unexpected extra space throwing the layout all off.

I took a look, and noticed a few things:

  • The table had a fixed width of 690px
  • There were only two columns in the entire table, but the second cell had colspan='2'
  • Both table cells had a fixed width
  • The sum of the table cells widths (including padding and all) was less than the width of the entire table

So what does all of this mean?

Well, the main issue is that, since the total width of the cells is less than that of the table, the browser has to figure out what to do with the leftover space.

Let's see what happens (I'm leaving off the colspan and adding some extra elements for demonstration purposes).

cell 1 cell 2
cell 1 cell 2

So it looks like the browser is distributing that extra, unaccounted space across the cells. And if you look close enough, that space should be divided so that the original proportions are preserved. That makes a certain amount of sense. But that's now what we wanted, so how do we fix it?

Well, the people before me set colspan='2' on the second cells. In most browsers, this essentially assumes a non-existant column that can be any width, which absorbs the extra space. All, that is, except IE9 (and maybe higher?).

Here's the table using the colspan trick.

cell 1 cell 2
cell 1 cell 2

But like I mentioned earlier, we found this doesn't work in IE9 (at least). This colspan business seems a bit hacky to me anyway, so I'm not sure I like it to begin with. So what now?

Well, in our situation anyway, the solution was easy... Take the fixed width off of the second column. That allows the column to flow freely and fill in the remaining space. We could have also removed the width from the table, but there was less risk of breaking something somewhere else by changing the cell width.

With the width removed from the second cell, things work as you would expect. This is one reason I don't like using fixed sizes for child elements. I prefer using proportional measurements (where it makes sense, of course. Sometimes you need those fixed sizes).

cell 1 cell 2
cell 1 cell 2
Labels:

Comments

Post a Comment

Popular posts from this blog

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...
Post a Comment
Read more

Naming Booleans

Naming conventions are one of those little things that can become a big thing when you multiply the scale of the project and/or people involved. I was just looking through some code yesterday, and I saw a variable with a fairly typical boolean name that followed the format isObjectState This felt awkward to me, and I took a moment to consider why this is. In Logic, a boolean is a statement that is either true or false . However, this variable name is written as a yes or no question. It is an easy misconception to equate true with yes and false with no , but though they are similar, they are not exactly the same, and, especially as programmers, we should not treat them as such. When we expand our variables into full sentences, the awkwardness becomes more apparent. Especially when we insert them into control structures. Let’s rename our variable to: is this menu item active? So our control blocks will read: if is this menu item active?, then highlight it. while is this men...
Post a Comment
Read more

Get width and height of a remote image with VB .NET

The Problem I wanted to grab the width and height of an image that was on a remote server. I've done this with PHP, but never in .NET. The Solution I did a little digging and came across this code (slightly modified for my own purposes). Dim request As HttpWebRequest = DirectCast(WebRequest.Create(URL), HttpWebRequest) request.Method = "GET" request.Accept = "image/*" Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse) Dim s As Stream = response.GetResponseStream() Dim bmp As New Bitmap(s) Width = bmp.Width Height = bmp.Height
Post a Comment
Read more