Solved

Current Page Highlight works in Dreamweaver, but not in FF or IE

Posted on 2013-02-03
9
320 Views
Last Modified: 2013-02-04
I am using Adobe Dreamweaver (CS5.5) to build a site on my Windows 7 computer.
I am using pure CSS to create a current page highlighter. I have used the method in "CSS Mastery" by Andy Budd.

The method works fine in Dreamweaver when I look at the page in "Live View." However, when i preview the page in either FF or IE, the current page highlighter does not work. I have attached a zip file with the website. If you look at any of the "pages" intro.html, 1.html, ... 10.html, final.html in dreamweaver, you will see that the current page highlighter seem so work, but if you use F12 to view the pages in a browser, the current page highlighting does not show up.

Any help would be appreciated,

Thanks
Mark
sandbox.zip
0
Comment
Question by:karnac2020
  • 4
  • 4
9 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Frankly, if it doesn't work in FF or IE, then for all practical purposes, it doesn't work.  Sounds like just one more reason to not use Dreamweaver.  Are you talking about highlighting the nav links in the left column for the current page?
0
 

Author Comment

by:karnac2020
Comment Utility
Yes, I'm trying to get the nav links in the left hand column to  highlight the current page.
I think that Dreamweaver is just creating pretty standard HTML and CSS, so I am puzzled why it doesn't work.

Mark
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
In all those files that you posted, I don't see anything that will do that.  Where would I find it?
0
 

Author Comment

by:karnac2020
Comment Utility
Andy Budd's book: CSS Mastery.

Mark
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:karnac2020
Comment Utility
Dave,

It uses the standard pure CSS way of highlighting the current page. I will use the file 4.html as an example and include below the relevant parts:

HTML:

<body id="4">

<div id="mainwrap">

      <div id="outer" class="clearfix">
            <div id="inner">
                  <div id="header">
                          <!-- This is where the title of the Interactive Page goes -->
                10 Clear Thoughts&#8212;Just When You May Need Them Most
             </div>

                  <div id="contentarea" class="clearfix">
                        <div id="column1">
               
                              <div id="navlist">
                        <ul>
                        <!-- Here is where you put the left-hand navigation link titles -->
                       
                            <li><a href="intro.html" id="intronav">Introduction</a></li>
                           
                            <li><a href="1.html" id="1nav">1.
                            <div class="linkformat">
                            You'll either win together or lose together.</div></a></li>
                           
                            <li><a href="2.html" id="2nav">2.
                            <div class="linkformat">
                            Protecting your children can be your light out.</div></a></li>
                           
                            <li><a href="3.html" id="3nav">3.
                            <div class="linkformat">
                            You and your co-parent need a plan.</div></a></li>
                           
                            <li><a  href="4.html" id="4nav">4.
                            <div class="linkformat">
                            Consider if divorce is right for you.</div></a></li>
                           
                            <li><a href="5.html" id="5nav">5.
                            <div class="linkformat">
                            Parent conflict is gravely dangerous to children.</div></a></li>
                           
                            <li><a href="6.html" id="6nav">6.
                            <div class="linkformat">
                            Almost always, children need both parents.</div></a></li>
                           
                            <li><a href="7.html" id="7nav">7.
                            <div class="linkformat">
                            Simple courtesy is often the real answer.</div></a></li>
                           
                            <li><a href="8.html" id="8nav">8.
                            <div class="linkformat">
                            Legal battles almost never help.</div></a></li>
                           
                            <li><a href="9.html" id="9nav">9.
                            <div class="linkformat">
                            Use counseling and other help.</div></a></li>
                           
                            <li><a href="10.html" id="10nav">10.
                            <div class="linkformat">
                            Be careful where you get your advice.</div></a></li>
                           
                            <li><a href="final.html" id="finalnav">A final thought</a></li>
                           
                          </ul>
                                </div>

CSS:
body#intro #navlist li a#intronav,
body#1 #mainwrap #navlist li a#1nav,
body#2 #mainwrap #navlist li a#2nav,
body#3 #mainwrap #navlist li a#3nav,
body#4 #mainwrap #navlist li a#4nav,
body#5 #mainwrap #navlist li a#5nav,
body#6 #mainwrap #navlist li a#6nav,
body#7 #mainwrap #navlist li a#7nav,
body#8 #mainwrap #navlist li a#8nav,
body#9 #mainwrap #navlist li a#9nav,
body#10 #mainwrap #navlist li a#10nav,
body#final #mainwrap #navlist li a#finalnav {
      color: #cecfce;
      color:green;
      background #943d19;
}

To be a little more clear - When I view the page 4.html) in Dreamweaver in Design or Split  view, the nav link for page 4, DOES light up. However, when I go to "Live View" or view the page in a browser, the highlighting disappears.

Mark
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
You are wrapping a <div> with an <a> tag in the menus which is valid HTML5 but the browsers may be going into quirks mode anyway.  I would have to test this by loading the whole thing to a server and letting the W3C validator have a shot at it, which will take me a while.

Have you tried changing those divs to spans to see if the browsers start behaving better?
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
Your CSS above causes an error in Firefox.

Timestamp: 2/4/2013 9:49:24 AM
Warning: Expected ',' or '{' but found '#1'.  Ruleset ignored due to bad selector.
Source File: http://10.202.46.40/ee/sandbox/includes/main1.css
Line: 15

This is line 15:
body#1 #mainwrap #navlist li a#1nav,

I don't know which #1 it is complaining about.
0
 

Author Comment

by:karnac2020
Comment Utility
Dave,

I figured it out. CSS does not allow id and div names to start with a number. So, #1, #1nav, etc., won't work. I changed them to #Page1,  #Nav1, etc., and it worked fine. Thanks for taking time to look at it though.

Mark
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Glad you figured it out (I had forgotten about starting with numbers because I just don't do it) and thanks for the points.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now