Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avatar is Squashed #7

Closed
Xarcell opened this issue Feb 13, 2014 · 10 comments
Closed

Avatar is Squashed #7

Xarcell opened this issue Feb 13, 2014 · 10 comments

Comments

@Xarcell
Copy link

Xarcell commented Feb 13, 2014

I added my Gravatar to my profile.

My Gravatar is 100x100, yet it was displayed as 70px by 100px. I don't know how you want to handle this in terms of fixing it.

Problem is here:

#userbox img.avatar {
float: right;
margin: 0 .2em 0 1em;
padding: 0;
max-width: 70px;
}

To fix, I would make it

#userbox img.avatar {
float: right;
margin: 0 .2em 0 1em;
padding: 0;
max-width: 70px;
height: auto;
}

I'm installing Ubuntu on my desktop, so I can't really do a PR for you ATM.

@Nao
Copy link
Member

Nao commented Feb 13, 2014

Height: auto is the default CSS behavior so if it doesn't apply to you, make sure you didn't overwrite it somewhere else.
Works perfectly for me and apparently everyone else, on all browsers.

@Nao
Copy link
Member

Nao commented Feb 13, 2014

BTW the 70px limit is only in Wilderless and Wireless, iirc.

@Xarcell
Copy link
Author

Xarcell commented Feb 13, 2014

Using the latest version of Chrome Win7. I see this problem at wedge.org.

Your right about the CSS default behavior, but the problem is the height is declared in the HTML.

@Nao
Copy link
Member

Nao commented Feb 14, 2014

I can assure you that I'm not seeing in at wedge.org.
I'm using Opera 20 as my daily browser, it's basically Chromium 32 with all 'default' settings (my Chromium has web platform enabled), so it should be the same results...

wilderless

@Xarcell
Copy link
Author

Xarcell commented Feb 14, 2014

I'm not seeing the issue in the forum posts. I see it on avatar selection(in my case the gravatar), and in the sidebar. I'm still going through PC maintenance, so I can't make you a screenshot at the moment. I assure you it's there. I can also see the code, and the code is displaying the avatar how it's told to display it(which is stretching the avatar).

A standard rule of thumb is that if you want to override HTML size with CSS, you must declare your min-width/height or max-width/height AND set the standard height/width to "auto". Otherwise, you end up with stretched images.

@eurich
Copy link
Contributor

eurich commented Feb 14, 2014

Can confirm the issue as well, using a gravatar at wedge.org and the Image (in the sidebar) looks odd..

@Nao
Copy link
Member

Nao commented Feb 14, 2014

Okay sorry I didn't notice the CSS was for the sidebar.

Still I'd like to know why it doesn't work with gravatar but with a local upload it works perfectly...

@Xarcell
Copy link
Author

Xarcell commented Feb 15, 2014

The difference is that the Gravatar has the width & height is declared in the HTML. Where a uploaded avatar has no width & height declared in the HTML. Nor does the Avatar from gallery have a width & height declared in the HTML. So it's only Gravatar you have to worry about.

@Nao
Copy link
Member

Nao commented Feb 15, 2014

Yes. I fixed that in the CSS yesterday but I have no idea whether I should
drop width and height from IMG tags generally. There are pros and cons.
Mostly pros.

@Nao
Copy link
Member

Nao commented Feb 16, 2014

Really odd that the same HTML isn't used for gravatars in topic pages and the sidebar...

@Nao Nao closed this as completed Feb 16, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants