Skip navigation
Currently Being Moderated

some help pls. Nav bar not displaying correctly in safari, but ok in test.

Feb 19, 2013 3:30 AM

Tags: #error #safari #dreamweaver #browser #preview #firefox #navigation #bar #nav #correctly #displaying

hi

 

Im fairly new to dreamweaver and still finding my way etc..

i have started building a new site. - http://www.amberroom-salon.co.uk/

 

When i upload the first page to the internet, safari 5 does not display the navigation bar correctly.

yet in firefox its fine.

it is also fine in safari when i preview in browser.

 

can any one suggest anything please?

I have tried checking the site on the web code check site thing, but there are a few errors which dont seem correct to me, ??

not sure why theyare there.

 

thanks

 
Replies
  • Currently Being Moderated
    Feb 19, 2013 5:16 AM   in reply to dares_uk30

    Looks ok to me in Safari Mac......what platform are you viewing the page on?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 12:48 PM   in reply to dares_uk30

    On Line 4 of your code change this:

     

    <!-- Meta http equivalent was here                                     -->

     

    To this:


    <!-- Meta http equivalent was here-->

     

    On line 15, change this:


             <nav class="navigation">

     

    to this:  (nav is not valid XHTML code, use div instead)

     

             <div class="navigation">

     

    On Line 16, change this:

     

    <h1><a href="/index.html"><br /><span class="amberroom">Amber Room</span></a>

                <p class="hairsalon">Hair Salon</p></a><h1>

     

    to this:

     

    <h1 class="amberroom"><a href="/index.html">Amber Room</a></h1>

                <p class="hairsalon"><a href="/index.html">Hair Salon</a></p>

     

    On line 25, change this:

     

    </nav>

     

    to this:


    </div>

     

     

    Next time things go wrong, check your code for errors.

     

    Code Validation Tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

     

    Nancy O.

     


     
    |
    Mark as:
  • Currently Being Moderated
    Feb 20, 2013 5:02 AM   in reply to dares_uk30

    The markup for the menu is not correct. Have a look at the markup that is correct as per

    <ul>

      <li><a href="/services" id="menu-services">Services</a> </li>

      <li><a href="/location" id="menu-location">Location</a> </li>

      <li><a href="/about" id="menu-about">About us</a></li>

      <li class="lastNavBox"><a href="/contact" id="menu-contact">Contact</a></li>

    </ul>

    After you have done that, you will have to add a few style rules for the font size.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 11:39 AM   in reply to dares_uk30

    You ignored my code changes above. 98% of page display problems are caused by code errors.  You need to reconcile the errors below to get good cross browser results.  <nav> is not a valid HTML tag.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.amberroom -salon.co.uk%2F

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 1:21 PM   in reply to dares_uk30

    <nav> is a new tag that is only valid in HTML5 documents.  In X/HTML docs it is not recognized.

     

    Change:  <nav class="navigation">

                    </nav>

     

    To:           <div class="navigation">

                    </div>

     

    A List of HTML Tags and the Doc Types that Support them:

    http://www.w3schools.com/tags/ref_html_dtd.asp

     

     

    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