Wednesday, March 27, 2013

WHY do 'IMG' tags align left to right by default - unlike any other tag?

Minima II v3.5.0 latest version DIY baseball scorecard for Blogger


Originally at +Michael Holloway in Google+
2013-03-26 12:48 AM (edited) - Public
https://plus.google.com/u/0/106539188672607672565/posts/J8xaPFLgzb8

This is the story of a fella who tried to learn how to code web pages without a teacher. Yeah, it's been done before - but this is my story, a long story/short - by way of introducing the latest version of my DIY html baseball scorecard - using Blogger as the publish medium.

internetbaseballscorecard2013.blogspot.ca/

I started a new Blogger blog for this year's version (http://internetbaseballscorecard2013.blogspot.ca/) - I used the Template Editor to pick a blog with a left sidebar, had to settle for a blog template that had one on each side, erased all the coding for the right sidebar, and then made the body of the blog really, really wide. I was done in about 20 minutes - simple. Simple I hoped, would mean fast.

When I started coding this scorecard monster back in 2010 (http://internetbaseballscorecard.blogspot.ca/), somehow I got the different default properties of the 'img' tag, and all other html tags - confused. I found out early in blogging, that if one wanted to place two images side by side, all you had to do was make sure they were small enough to fit in the space that one was providing for them and - by default in all browsers - they sit one beside the other; unlike any other tag, all of which align one Under the other.

So when I finally got to the point of discarding 'tables' as a way of positioning elements in the scorecard - and instead started using the position attribute - I was constantly trying to get elements to run left to right - like images do - trying to take advantage of the browser defaults to reduce coding and increase efficiency.

Blogger didn't like my coding; browsers didn't like it. I was at a loss ... all my scorecards we slow and sometimes became scrambled, especially in the new Blogger Compose Interface ... Until finally a couple of days ago - I realized, all elements align one BELOW the other by default, in all browsers - ALL EXCEPT image!!!


This new baseball scorecard is now built like all other web pages - positioned columns with rows of elements in them.


So far so good in Blogger.

Next I'm going to try and rebuild the monster with all the style in css in the Template of the blog (which will reduce the number of bytes per post by about half. Blogger likes that - and each post must be 1MB or less).

See how css in the template renders the new coding in Blogger's Compose Interface (which has been the biggest problem of late) - tomorrow perhaps.

Still lots of tables to make with columns and rows; and per-inning-totals coding to do - but it all looks like its going to end up smaller than Blogger's maximum of 1,048,576 bytes.


So it's looking like I'll be able to start scoring games in time for the start of the MLB season next week ... And log as many games as I can this year, on the way the the World Series where the Toronto Blue Jays will win in 6 over the San Fransisco Giants.

(when pigs fly; but there's a good chance the team will make the play-offs. :)



Internet Baseball Scorecard 2013 | Monday, March 25, 2013 | TEST: optimized for browser defaults, style in html, scrolling text areas, 11 col, 9 row, 2 teams - http://internetbaseballscorecard2013.blogspot.ca/2013/03/test-optimiized-for-brower-defaults.html

Internet Baseball Scorecard 2013: http://internetbaseballscorecard2013.blogspot.ca/

Full size image (internetbaseballscorecard2013.blogspot.ca): http://2.bp.blogspot.com/-fCDmSOF_6ZQ/UVJ7mZYIgRI/AAAAAAAAEh8/jLcAktX9ogU/s1600/Internetbaseball-scorecard2013_Minima-II_v_3.05.00.jpg

(edited for clarity)



mh