Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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

Posted on 2013-02-03
Medium Priority
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,

Question by:karnac2020
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38849904
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?

Author Comment

ID: 38849920
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.

LVL 84

Expert Comment

by:Dave Baldwin
ID: 38849998
In all those files that you posted, I don't see anything that will do that.  Where would I find it?
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button


Author Comment

ID: 38850871
Andy Budd's book: CSS Mastery.


Author Comment

ID: 38850905

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:


<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 id="contentarea" class="clearfix">
                        <div id="column1">
                              <div id="navlist">
                        <!-- 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>

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;
      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.

LVL 70

Expert Comment

by:Jason C. Levine
ID: 38851871
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?
LVL 84

Accepted Solution

Dave Baldwin earned 1500 total points
ID: 38851880
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:
Line: 15

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

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

Author Comment

ID: 38852215

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.

LVL 84

Expert Comment

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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 nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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 whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

715 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