none
Can't see headings of a drop down menu, made using a bullet list, in firefox RRS feed

  • Question

  • Hi

    Can any one help please? New to expression web. I've made a drop down menu using the video here "The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web" and all works well in all browsers apart from Firefox. The headings of my drop down list don't show, but the drop down menu lists do. www.countrysidepromotions.co.uk

    Any help would be much appricated.

    Thanks KB

    Saturday, February 2, 2013 9:26 AM

Answers

  • You will have to be more specific - all the menus show and work in IE10 and Firefox 16. That is with the exception of the link to the Home page.
    The HTML for that link has too many spans and autostyles (most of which are unnecessary) to work out what is going on.
     
    In my opinion, the top menu colour scheme is confusing - is "FAQ / Contact Us" one link or two?  It acts as one, but looks like two links.
     
    The fluyout menu headings show, but they should be a better contrast  - light grey against white is not a good combination.
     
    Tidy up the styles - give the autostyles meaningful names and move the styles to an external style sheet, so maintenance becomes easier.
     
    Finally, the space bar should not be used for layout.  If a user changes the text size in their browser, the page layout will change - this particularly applies to the top menu which uses spaces to
    spread the links accross the page. Use margins and padding instead.
     
    http://w3schools.com has tutorials regarding CSS (margins and padding) which you may find useful.
     

    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 9:50 AM
  • You will need to post a link to the page that has the problem before anyone is going to be able to help you with display issues. If the site is not yet live, post the page and supporting files to a temporary location and give us a link. See the Forum FAQ's and Guidlines - Start Here.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 1:31 PM
  • The headings show in the FireFox version I'm using at the standard text size settings.  They can easily hidden if the text size settings are changed.  (Your site breaks easily on text size changes in the browser.  Check out "View -> Zoom, text only" in Firefox.)
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 4:25 PM
  • Sorry, shows how really bad my eyes are getting. I did not see the link. Surgery on Thursday. Hope it helps.

    Again, my apologies.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 4:33 PM
  • Hi Ron

    Thanks for your quick reply and advice which I intend to put right. It would seem all works fine using firefox on one laptop but not my other so |I need to look into that.

    I've now also noticed that my drop down box doesn't work on my mobile. Would any of what you have already mention affect that as well?

    Thanks in advance

    Keith Boulton 

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Wednesday, February 6, 2013 6:39 PM
  • If you are using a touch screen, there is no "hover", just "click".  Your menu assumes a browser/device with a "hover" effect understanding.
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Wednesday, February 6, 2013 7:25 PM
  • Just to add to what Scott said--the users may not even know that their fonts are set larger. Laptops, which have higher resolution screens than desktop computers (more pixels per inch) are shipped from the factory with the fonts already set to display at a larger size, for readability. Your site will be broken on those computers.

    So it's not just vision-impaired folks or folks who deliberately increase their text size that you need to worry about. It's anyone using laptops, tablets, smartphones, etc.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:52 AM
    Thursday, February 7, 2013 12:32 PM

All replies

  • You will have to be more specific - all the menus show and work in IE10 and Firefox 16. That is with the exception of the link to the Home page.
    The HTML for that link has too many spans and autostyles (most of which are unnecessary) to work out what is going on.
     
    In my opinion, the top menu colour scheme is confusing - is "FAQ / Contact Us" one link or two?  It acts as one, but looks like two links.
     
    The fluyout menu headings show, but they should be a better contrast  - light grey against white is not a good combination.
     
    Tidy up the styles - give the autostyles meaningful names and move the styles to an external style sheet, so maintenance becomes easier.
     
    Finally, the space bar should not be used for layout.  If a user changes the text size in their browser, the page layout will change - this particularly applies to the top menu which uses spaces to
    spread the links accross the page. Use margins and padding instead.
     
    http://w3schools.com has tutorials regarding CSS (margins and padding) which you may find useful.
     

    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 9:50 AM
  • You will need to post a link to the page that has the problem before anyone is going to be able to help you with display issues. If the site is not yet live, post the page and supporting files to a temporary location and give us a link. See the Forum FAQ's and Guidlines - Start Here.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 1:31 PM
  • The headings show in the FireFox version I'm using at the standard text size settings.  They can easily hidden if the text size settings are changed.  (Your site breaks easily on text size changes in the browser.  Check out "View -> Zoom, text only" in Firefox.)
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 4:25 PM
  • Sorry, shows how really bad my eyes are getting. I did not see the link. Surgery on Thursday. Hope it helps.

    Again, my apologies.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Saturday, February 2, 2013 4:33 PM
  • What is going on with those two-color menu headings? That's just plain bizarre. Visitors expect consistency, and needless incongruities of that type only serve to confuse and make users uncomfortable, when there is no obvious reason for making one link look like two, especially in a one-syllable word like "Home."

    Oh, and you might want to have an English major proofread your copy—the possessive of "it" is "its," not "it's." The spaces leading and following the virgules ("/") are unnecessary and inappropriate (and you have a completely superfluous virgule preceding "Upshire"), and the use of the adverb (and sometimes noun or adjective) "then" instead of the conjunction "than" (i.e. as in "...busier then ever...") is incorrect. On another page, "ever" should be "every," and "what ever" should be "whatever."

    I'm not going to proofread the entire site, but you should, or have it done by someone you trust. Little things like poor English go to the credibility of the developer, and ultimately, of the site. Jarring, obvious errors of that sort do not serve you well (or your client, if you're doing this for someone else).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Saturday, February 2, 2013 10:20 PM
  • Hi Ron

    Thanks for your quick reply and advice which I intend to put right. It would seem all works fine using firefox on one laptop but not my other so |I need to look into that.

    I've now also noticed that my drop down box doesn't work on my mobile. Would any of what you have already mention affect that as well?

    Thanks in advance

    Keith Boulton 

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Wednesday, February 6, 2013 6:39 PM
  • If you are using a touch screen, there is no "hover", just "click".  Your menu assumes a browser/device with a "hover" effect understanding.
    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:51 AM
    Wednesday, February 6, 2013 7:25 PM
  • Thanks for your quick reply and advice which I intend to put right. It would seem all works fine using firefox on one laptop but not my other so |I need to look into that.

    Actually, Keith, your site breaks pretty nastily in Firefox when the text size is increased, as Kathy pointed out. This will happen when vision-impaired users, or those using small, high-definition displays, visit the site with their text size increased. In Firefox, click "View|Zoom|Zoom Text Only," then press "Ctrl-+ repeatedly. This is what happens to your header and nav:

    countryside-1

    And this is what happens to your callout text, which overflows its boundaries:

    countryside-2

    As you can see, setting heights on text containers makes sites inaccessible to users who, for whatever reason, have their font sizes set differently from yours. And this is the Web, where every visitor is free to adjust the display to suit themselves, something that you will want to keep in mind going forward... ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, February 7, 2013 1:43 AM
  • Just to add to what Scott said--the users may not even know that their fonts are set larger. Laptops, which have higher resolution screens than desktop computers (more pixels per inch) are shipped from the factory with the fonts already set to display at a larger size, for readability. Your site will be broken on those computers.

    So it's not just vision-impaired folks or folks who deliberately increase their text size that you need to worry about. It's anyone using laptops, tablets, smartphones, etc.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    • Marked as answer by Keith Boulton Saturday, February 9, 2013 9:52 AM
    Thursday, February 7, 2013 12:32 PM
  • Heh, heh... in pure coincidence, I received a ZDNet bulletin yesterday with a link to an article about the Surface Pro. As a note, the Surface Pro display is what is called "Full HD," or 1920 x 1080 pixels. This is in a tablet screen that is only 10.6"! Take a look at this:

    What makes the Surface Pro different from other Windows 8 hybrids and Ultrabooks?

    The screen resolution is one obvious differentiator. Most devices in this size and price point (especially those with touchscreens) include 1366x768 screens. Windows 8 adapts the resolution of the Start screen and modern/Metro apps to keep tiles and fonts similar in size to those lower-resolution devices. On the desktop, the DPI is set by default to 150% of normal, making menus and onscreen fonts larger than they would normally appear at such a high resolution. The result is a much crisper display than you would expect.

    Now, I don't have a Surface Pro to test with, so I can't claim to know for certain, but that sure sounds like it's going to cause serious problems with sites who have not taken accessibility into account. This is the only direct quote I could find off-hand illustrating what Bill is describing, but I have personally helped a friend set up an Asus netbook which had its default DPI set to 120 from the standard 96, so I know from personal experience that manufacturers are, in fact, compensating for the extremely high pixel density of small, high-res displays by cranking up the stock DPI.

    So, Keith, this is not a paper tiger, but something that you definitely need to take into account when laying out your site. Whether you care about vision-impaired users or not, you have to account for the users of small, high-res displays that are proliferating with tablets, smartphones, ultrabooks, etc.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, February 7, 2013 7:04 PM
  • It isn't just the Surface. My new Sony came with 130% font setting as the default and my iPad is also a higher ppi.

    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Thursday, February 7, 2013 10:49 PM