[Plugin: Author Avatars List] Alignment

Uh, that’s a tricky one… I think it’s a problem with the default buddypress theme (Which I assume you’re using?) where all avatar images are floated by default, but I am not a 100% sure. I have added a fix for what I think is causing the problem to the development version, and it looks all fine on my test-setup; could you download it** and check if it fixes the problem?

(**Alternatively you could just edit the plugin’s widget.css and implement these changes)

Hi Ben, its me again (we worked through the post merger MU problem in which you started a new dev version). I just noticed this issue with IE (its fine in FireFox and Chrome) on my MU 3.0 site as well. I’m using your dev version as of late July 5. Have there been some changes since July 5 to address this issue?

UPDATE: I went ahead and downloaded your latest development version and it solved one problem caused another. Before the latest development version, I could place multiple avatars on a single row depending on the width of my sidebar but I was getting excessive space between each row of avatars in IE-8 only. Now the spacing is gone but I can only have one avatar centered avatar per row.

Hm, can you give me a link to your website so I can have a look at the problem?

The main difficulty is that any theme can potentially interfere with (or purposefully override) the plugin’s css and it’s therefore hard to figure out which rules to put into the stylesheets… Many themes have a default style for the avatar image already (float left, add padding, margin, borders etc.) which interferes, but as I said it works for me on the default theme at the moment. ??

https://urbdezine.com. By the way, IE7 and IE8 each have problems but have different effects. It renders fine on both Firefox and Chrome.

UPDATE: Ben, I did the following per suggestion from Ron Rennick, WP core dvlpr (see below). It helped but avatars still render inline on IE and some pages in all browsers I prefer floated/blocks. Any further fixes?

This is near the top of author-avatar/css/widget.css

Code: [Select]
.multiwidget_author_avatars .author-list .user {
display:inline;
margin:0.2em;
}

Change the inline to inline-block

Code: [Select]
.multiwidget_author_avatars .author-list .user {
display:inline-block;
margin:0.2em;
}

correction of my prior post: The problem of inline rather than block avatars is only on IE. It works great on FF and Chrome. So how can we get it to look the same on IE?

Hm, inline-block makes sense but as far as I remember I put inline instead because of incomplete support for the inline-block value in IE 6 and 7… Did “inline-block” change the behaviour in IE 8 for you?

On my test install (https://wp30.mind2.de/) things look the same in the latest versions of FF, IE, Chrome, Opera and Safari. I don’t have previous versions of IE installed at the moment so I can’t test IE 7; just so we can narrow the problem down, could you check my test site in your browsers please?

Also another idea: IE had huge problems with the box model in earlier versions, so maybe the avatars + padding + margin don’t have enough space to be shown in the container next to each other in IE? Can you try and reduce the size of avatars, remove the margin, etc. and see if they “jump back into the same line”?

Hi Ben:

“inline-block” did change the behavior of the avatars in IE-8. They now line up vertically inline (ironic) rather than in a block with asymmetrical spacing, as before. I have to look on my wife’s computer for IE-7, which I haven’t done since the change.

I expanded the size of the sidebar and reduced the size of the avatars yesterday but it made no difference.

I looked at your test site in IE-8 and it was working correctly (the avatars were in a block/floating). However, mine still line up vertically. I made the “inline-block” change to your development version from six days ago. Have you made any additional changes since then that might account for the difference?

BTW, when I said “they now line up vertically inline,” I was referring to IE-8 only. In FF, Chrome, Safari, they do just what I want – float in a block.

Have you made any additional changes since then that might account for the difference?

No, no CSS changes since [263926].

I just looked through your css to see if anything else is interfering.. the only thing I found is the block of rules for img.avatar. Going from the working example on my test blog, can you revert to display:inline; and remove that block to see whether one of those margin, padding etc. rules causes the problem…?

I’m slowly running out of ideas… ??

The following rule seems to work fine across browsers for me as well (not tested in ie7), so again it’s a question of what your theme does differently than the default buddypress theme…

.multiwidget_author_avatars .author-list .user {
	padding: 0.2em;
	display: inline-block;
	vertical-align: top;
	/* IE 7 */
	zoom: 1;
	*display: inline;
}

Thanks Ben. I actually deleted that whole img.avatar string from my theme file css.php and there was no improvement so I restored it. However, I didn’t try it with just inline instead of inline-block Given that its working for you, you’re probably right that it is a problem with the theme, which uses tables. I’ll give it one more try with your suggestions above, and if it doesn’t work, I’ll just live with it while I slowly start looking for a new theme. Thank you!

.multiwidget_author_avatars .author-list .user {
padding: 0.2em;
display: inline-block;
vertical-align: top;
/* IE 7 */
zoom: 1;
*display: inline;
}

SOLVED! That string of code fixed the alignment in both IE7 and IE8. I hadn’t seen that version until you mentioned it in your post. When you release the new version, will there be any additional features or fixes?

Great, so maybe IE8 behaved as IE7 for you on your website? I know there’s something called a “compatibility mode” which makes IE8 use the older css model but I thought that that mode would have to be enabled manually somehow…

Anyway, as that css code is working I will just add it into the next version. I have committed it to the development version now: [267215].

There have been a number of smaller bugs so I will try and keep the next version a pure bugfix release i.e. no new featues.