This topic was marked solved by its starter, on March 6th, 2014, 01:08 AM

txcas

  • Bug Zapper
  • Posts: 202

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: Pictures overlap the side bar
« Reply #2, on March 4th, 2014, 12:58 PM »
Your forum only has one visible topic, but it has resized pictures in it (responsive), so by shrinking the window I can see them shrunk... And everything's fine.

txcas

  • Bug Zapper
  • Posts: 202
Re: Pictures overlap the side bar
« Reply #3, on March 4th, 2014, 02:27 PM »
Guest on my forum can only see the Blog.  The pictures are resized correctly if hosted locally in a media album.  The problem happens when someone uses
Code: [Select]
[IMG]http://URL[/IMG]. 
I sent you a PM with account credentials, I will send you a link to the post displaying this problem.

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: Pictures overlap the side bar
« Reply #4, on March 4th, 2014, 03:52 PM »
I saw the post. The problem is quite obvious, there's a max-width: 100% but no height: auto for img tags, which will be fine MOST of the time, except if the person specifies desired picture dimensions, in which case the desired height will be kept, ending with a picture approx 350x600 (from 1024x768 resized manually to 800x600), on a shrunk window.

Is this it..?

PS: I still have your 27 previous PMs with the admin credentials, no need to send them every time unless you delete my admin account every time, eh eh ;)
Posted: March 4th, 2014, 03:42 PM

Edit index.css, and change:

Code: [Select]
.bbc_img
border: 0
margin: 4px 8px
max-width: 100%

Add this:

Code: [Select]
height: auto

Should work... I think!

txcas

  • Bug Zapper
  • Posts: 202

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: Pictures overlap the side bar
« Reply #8, on March 5th, 2014, 02:03 PM »
Okay, your overlapping is going to be fixed by that, but it's a silly fix if all you did was reduce the max-width... It means your browser is not adjusting the img width to its container, but to the page width, or something. Which is a browser bug.

Did you test in all browsers..? Because it definitely works with Chrome with the fix I gave you...

txcas

  • Bug Zapper
  • Posts: 202
Re: Pictures overlap the side bar
« Reply #9, on March 5th, 2014, 04:05 PM »
This seems to be a bug in:
Internet Explorer 11
Firefox 27.0.1

Your fix works on Chrome and Safari.  What is interesting is that the same picture links looks good here on Wedge, using either IE11 or Firefox.

Nao

  • Dadman with a boy
  • Posts: 16,078

txcas

  • Bug Zapper
  • Posts: 202

Nao

  • Dadman with a boy
  • Posts: 16,078
Re: Pictures overlap the side bar
« Reply #12, on March 8th, 2014, 12:07 PM »
This is one of the strangest bugs I've had to deal with...

- Your site: max-width: 100% isn't respected in Firefox
- My site: it is, but flexbox creates an empty gap in the vertical space that was previously occupied by the unresized image.

All in all, it's definitely a Firefox bug. My code is clean. I haven't tested in IE (yet).
Posted: March 8th, 2014, 12:02 PM

I just updated to Firefox 28 Beta, and the flexbox bug is fixed.

Also, I've noticed that your image is actually correctly sized -- UNTIL the page is loaded, at which point it resizes back to the original. EH..?!
So it's a JavaScript problem...
Re: Pictures overlap the side bar
« Reply #13, on March 8th, 2014, 12:16 PM »
Okay... Fixed. Somehow. Should remember this for the future: when there's a behavior difference between wedge.org and another site, first thing to do is ask to disable plugins one by one...

In this case, it's due to Pin It. It's enclosing the items in an inline-block div, and the inline-block resets the max-width to the whole page. Doesn't make much sense to me... Anyway, changing this to a span (or replacing "inline-block" with "inline" in the plugin code) works, but I don't know why, and most importantly -- I don't know if it'll work cross-browser, too.

Can you try this, and keep me posted..? Then we can test on all browsers. It's important to me that it works.

BTW, your site loads very slowly mainly because it tends to accumulate JS scripts... Facebook Likes, Twitter retweets, Pin It stuff, and so on... I'm not sure why you're so adamant on keeping your site a secret, and hiding it from bots as well (meta noindex), while at the same time trying every possible way to make it visible on social networks...?!
Re: Pictures overlap the side bar
« Reply #14, on March 8th, 2014, 08:15 PM »
You may have noticed this new bug, apparent on the New Revs topic itself... My gravatar is shown out of proportion.
Why so? And why post it here..?

Basically, the avatar is shown with an img tag, and a height param of 50.
Since only the height is set, width is 'auto' in this case.
max-width: 100% doesn't have any effect.
However, my fix forces height to 'auto', and it overrides the height param. (For the height param to be prioritized, it would need to be done via a style param instead.)

I'm not sure how best to handle this...
Perhaps by setting height: auto only on img[width], which will ensure that this gravatar won't be touched.
Any better solution..? Because this one isn't gonna work in IE6... Oh, what did I just say? Who cares :P
Posted: March 8th, 2014, 08:12 PM

Yep... Confirmed fixed.