Solved

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

Posted on 2013-02-03
9
332 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
[X]
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
9 Comments
 
LVL 83

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?
0
 

Author Comment

by:karnac2020
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.

Mark
0
 
LVL 83

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?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

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

Mark
0
 

Author Comment

by:karnac2020
ID: 38850905
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
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?
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 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: 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
ID: 38852215
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 83

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

Featured Post

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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 +…

630 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