none
Question Regarding Website Compatibility for Firefox

    Question

  • Hello :-D,

    I’m a newbie at web designing and with Expression Web 2.  I have recently completed website (that I have been working for 3 months on) last week.

     

    Currently, the site works very well in Internet Explorer (IE), BUT the main yorku.ca header and blue title background boarder clashes into each other on Firefox.

     

    Furthermore, on Firefox, my website gets the inscription “ skip to page content” –I never see that whenever I load my site in IE.

     

    Could you please tell me what I am doing wrong? My website is www.yorku.ca/povproj. My goal is to make this website Firefox compatible.

     

    Thank you for your time.

     

    Crystal

    Thursday, October 09, 2008 5:00 AM

Answers

  •  Re the geek looking characters Linux serves with PHP installed may display the BOM characters when it should not. Go to Tools > Page Editor Options and in the BOM section remove the checkmark from all to file types.

     However,the real reason you are seeing those characters is found by validity your ste. See: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.yorku.ca%2Fpovproj%2F  first error:

     The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the XML declaration (utf-8). I will use the value from the HTTP header (iso-8859-1).

    FWIW, I degree write Bill's statement that "FireFox is displaying it as it really is, based on web standards. IE is doing a "best guess" and although it's not following standards, it's showing it as you think it should be." Since IE 7 is very predicate when you use a valid doctype and your code it valid.it is also more predictable in IE7 if you use the default XHTML doctype.

    You also have a mixture of html and xhtml closing styles which is causing problems in Firefox.

    Your code looks like you have pasted from some other editor:
    <p class="style2">
          <span class="style47" lang="EN-US" style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-bidi-font-style: italic">
          <strong>McLaughlin College</strong><i><strong> </strong> </i></span>

    When you see mso the means  it is from Microsoft Office.

    Don't use pixels for font sizes, use fort family groups  to specify fonts. See the Basic Website tutorial and the fort family tutorial at http://by-expression.com/content/tutorials.aspx  Take the free Fonts for the Web class at http:// starttoweb.com
    MS MVP Expression http://by-expression.com
    Thursday, October 09, 2008 3:13 PM

All replies

  • FireFox is displaying it as it really is, based on web standards. IE is doing a "best guess" and although it's not following standards, it's showing it as you think it should be. That will change when the new IE comes out, so it's good you're looking at FireFox now. But in reality, it's only displaying correctly at the settings you have on your computer (medium text size and 100% zoom). In IE, change the text size or zoom in (both of which many people have as their defaults), and the whole page goes completely wonky.

    Have you loaded the Web Developer Toolbar in FireFox 3? It's really handy to analyze problems.

    There's a lot of absolute positioning and layers. Did you drag stuff around in Design View? That can cause problems, as can layers. Layers have very specific uses and can/will cause LOTS of problems with layout. They may seem handy when you're designing something, but they cause a mess when rendering in a browser, especially when text is resized, etc.

    But the big problem I see on quick glance is that the header was done with nested tables and it's all messed up. It's way more complicated than it needs to be. I also see one table nested in another, yet it's set to 102% of the width of the table it's in; that can't be right.

    Also in your header is picture labelled "Green World" that's tiny on the screen, but it's a 2.5 MB picture that's nearly the size of a 17" monitor screen and takes a dog's age to load. That needs to be shrunken down to its display size in a graphics program and then inserted.

    There are other problems caused by cutting and pasting from Word. That results in weird characters displayed, because it's calling for another font "mso-fareast-font-family". When you paste from Word, paste it as plain text only so that the text doesn't bring in the Word formatting code.

    Also, the Calibri font that's called for in some styles will only display on computers that run Vista or MS Office 2007. All other computers (which is to say, most computers) will substitute their default font, and you don't know what that is or what it will look like.

    I hate to suggest this, but I'd start a fresh, blank page (use one of  EW's Header and 2-column templates), then insert one item at a time into it, save it, and check it in FireFox after each step. If it doesn't work, find out why--don't use tables or layers to force things to fit; don't position things with the space bar or by dragging frames around in Design View. That really will be easier and faster than trying to take the existing pages apart and fix them.

    Good luck.


    Thursday, October 09, 2008 2:00 PM
  • Adding to Bill's comments .......

    The strange characters you see at the top of the page in FF are what is know as the Byte Order Mark (BOM).

    To remove this, and you'll need to do it for each page, right click a page and select 'Page Properties'. Then select 'Language. At the bottom of the dialog you'll see a check box, 'Include a byte order mark'. Uncheck this.


    The other issue causing the difference is the spacer image you've used for your 'skip to page content' link. This isn't on the server and is therefore shown as the alt text in FF, which pushes the other content down. IE is ignoring this, hence the difference.


    I see you've pasted content from Word into the page. This isn't a good idea and results in lots of unnecessary code, repetaed in-line styles etc. You can get around this in two ways. One, paste in Notepad first and then copy from Notepad to your page. Two, use 'Edit - Paste Text', selecting whichever option gives the best results.

    You'll also see that the quote marks appear as strange characters in FF2. This again is down to pasting from Word. The easiest way around this is to delete them and replace with double quotes in EW.

    HTH

    Ian

    http://www.ew-resource.co.uk/
    http://www.fp-resource.co.uk/


    Ian Haynes
    • Edited by Ian Haynes Thursday, October 09, 2008 2:58 PM added information
    Thursday, October 09, 2008 2:31 PM
  • Ok, you have some word styles which is messing things up.

    Open the page and switch to code view.
    Right click and select "Optimize html" and make sure "word html" is checked
    at the bottom of the optimize dialog.
    Click OK.
    Save the page.
    Right click again and select Reformat Html.
    Save the page.

    Then in code view go to line 141 and remove the alt text for:

    <img border="0" height="1" src="http://www.yorku.ca/povproj/Images/spacer.gif" width="1"

    The alt text is what is displaying at the very top in FireFox

    Save the page.
    Close the page.
    In folder view, right click the file name for the page and select Open with Notepad.
    When it opens click File > Save as.
    At the bottom of the save as dialog change the Encoding from UTF-8 to ANSI
    and click Save. This will remove the byte order mark you see in the upper left in FF

    Publish to the server.

    FrontPage MVP
    Thursday, October 09, 2008 3:09 PM
  •  Re the geek looking characters Linux serves with PHP installed may display the BOM characters when it should not. Go to Tools > Page Editor Options and in the BOM section remove the checkmark from all to file types.

     However,the real reason you are seeing those characters is found by validity your ste. See: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.yorku.ca%2Fpovproj%2F  first error:

     The character encoding specified in the HTTP header (iso-8859-1) is different from the value in the XML declaration (utf-8). I will use the value from the HTTP header (iso-8859-1).

    FWIW, I degree write Bill's statement that "FireFox is displaying it as it really is, based on web standards. IE is doing a "best guess" and although it's not following standards, it's showing it as you think it should be." Since IE 7 is very predicate when you use a valid doctype and your code it valid.it is also more predictable in IE7 if you use the default XHTML doctype.

    You also have a mixture of html and xhtml closing styles which is causing problems in Firefox.

    Your code looks like you have pasted from some other editor:
    <p class="style2">
          <span class="style47" lang="EN-US" style="mso-fareast-font-family: &quot;Times New Roman&quot;; mso-bidi-font-style: italic">
          <strong>McLaughlin College</strong><i><strong> </strong> </i></span>

    When you see mso the means  it is from Microsoft Office.

    Don't use pixels for font sizes, use fort family groups  to specify fonts. See the Basic Website tutorial and the fort family tutorial at http://by-expression.com/content/tutorials.aspx  Take the free Fonts for the Web class at http:// starttoweb.com
    MS MVP Expression http://by-expression.com
    Thursday, October 09, 2008 3:13 PM