Skip navigation
Currently Being Moderated

Horizontal Spry Menu Width Browser Problem

Apr 9, 2013 10:21 PM

I am working in Dreamweaver CS5.5 (mac). I inserted a horizontal spry menu bar within a 900px container. I have six "tabs" going across. When I preview it in Safari, it looks fine. But when I view it in Firefox, it pushes the last tab on to the next line on the left side (aligned with the first tab above). The individual tabs are set to 9.4em and the width of the spry horizontal menu bar itself is set to 900px.


But when I change the width of the spry menu bar from px to em (in both the "box" and "positioning"), it finally fits all on one line in Firefox, however the last tab is slight outside the right edge of the container.


Any ideas how to fix it?

  • Currently Being Moderated
    Apr 9, 2013 10:42 PM   in reply to ZenDao

    Hi ZenDao,


    Could you post  your CSS code here for the experts to help you better?




    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 9, 2013 10:55 PM   in reply to ZenDao

    Margin & Padding can kill you sometimes!


    Put your files on a webserver and give us a link so we can troubleshoot.


    On a sidenote, Spry has been deprecated and will no longer be officially supported or developed by Adobe: ork-availability.html

    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 3:01 PM   in reply to ZenDao

    Are you a Cloud member?  Cloud comes with Business Catalyst hosting.



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 10:43 PM   in reply to ZenDao

    Try adding

    ul.MenuBarHorizontal li {width: 16.66666%;}

    This is 16.66666 x 6 = 100%

    Mark as:
  • Currently Being Moderated
    Apr 25, 2013 10:49 AM   in reply to ZenDao

    Building web page layouts has about as much in common with print design (InDesign and Photoshop) as Elephants have to tea leaves.  Nothing close because print is static & unchanging.  Web pages must be flexible to accommodate various devices/browser settings and display/text sizes which the end user controls.


    DW requires you to understand basic web design theory & coding fundamentals.  If you don't,  you won't have good cross browser results.


    Position:absolute, no.  You don't need positioning.  It's better if you don't use it because it removes content from the normal document flow.  Your copyright info belongs inside your <footer> div; not at the top of your page.


    clip: rect(0px,auto,auto,auto);

    This rule serves no purpose.  I don't know why you included it.


    Re-work your layout without positioning.  Put information in a logical sequence from page top <header> to bottom <footer>.  I highly recommend you use Split View with Live View instead of Design View.  Design View is not 100% reliable.



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points