Anyone have Firefox 3 still lying around?

[ryan]

Not ProcessWire related (other than the site was built in it), but also maybe not pub material. But I'm one of those people that goes to the pub and sometimes talks about work... I'll setup a "General Web Development" forum later.

I've got a client that is telling me the site I launched a couple weeks ago (http://villarental.com) is not working in Firefox 3.5. They've sent me screenshots, and apparently lots of things are just breaking, layout-wise, and inconsistently at that. See the attached screenshots. The problem is that I can't duplicate it. I've borrowed an old Mac with FF 3.5 and installed FF 3.6 on a WinXP virtual machine, and everything displays just fine (minus no CSS3 round corners). The code also validates with validator.w3.org.

Then yesterday, I got another email that it was now breaking in Internet Expoder 8 (see 3rd & 4th, smaller screenshots). Again, I can't duplicate it... everything displays just fine for me in IE8. So something is going on here, but I'm at a loss to determine what since I can't duplicate any of it.

Just wondering if you've got FF3 or IE8 sitting around, can you try loading http://villarental.com and click around a couple pages and let me know what you see? Even if everything looks fine, it'd be good to know at least I'm not alone in being unable to reproduce the breaking layout.

[Pete]

The screenshot showing IE8 in standards-compliance mode sounds like it might be running in the "compatibility view" setting. I've had mixed results with that if I'm honest - in IE8, compat view was supposed to make it render like IE7, but for me it broke stuff that looked fine in real IE7.

You could try adding this header to the page and see if it fixes anything relating to IE - it just basically forces IE not to use compatibility mode even if the user sets it in their browser:

header('X-UA-Compatible: IE=edge);

Unfortunately I've only got FF5 installed at present so can't test the FF side of things other than to say it looks fine in FF5.

[jbroussia]

Does it break only on his machine ? Does he have the opportunity to test the site from another computer ? 

[slkwrm]

Don't know about FF3, but in IE8 it looks fine. Everything in its right place.

[SiNNuT]

Ryan, i've just tested the site with IE8 (on WinXP Pro). I see no problems with the layout, it basically looks the same as in FF5 or Chrome, just without the border-radius, that u use a lot. Maybe you could ad some css3pie magic because IE8 still is used a lot.

[ryan]

Thanks for looking at these. I was thinking some css3pie might be a good way to go here. The only reason I haven't yet is that I like the squared off version almost as well (like in IE and other older browsers), so don't mind the variation. But I think the right thing for me to do is instead let the client decide... but that's after I figure out the rendering issues.

So far I haven't been able to find anyone else that can duplicate it except for this client. But this client has been able to duplicate it on many computers running FF3, both in and out of their network. Their whole company is apparently standardized on FF3.6. They've only been able to duplicate it on one computer running IE8 (as far as I know). And we did play with the compatibility mode, that wasn't it. So the FF3 one is more of a concern.

@Pete: while the compatibility mode isn't the issue here (we tried it both ways), the compatibility mode issue has come up on other sites before, so that header is good to know about–thanks (I didn't know about that one before). I did know about the meta tag (below), but the header really may be a better solution since it catches IE before markup starts flowing.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

[SiNNuT]

A little bit OT:

In exploring the villarental site a bit i noticed that http://www.villarental.com/regions/ shows a blank page. The url isn't linked to on the site but some people may look at a url like http://www.villarental.com/regions/mexico/ and expect http://www.villarental.com/regions/ to show a listing of available regions or something like that.

Also, http://www.villarental.com/regions/test/ shows a 404 page, where other non-existing pages just show (redirect to?) the homepage.

[SiNNuT]

@Pete: while the compatibility mode isn't the issue here (we tried it both ways), the compatibility mode issue has come up on other sites before, so that header is good to know about–thanks (I didn't know about that one before). I did know about the meta tag (below), but the header really may be a better solution since it catches IE before markup starts flowing.

Maybe you can also consider incorporating it in the PW .htaccess.

# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------

# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>

<IfModule mod_headers.c>
# Because X-UA-Compatible isn't sent to non-IE (to save header bytes),
# We need to inform proxies that content changes based on UA
  Header append Vary User-Agent
# Cache control is set only if mod_headers is enabled, so that's unnecessary to declare
</IfModule>

(taken from here: https://github.com/paulirish/html5-boilerplate/blob/master/.htaccess )

[Adam Kiss]

List of OK settings I tested (or, in quirks mode's case, wildly different result):

• [edit] FF 3.5.6, w7 – Everything ok
  
• FF 3.6.8, wXP – Everything seems ok
  
• FF 3.6.13, wXP – Everything seems ok
  
• IE 8, wXP, browser mode: any, document mode: standard for each b. mode, everything ok
  
• IE 8, wXP, bMode: IE8, dMode: IE 7 std: two boxes in a sidebar (first & last) are hidden, probably due to positioning
  
• IE 9, w7, browser mode: any, document mode: standard for each b. mode, everything ok
  
• IE 8/9, wXP/7 respectively, bMode: any, quirks: it does not look OK, but different way than your client's (it's actually not even centered)
  

I was able to reproduce the IE issue, using following settings:

• Win XP, IE 8, bMode: IE 8 Compat, dMode: IE8 – dMode has to be set manually
  
• Win 7, IE 9, bMode: IE 9 Compat, dMode: IE 9 – dMode has to be set manually
  

Result

• IE issue: able to reproduce
  
• FF issue: unable to reproduce
  

note: your masthead.css contains mysterious 0 on the first line (in attachments)

note: you seem to ommit -moz-border-radius, is it correct?

I did such an intensive testing because you're magnificent person and I've got mad respect for you.

OT: Interesting, my computer (macbook 4.1) seems to be very unhappy running two virtual machines (Win XP & 7 apiece), Word, Netbeans, Photoshop CS5, FTP client, QT and bunch of smaller programs... Huh...

[ryan]

Thanks all for testing this! Next round of drinks is on me.

@Sinnut, thanks for posting this .htaccess directive. I am going to try it out and take a closer look and perhaps look at including this in my sites, if not PW. I didn't realize it could be defined at this level, which is pretty awesome. That /regions/ page just has a blank template. I still need to do something with it (along with a few others) but hasn't yet been a priority since it's not a functional page on the site. But I agree that sooner or later people will test it out in their address bar... I'm prone to doing this on sites as a form of navigation myself. I'm getting 404s for all non-existing regions off of /regions/, like http://villarental.com/regions/lajelakjelj (which is what it should do). What's an example of a URL that's giving you a redirect?

@Adamkiss, you are the man. Thanks so much for all your testing here! This is really helpful. Now I'm off to try and reproduce it myself. That "0" was not supposed to be in the masthead.css–that's an error, just fixed. Thanks for finding it. The -moz-border-radius is intentionally excluded. I don't want it to render the rounded corners unless the browser actually supports the native border-radius. The reason is that -moz-border-radius (in FF3 at least) only rounds actual borders, and not the boundaries of images. So when I was using it, I was getting some things rounded and some things not, and it just looked inconsistent in a bad way. I figured it looked better if everything was either rounded or not rounded in a consistent manner. Btw, you are the man.

[LeslieC]

Hope this help  ;D

You can download FF 3.5 here

I always keep old copies around for some reason

Cheers 

[SiNNuT]

@Sinnut, thanks for posting this .htaccess directive. I am going to try it out and take a closer look and perhaps look at including this in my sites, if not PW. I didn't realize it could be defined at this level, which is pretty awesome. That /regions/ page just has a blank template. I still need to do something with it (along with a few others) but hasn't yet been a priority since it's not a functional page on the site. But I agree that sooner or later people will test it out in their address bar... I'm prone to doing this on sites as a form of navigation myself. I'm getting 404s for all non-existing regions off of /regions/, like http://villarental.com/regions/lajelakjelj (which is what it should do). What's an example of a URL that's giving you a redirect?

Every non-existing page under 'regions' gets a 404 page plus the correct status code.

Every other non-existing page/url shows the homepage and status code 200 OK. This seems strange. Example:

Request URL:http://villarental.com/test/test/
Request Method:GET
Status Code:200 OK

[ryan]

Thanks for letting me know – Looks like I had "allow URL segments" turned on in the homepage's template. I don't need that on the homepage, so turned it off, and problem solved.

[Adam Kiss]

Ryan, should I give you my post address so you can send me that beer?

[ryan]

Adam I'm actually saving bottles right now to do my first homebrew, so if it's legal to send beer in the mail I can send you a bottle or two.

[Adam Kiss]

I actually don't drink beer But if we ever meet in person, I'll keep tabs and I'll let you buy me a Cuba Libre