Post by XFox Prower on Sept 19, 2006 22:30:14 GMT -5
I finally got the Beta Tails Sliding Puzzle layout working in both FireFox and IE. Both were distorted in different ways. In FireFox, it was an extra 16 pixels too wide and high. Then in IE, the nested <div> was smaller than the width given, making the pieces wrap to the next line at 3 per line instead of 4. When removing the DTD in IE, it made the images wrap at 5 images per line. The main <div> is 160px since the nested <div> is 128px with padding of 16px on all sides. That nested <div> is made up of 4 lines, each containing 4 32x32 square pieces.
Now I just learned that when specifying width, padding is not included in that amount. This means that the main <div> has to be set at a width and height of 128px instead of 160px and then the padding adjusts it. This page explains it well: www.quirksmode.org/css/box.html. The puzzle probably won't be a beta for much longer now
Now I just learned that when specifying width, padding is not included in that amount. This means that the main <div> has to be set at a width and height of 128px instead of 160px and then the padding adjusts it. This page explains it well: www.quirksmode.org/css/box.html. The puzzle probably won't be a beta for much longer now
