Tuesday, 15 December 2009

Not a lot

This morning I was doing some work on my photo website, trying to do something simple - make a div move up and to the right slightly of another div when the viewport is large, and make it move underneath the other div when the viewport is small. e.g.
<div id="left"></div><div id="right"></div>


In FF this is very easy to do with js, to move the right div up you give the left div absolute positioning, then to move the right div to the right (so it doesn't overlap the left div), give it a margin or padding equal to the left div width.

Then to make the right div move below the left div when the viewport is small, you just change the above properties back to 'auto'.

But in IE6 the left div just disappears when absolutely positioned. And even if you can get it to appear, it appears inside the right div, rather than where it should be. Weird. IE7 isn't quite as broken, but still broken.

So I had to make the script do one thing for IE6 & 7, and a different thing for all other browsers.

Next I found that in Safari, if you moved the right div down, then moved it up again, it would stay the same size as it was when it was down the page (i.e. 100% of the page width). While the right div didn't have 100% width set, it had lots of content, so it would automatically expand to the page width. But when the right div was then moved up again, it would stay the same size, rather than wrapping its content to fit into the space available (as it does normally). This of course resulted in the content going off the right hand side of the page and creating a horizontal scrollbar.

So I had to manually get the right div to wrap its content based on the space available.

There was also a third problem - in K-Meleon and Opera when the left div was given absolute positioning it would move upwards also, overlapping the div above it. The fix for this was to get the offsetTop of the left div before changing its position to absolute, and then getting the offsetTop again when the position had been set to absolute.

Then I could set a top margin equal to the difference between the 2 values, thus pushing the left div back down to where it should be.

Looking at the temperature on the front of my PC case, it seemed that it was actually running hotter today (after removing all the excess thermal compound and cleaning all the dust out from the fans yesterday). So I guess my scheme didn't work too well. Of course, the case temperature sensor being hotter doesn't mean for sure that the CPU is actually running hotter, but it probably is.

In the afternoon I went to bed for a couple of hours as I had a bad headache.

After dinner I watched an episode of Uylesses with L. I did some more website stuff, then watched Moccle complete Paper Mario.

The weather was overcast all day.

Food
Breakfast: Bowl of Choco Moons Cereal; 2x Paracetamol; Cup o' Tea.
Lunch: Bowl of vegetable fake cup a soup; 1½ slices of Toast; Clementine; Banana; Rocky; 2x Paracetamol; Cup o' Tea.
Dinner: Shepherd's pie; grated mature cheddar cheese; mixed veg; ground black pepper. Pudding was an apple pie with custard. Coffee; 3x pieces of Sainsbury's Mint Creme Chocolate.
Supper: Home-made Double Choc chip cookie.

No comments: