Identify the browser based on the screenshot

Discussion in 'Web Design & Coding' started by X-Istence, Apr 22, 2009.

  1. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Okay, so I am developing a website for the company I currently work for, I have included three screen shots, can you identify which browser is which based on the font smoothing it does?

    Also, can you based on these screen shots tell me which one I hate developing for the most because the fonts never seem to look right no matter what I do?
     

    Attached Files:

    Last edited: Apr 22, 2009
  2. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    opera, firefox, ie

    you hate the third one, because nobody likes developing pages for IE

    just a guess :p
     
  3. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
  4. Heeter

    Heeter Overclocked Like A Mother

    Messages:
    2,732
    Safari, IE, Firefox


    You hate Safari.


    Heeter
     
  5. Perris Calderon

    Perris Calderon Moderator Staff Member Political User

    Messages:
    12,332
    Location:
    new york
    I have no idea but I'm surpised nobody mentioned chrome and opera in there guesses

    I've never had trouble with rough fonts in ie so I wouldn't think that was it, though maybe you're talking about without the smooth font feature enabled?

    [edit]I did a quick google and see the only browser uses correct font weight would be firefox 3 on a mac so they're all gonna get it wrong?[/edit]

    double edit

    I see teh zeke suggested opera as he points out below;

    vvvvvvvvvvvvvvvvvvvvvvvvvvvvv
     
    Last edited: Apr 23, 2009
  6. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    ahrm
     
  7. gonaads

    gonaads Beware the G-Man Political User Folding Team

    IE8, Opera and Safari


    X-Istence don't use no Firefox! :p

    Umm, Safari?
     
  8. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    you should PM me the answers :p
     
  9. Dark Atheist

    Dark Atheist Moderator Political User Folding Team

    Messages:
    6,376
    Location:
    In The Void
    ie6 ie7 ie8 :D
     
  10. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Close. You missed one out of three. Safari is actually my favourite browser, followed by Chrome. WebKit is an awesome rendering engine, AND so far has given me the least trouble developing this website. Based on rendering engines, you win a prize :) The only difference between Safari and Chrome is that Safari uses "no file selected" and Chrome uses "No file chosen".

    Chrome, IE, Firefox is the order.

    Nope, entirely wrong. And while I generally don't use Firefox, unfortunately it is required when designing and building a website. Firefox is bloated and slow compared to Chrome and Safari on Windows and Mac OS X respectively.

    Yeah, this page does not render correctly in IE 6 :p Completely wrong.

    ---

    IE is actually the browser giving me the most trouble, it does some weird funky stuff to the fonts while attempting to ClearType or font smooth them. Neither FireFox nor Chrome exhibit the same behavior, it causes certain font choices to look bad in IE. I show case the website in Chrome or FireFox and the fonts look just fine and my boss likes it, show it in IE and the fonts just look fuzzy, not sharp, unpleasing and he does not like it. I don't know how to fix it, turning off font smoothing/clear type does absolutely nothing. This issue also comes up when using bold on the font, in Chrome and Firefox it looks good, and the font is readable without a headache, in IE it is fuzzy and causes headaches when look at for too long. Not sure why that is.

    Not only that, but if IE 7 is not in strict mode, certain properties just don't work, for example on an image you can give it margin's and padding. Generally used to move the image around, or if it is wrapping text to cause it to have some space around it rather than having the image sit right up against the text. So you put it into strict mode with a XHTML doctype, and suddenly padding and all that jazz works, BUT it changes the way it renders lists, which I am using to create the menu that is located in the header of that page (not in screenshot), so while in Chrome and Firefox there is a gap in between the header items, there is none in IE. So I had to widen the gap for all browsers, just so that IE has a small gap.

    That is not to say that the other browsers are not without flaws, Chrome renders text-area boxes wrong. It gives them a bigger width than what I have specified. (Chrome is Sample 1). That may have to do with the ability to resize the text area box using the little grip handle. It makes the form look out of place though, as if I had not cared to make it the same size. I will probably end up submitting a bug report for it. It is an issue with WebKit, hopefully one that will get fixed :-D.

    The other issue I have ran into is that all of the browsers use different handling schemes for when an image is missing. Opera, Chrome, Safari all interpolate the value of a missing image based on other knowledge about the page. For example, if you have the same piece of code written on a page, with just different text, but same layout (divs and all) it will make the missing images have the exact same size as the images that do exist, thereby not screwing up the entire formatting of the page. This way if you have 4 div's with images floating in them, two of the images exist and they both are 150 x 150, for the other 2 div's that are supposed to have floating images but don't because they don't exist they will just put placeholders of size 150 x 150 in, EVEN if the width/height is not set in the HTML or CSS. Firefox will just put the Alt text into the document, thereby causing layout issues, and IE will make the picture 100% of whatever container it is in (in my case a div). Will write a test case for this sometime later today to showcase this behaviour.

    Sure, missing images is bad, but I believe that the behaviour that WebKit, and Opera exhibit is the right one, this may take more time/code to get to that point but the effect is more pleasing.

    The last bit that is annoying is that IE and every other browser entirely disagrees on the box model and how the various parts should be applied, I have the case right now where IE puts a certain element 1 pixel higher than every other browser, which means that instead of having it be flush to the bottom of a div, there is a 1 pixel gap. Now, I have fixed this in such a way that in IE while the element is sitting higher you you won't notice it, but it is rendered correctly in all the other browsers. I can sit and bang my head against the desk all day, but it won't help fix those issues with IE. It is highly annoying stuff like that happens since it means more work for me. (See attached images, I know they are not that great, but mspaint sucks, see how the ie7 one the element is sitting higher than in the webkit screenshot?)
     

    Attached Files:

  11. gonaads

    gonaads Beware the G-Man Political User Folding Team

    Is there something wrong with those attachments, or am I dreaming?
     
  12. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Other than that I only grabbed a small part of the website as I am not allowed to show the website until it launches publicly, no there is nothing wrong with it. The screenshots show the issue with IE.
     
  13. Dark Atheist

    Dark Atheist Moderator Political User Folding Team

    Messages:
    6,376
    Location:
    In The Void
    you're eyesight is failing best get to the opticians ;)
     
  14. joshih

    joshih OSNN One Post Wonder

    Messages:
    8
    Have you tried Screenshot captor, it is very useful
     
  15. fitz

    fitz Just Floating Along Staff Member Political User Folding Team

    Messages:
    4,076
    Location:
    Chicagoland
    IE has always seemed to treat the box model incorrectly - Last time I did any sort of development was for IE6 - and I HATED dealing with the box models of IE..

    edit: seems like things haven't changed too much with IE and box model issues
     
  16. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    It has gotten better, at least a little bit which is really surprising. It still has many issues though, which makes it a pain in the behind to deal with ...