Finding and Learning about the Problem ...

Thanks to Ravi Suriya (Blog | Twitter) and Jyothi Rangaiah (Blog | Twitter) .. we teamed out, to find the actual cause.


Few things - I thought before we started:

1. Might be: As i am using Wordpress template on Blogger
2. Might be: Avatar image problem
3. Might be: Template Problem
4  Might be "Google API Configuration problem with Blogger" (as in previous post)

Then we started seeing the problem:
1. Browser : Chrome 
2. Operating System : Windows 8 : 64- Bit
3. Resolution of the System: 1366 * 768

Then we started exploring the page using the Inspect Element property.
We found image/photo of the blogger getting enlarged on the comment container.

"What is an Oracle? --- Course of finding a problem..."

"What is a Heuristic? -- A fallible way of solving a problem"
Here, the Oracle: The blogger image is getting enlarged on the comment container and hiding the comments.

Here, the Heuristic: We started with combinatorial testing on Comment Image properties on CSS Styles.
We changed the values of height, max-width, width using pixels and Percentages.
Finally, We Fixed the Problem. with Learning's: Oracles, Heuristics, Practice CSS, Testing, Exploration skills to solve and Imaginations.


First we did on the Browser end to see the changes are same what we wanted as a solution.


Then i took the backup of the template, before implementing changes to Blogger template.

Things we done: WeekNight Testing and Combinatorial Testing...

---- Mistakes always are stepping stones to Learning's --- 

This entry was posted in . Bookmark the permalink. Location: Mysore, Karnataka, India

1 Response to Finding and Learning about the Problem ...

  1. Ravisuriya says:

    The comment utility of this template has compatible problem, now as well. It needs tuning of style sheet.

    Regarding the approach of fixing the behavior reported in previous post was as below.



    This was the initial style rule for 'content image'


    #content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    }


    The same was observed on all clients (browsers) when rendered the page having an image in post or/and with comment. Comment also showed the profile image of the commenting person.


    Now, max-width being 640 px and height showing its declaration as 'auto', the profile picture in comment section, over lay below the comment text area. That is what we see in the previous post of this blog.


    Now, changing the width to 35px, it change the size both width wise as well height wise. Because, height was defined as auto. The profile pic image container being placed in comment section, looked to be around 40px x 40px in size. So this test, carried out on client using the developer toolbar, helped.

    But, the problem with above change is, any image in this blog would change it to 35px x 35 px. For ex, the image show in the blog post also get shrinked though I upload and set it for showing as large.

    To fix this, the other property we brought into to style declaration is 'width'. Here we didn't provide 'auto' instead we chose 65px. Then it was realized declaring the value in %, will be better for this context. It was 'width: 65%;'.


    With this, image in the blog post retained it's declaration size while the commenter profile pic came to reasonable shape and in position. And, the comment text area was not over layed with the photo. This is the fix observed now in the blog.

    It was this, what was observed to work and not with 'auto'.

    #content img {
    margin: 0;
    height: auto;
    max-width: 640px;
    width: 65%;
    }


    We did not pick 'auto' for this context of problem being solved. The challenge or risk using 'auto' here is, it can extend its width, if the commenting person's image profile container area is increased in page design. That might overlay the comment area again with the image.

Leave a Reply