Topic: Opera redrawing table width

In a work-in-progress application of mine, I'm using JavaScript to dynamically alter the number of rows and columns in a table. Firefox and IE are cooperating with my code, but Opera, while changing the number of cells correctly, has some quirks in the way it redraws the table's width when the columns are altered.

• When the number of columns is reduced, the table's width generally stays the same.
• Sometimes, added columns are wider than their content should seem to require.

See http://fourinarow.awardspace.info/play.html for an illustration of my problem. Change the "Board width" setting, press "Restart", and observe what happens.

The script is in this file: http://fourinarow.awardspace.info/computer.js

How can I modify my JavaScript or CSS to make Opera behave like other browsers?

(Edited by BuilderQ on 03-04-2007 00:24)

It seems to work fine if you size properly the TD and TH.
Right now you have:

td,th
{
	width:32px;
	height:32px;
	padding:1px;
	border:2px;
}
td img
{
	width:32px;
	height:32px;
}

Remember that the CSS Box Model defines the width/height including the margins, padding and borders. Therefore the available width/height of the TD/TH is 32-(2+1)*2 = 26px. By placing a 32x32 IMG in the TD you confuse the rendering engine. Ok it should be able to deal with that, and it actually does if you force a reflow. But setting the width/height of the image to 26px should do the trick. You should also specify the line-height of the TD/TH to 26px;


May I ask you which editor you use to write your JS, CSS, (X)HTML ? They look painful to maintain. Indenting will help you, and others, a lot.


JS-wise, I would avoid the use of innerHTML at all cost. Browser vendors have implemented it on their own so far. But there is no official specification for it. In the current case it'll be fine but it can lead to arbitrary script execution. To change or add text content, prefer the use of TEXT Nodes and manipulate their nodeValue.

Your Array.prototype.indexOf method should return -1 when obj is not found in the Array.

I wonder why you use an IMG in the TD. Just use an empty TEXT Node. And if you want nice looking X and O, use the TDs as CSS sprites.


Hope that helps,



(Edited by poi on 03-04-2007 15:25)

Thanks for your detailed answer. I'll try to consider all points of it.

quote:

---

poi said:
Remember that the CSS Box Model defines the width/height including the margins, padding and borders.

---

Now I'm quite confused. Isn't what you describe more like IE's box model bug?

quote:

---

May I ask you which editor you use to write your JS, CSS, (X)HTML ? They look painful to maintain. Indenting will help you, and others, a lot.

---

Notepad. Which would you suggest?

quote:

---

JS-wise, I would avoid the use of innerHTML at all cost. Browser vendors have implemented it on their own so far. But there is no official specification for it. In the current case it'll be fine but it can lead to arbitrary script execution. To change or add text content, prefer the use of TEXT Nodes and manipulate their nodeValue.

---

I'm not sure that your reasons are sufficient for me to avoid it "at all cost."

quote:

---

Your Array.prototype.indexOf method should return -1 when obj is not found in the Array.

---

Touché. That should teach me not to blindly copy code.

quote:

---

I wonder why you use an IMG in the TD. Just use an empty TEXT Node. And if you want nice looking X and O, use the TDs as CSS sprites.

---

I considered using background images in the TDs, but I figured that the pieces were semantic content, which I would not want to disappear if the user should turn off CSS.

The easy way to force a reflow is to: board.style.display='none' at the beginning of setGame(), and board.style.display='' at the end. On desktop you can't see the board disapear. At all. And from the layout of page I doubt you aim at mobile phones.


Sorry, I was confused on the box model issue.


WRT to the editor, I've been using UltraEdit for 7-8 years now. Although it's not dedicated to web work, it's not expensive, light, fast, very powerful, has macros, templates, hex edition, column mode, auto completion, syntax highlighting, functions/variable detection and auto completion, code folding, ...

The recently released Aptana got good press. Some people at work use it. I tried it a bit, certainly not long enough, but it didn't match the responsiveness and a few features I'm used to.


Using innerHTML becomes really dodgy when you deal with user, or third party, input. As I said, in the current case, there's no harm.


One more thing about Array.prototype.indexOf , depending on your needs you might want to use a strict equality operator ===


Good point on the semantic part. Although it doesn't back up the use of an IMG where a TEXT node would do just fine.

quote:

---

poi said:
The easy way to force a reflow is to: board.style.display='none' at the beginning of setGame(), and board.style.display='' at the end. On desktop you can't see the board disapear. At all. And from the layout of page I doubt you aim at mobile phones.

---

Excellent, thank you.