Solved

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

Posted on 2013-02-03
9
328 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
Increase your protection from Zero Day threats!

Running two Antivirus' is never a good idea.
Taking advantage of Multiple Security layers on the other hand can often save your hide.
See which top notch security software brands have been proven to happily coexist together.
Reduce your chances of becoming a statistic.

 

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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Internet Explorer 11.0 and Windows 7 - IE won't open or run 26 95
google exe file 5 216
DNS issues on a handful of websites, the rest load fine 9 35
Firefox and firebub 5 27
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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.
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.

738 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