Skip navigation
dares_uk30
dares_uk30 Calculating status...
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

748 Views   13 Replies   Latest reply: Nancy O., Feb 22, 2013 1:21 PM
 
Replies
  • dares_uk30
    Currently Being Moderated
    1. dares_uk30,
    Feb 19, 2013 5:05 AM   in reply to dares_uk30
    Report

    i have now realised that if i click on a blank link, and then press the back button in the browser the navigation bar displays correctly.

     

    ??

     

    DOES THAT HELP ANY ONE TO EXPLAIN IT ?

     

    Thanks

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    2. osgood_,
    Feb 19, 2013 5:16 AM   in reply to dares_uk30
    Report

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

     
    |
    Mark as:
  • dares_uk30
    Currently Being Moderated
    3. dares_uk30,
    Feb 19, 2013 6:02 AM   in reply to osgood_
    Report

    Safari 5.1.7

     

    mac 10.6.8

     

    like i said works fine in firefox, in safari when i preview it via dreamweaver.

    When i refresh / newly load the page it puts the nav bar vertically instead of horizontally.

    but if i click on a black link then press the back button it works fine. :s

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Feb 19, 2013 12:48 PM   in reply to dares_uk30
    Report

    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:
  • dares_uk30
    Currently Being Moderated
    5. dares_uk30,
    Feb 19, 2013 8:31 PM   in reply to Nancy O.
    Report

    thanks i will give that a try,

    like i said, i had tried the validators,

    but i couldnt understand them really,

     

    thanks

     
    |
    Mark as:
  • dares_uk30
    Currently Being Moderated
    6. dares_uk30,
    Feb 19, 2013 8:35 PM   in reply to Nancy O.
    Report

    Sorry, that didnt work.

    Made things worse, now reverted back to old code.

    because i change the nav to a div, im guessing i might need to amend the css too right?

    thanks

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Feb 20, 2013 5:02 AM   in reply to dares_uk30
    Report

    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:
  • dares_uk30
    Currently Being Moderated
    8. dares_uk30,
    Feb 22, 2013 8:35 AM   in reply to Ben Pleysier
    Report

    that has fixed the problems in chrome, IE8 % Safari 5.1.

    but now it is just the text of the nav bar that is clickable.

    previsouly it was the whole box.

    is is possible to have the whole box clickable still ??

     

    many thanks

     
    |
    Mark as:
  • dares_uk30
    Currently Being Moderated
    9. dares_uk30,
    Feb 22, 2013 11:18 AM   in reply to dares_uk30
    Report

    Apart from the styling, seems to be workingon my pc now,

    although its still not working on a netbook with IE 8, ??

    maybe to do with the screen resolution as its quite small.

    Is there a auto reduce fetaure maybe??

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    Feb 22, 2013 11:39 AM   in reply to dares_uk30
    Report

    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:
  • dares_uk30
    Currently Being Moderated
    11. dares_uk30,
    Feb 22, 2013 1:08 PM   in reply to Nancy O.
    Report

    ok, im sorry, but why is nav not a valid html code?

    what foes in its place?

    why have i seen it on another site? and it works fine ?

     
    |
    Mark as:
  • dares_uk30
    Currently Being Moderated
    12. dares_uk30,
    Feb 22, 2013 1:20 PM   in reply to dares_uk30
    Report

    when your code corrections where implemented the nav bar was all a mess, small lettering, down the side of the screen under neath the top bar.

    the top bar was not at the top either. code was reverted back.

    like i said, it works on another site.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    13. Nancy O.,
    Feb 22, 2013 1:21 PM   in reply to dares_uk30
    Report

    <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:
Actions

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