yegg
FYI -- getting reports from some IE users that the search button appears below. I fixed this by adding one more pixel to the sxw container, though this does create a small space.
posted by yegg Staff8 years and 3 months ago Link

anonymous
Some earlier versions of IE have problems with the box model, but I don't see it at all in my tests. :/
I actually tested with IE6 to 9 on a version without the extra space, yet there were no visible problems.
(Is this below IE6? Because then a browser specific style sheet is probably required.)

Perhaps it's a DPI setting issue. In that case, the only real solution would be making things more fluid.
I'll work on this and see what I come up with, because it should solve the problem with the button below the search field.
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
It is a particular version of IE8--I can send screen shot and version if desired. I couldn't reproduce it either. My thought was that an earlier version of IE8 had a bug and this person's computer is locked down because of work.

I've also gotten reports on certain versions of Firefox, but have also been unable to reproduce myself.
posted by yegg Staff8 years and 3 months ago Link
anonymous
It's not the DPI resolution...

IE8 with 120 DPI (About 125% of normal DPI, using a version of the page without the extra space in #sxw):


It does stretch things, but the layout is still the same. There's not much one can do about the streching without affecting people with a regular DPI resolution and Windows does this to almost everything on the screen (it's very ugly).

I'm completely unable to reproduce the bugs until there's more information (screenshots are fine).

If the button displays below the input field, my only guess would be that the browser either doesn't have or ignores the correct width of one or more elements. If this is the case, I would think the problem is caused by either caching of a previous style or font settings.
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
Really wish I could reproduce it myself! I could ask about any particular settings if that would help. Here's the screenshots:




posted by yegg Staff8 years and 3 months ago Link
anonymous
That's really weird. The button appears to fit, yet it's placed below.

Adding this snippet of css and then taking a screenshot would let me know exactly how much space is used by the elements:
  1. #sxw{outline:1px dotted yellow !important;border: 1px solid black !important;}#sx{outline:1px dashed lime !important;}#sb{outline:1px dotted magenta !important;
(The elevated importance avoids some conflicts.)
Don't forget to remove the extra space on #sxw when testing!
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
It is weird. I actually had him on the phone and was changing stuff in real time, so I'm pretty sure it isn't a caching issue.

If I added 1px to sxw or took one away from sx it stopped the problem. Does that help, or should I get the screenshot?
posted by yegg Staff8 years and 3 months ago Link
anonymous
I'm pretty much wandering around in the dark with a vague idea of what I'm looking for.
I've been reading about issues with IE8, but haven't found anything related.

Basically, the only thing I can do is prepare ways to test things in order to rule them out. :/
Either #sx or #sb is using too much space and I don't know which one. Getting some outlines would at least tell me which element is being naughty.

The alternative would be preparing tests for almost anything.
It does suck when I can't reproduce the bug and test solutions myself.

I'll be setting up a simple front page mirror and creating different test cases (To save you the work)...
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
Understood. I'll get a new screenshot.
posted by yegg Staff8 years and 3 months ago Link
yegg
He should be taking the screen shot tomorrow. Did I apply this right? http://tmbg.duckduckgo.com/index2.html
posted by yegg Staff8 years and 3 months ago Link
anonymous
That looks correct. Now, if there's something expanding the element outside the border, it'll show up on the outlines.
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
Got it!

posted by yegg Staff8 years and 3 months ago Link
anonymous
That's... impossible. The button has all the space it needs, yet it decides to jump off the cliff.

I have the exact same version of IE8 on my Windows XP machine but it doesn't exhibit the problem.
I've tweaked every little setting I could find. I can't replicate the behaviour.

It's just guesswork now.

Here is a modified version of the homepage which targets some possible bugs. I would like to know if it has the issue or not.
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
OK, more data for you :). This may actually help. I'm going to copy and paste his email.

>>

When I open the link it is still there…however, I was trying to think of any special settings I’ve modified. The only one that I could remember is the ‘hold Ctrl and use the mouse wheel’ to zoom in/out. I went to the link you’ve just sent and initially saw the issue:

 

But then,  if I zoom in/out it toggles between being resolved:

 

And not:

 

Hopefully this might lead to the sol’n.

 <<

posted by yegg Staff8 years and 3 months ago Link
anonymous
That's it! The browser is set to 95% zoom and miscalculates dimensions.
(It's even visible in the screenshots. How could I miss that...)

If you want the homepage to zoom without breaking, either keeping the extra space in #sxw or making it expand as the content grows would be neccesary.
posted by [Old Forum mrmagical] • 8 years and 3 months ago Link
yegg
Ugh :). I just researched this zoom thing a lot and there is no easy way to detect (absent using flash)!

So this is what I did--I think it works pretty well. I re-positioned the extra space so it happens on the right of the button and not in the middle of the two elements. I increased the shadow color a bit (to EEE) so it is less visible on the right. Thoughts?
posted by yegg Staff8 years and 3 months ago Link
anonymous
Setting #sfh to display: table; and then removing the width from both #sfh and #sxw makes the whole thing expand only when neccessary in everything except in IE7 and below (does not support display: table;).

How about just setting the width for IE7 and below by using a conditional comment or server side solution and allowing the rest to set the width automatically?

Example of a conditional comment:
<!--[if lte IE 7]><style type="text/css">#sxw {width: 418px;}</style><![endif]-->
posted by [Old Forum guest] • 8 years and 3 months ago Link