Tuesday, September 26, 2006

Look and Feel of blog (#6) IE Look and Feel of blog (#6) IE

Whoops. I forgot to check whether my new blog "look and feel" worked under Internet Explorer, and it didn't. The first problem is that IE 6 is not W3C Standards-Compliant, whereas the Gecko based browsers such as Mozilla and Firefox are a lot more so. This means that the "Chopped" mode didn't work in IE, at least until IE 7, since that is when Microsoft apparently supports the CSS max-height attribute. And that is how I implemented "Chopped" mode - by setting the max-height attribute.

Another problem cropped up - I couldn't change the display mode on a global basis in IE 6. The way I do this in a Gecko based browser is to use the getElementsByName function to acquire an array of DIVisions (<DIV>) that have a common NAME attribute. The problem is that I have also assigned a unique ID attribute for these DIVisions, and IE apparently first checks the ID attribute in its implementation of the getElementsByName function, and only if that is missing, does it check the NAME attribute. Earth to Microsoft: there is a reason the function is named: getElementsByName - there is another function named: getElementById. In other words, it is again out of standard, as these two attributes are not interchangable.

So, the way I got around that was to first try getElementsByName. And, then if that function returns an empty array, I create a new empty array and then get an array of all the DIVisions in the entire blog by using calling the getElementsByTagName. I then check each of these DIVisions, and if its NAME attribute is the one I am looking for (the one I used in getElementsByName), I push it onto the array of DIVisions with that NAME attribute (PostDivs). The result, with a bit more overhead and code, is identical. The resulting code is now (with IE kludge emphasized):
function SetGlobalDivs()
{
if(!PostDivs)
{
PostDivs = document.getElementsByName(PostGlobalDiv);
if(!PostDivs.length)
{//IE Kludge
PostDivs = new Array(0);
var divs = document.getElementsByTagName("DIV");
for (var i=0; i<divs.length; i++)
if (divs[i].name == PostGlobalDiv)
PostDivs.push(divs[i]);
}

}
return(PostDivs);
}
While playing with that, I found that IE 6 had another annoying feature. Blogger sets up its columns using pixal widths. The width of the this blog is 660px, the width of the blog entries is 410px, and the width of the sidebar is 220px. That works great in Gecko based browsers, but in IE 6, if a blog entry exceeds the 410px width (for example, a long URL or big picture), the sidebar is pushed down below the blog entries. Since this is apparently an IE problem with most Blogger templates, I haven't addressed it yet, but apparently it can be fixed by using percentages instead of pixals for the widths.

Labels:

11:53 PM Display: Full / Chopped / Footer

Display: Full / Chopped / None

Display: Full / Footer / None

Display: Chopped / Footer / None

2 Comments:

Blogger Stephen C. Carlson said...

I use FF, so I've always found your chopped format to be innovative. A little strange at first, it is growing on me.

Have you tested whether using em or ex units on the max-height will more often chop the text between the lines, instead of in the middle of the text?

7:08 AM  
Blogger Bruce Hayden said...

Interesting idea. I will probably try it in the next week or so, and will let you know how well it works. One question I have is how well that would handle pictures.

I get the same questions about my web site, softpats.com, and in particular, the way the navigation I provide around the outlines that I use for most of my content. A potential client the other day told me that at first, he thought that it was plain weird. But then, when he tried it and got used to it, he liked it.

Addendum: I turned on word verification for comments because I was being spammed pretty heavily awhile back. Now I find it a pain when commenting on my own blog.

10:05 AM  

Post a Comment

Links to this post:

Create a Link

<< Home >>