7 Replies Latest reply on May 21, 2010 4:09 PM by lyrad789

    DW suddenly won't use css in the head of an HTML doc.

    lyrad789 Level 1

      If I use <a href="#"> for links created with a list, everything previews great. But as soon as I replace "#" with the path to the page I want the link to point to, all the css formatting vanishes when I preview with Safari (running under Apache). If I pull the links out and put the "#" back in, everything's fine.

       

      I've added the path in two ways: browse and click in DW and when that didn't work, I added the full path to root and that didn't work either. What I mean is that the link works and I can navigate to the next page, but the css formatting is gone even though it's written in the document head.

       

      Help!!!

        • 1. Re: DW suddenly won't use css in the head of an HTML doc.
          Nancy OShea Adobe Community Professional & MVP

          You'll need to show us your page if you want meaningful help.  Either post a URL to your live test page(s) or copy & paste your CSS and HTML code into a reply.  To paste code in these forums, usse the blue double arrows >> Syntax Highlighting > Plain.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: DW suddenly won't use css in the head of an HTML doc.
            lyrad789 Level 1

            OK, here it is. Div names haven't been changed from default because this is a test, trying to find out what's wrong. Some borders are included to help me see what's going on. Text div is over top of the image.  It all works great until real links are put in.

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            <!--
            
            
            /*DIV CONTAINING IMAGE*/
            #apDiv1 {
                 position:absolute;
                 left:6px;
                 top:5px;
                 width:187px;
                 height:490px;
                 z-index:10;
            }
            
            
            /*DIV CONTAINING TEXT*/
            #apDiv2 {
                 position:absolute;
                 left:15px;
                 top:108px;
                 width:169px;
                 height:260px;
                 z-index:12;
                 border: thin solid #06F;
            }
            
            
            /*TEXT CONTAINER*/
            .apDiv2test {
            }
            
            
            /*LIST STYLING*/
            .apDiv2text ul {
                 list-style:none;
                 margin:0px 0px 0px -25px;
                 width:auto;
            }
            .apDiv2text ul ul {
                 margin-left:-25px;
            }
            
            
            
            /*LINK STYLING*/
            .apDiv2text a:link {
                 font: 12px Arial, Helvetica, sans-serif;
                 color: #79A2C7;
                 text-decoration: none;
                 display: block;
                 padding-top: 7px;
                 padding-bottom: 7px;
                 padding-left: 20px;
                 border: thin solid #090;
            }
            .apDiv2text a:hover {
                 color:#FFF;
                 background: url(/Pyramid/images/left_nav_arrow.gif) no-repeat left;
            }
            #apDiv3 {
                 position:absolute;
                 left:264px;
                 top:20px;
                 width:407px;
                 height:543px;
                 z-index:13;
            }
            -->
            </style>
            </head>
            
            <body>
            
            <div id="apDiv1">
              <img src="/Pyramid/images/leftNavBkgd.gif" width="187" height="490" />
            </div>
            <div class="apDiv2text" id="apDiv2">
                 <ul>
                 <li><a href="#">home</a></li>
                 <li><a href="#">about</a></li>
                 <li><a href="#">in-home</a></li>
                 <li><a href="#">one-on-one</a></li>
                      <ul>
                      <li><a href="#">PHA training</a></li>
                      <li><a href="#">sports performance</a></li>
                      </ul>
                 <li><a href="#">contact us</a></li>
                 </ul>
            </div>
            
            </body>
            </html>
            
            
            • 3. Re: DW suddenly won't use css in the head of an HTML doc.
              Nancy OShea Adobe Community Professional & MVP

              1) APDivs are not needed for this at all.  Use the CSS background property on your container instead.

               

              Try copying and pasting this code into a new, blank HTML page and play with it.  It may be a little more than you wanted or not at all what you wanted, but it illustrates how to build a page from top down without APDivs.

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              <style type="text/css">
              
              /**zero out default browser settings on everything**/
              * {margin:0; padding:0; font-size: 100%; line-height: 100%}
              
              body {
              font: 1em Verdana, Arial, Helvetica, sans-serif;
              background: #CCC;}
              
              #wrapper {
                   width: 900px;
                   margin: 0 auto; /**centers page on screen**/
                   border: 1px solid red;
                   overflow: hidden;
                   background: #FFFFCC;
                   padding: 0;
              }
              
              #header {width: 100%; 
              min-height: 100px; /**any height req'd**/
              background: #336699;
              color:#FFF;
              }
              
              /*DIV CONTAINING LINKS*/
              #sidebar {
              color: #fff;
              margin-top:0px;
              width:169px;
              border: thin solid #06F;
              background: #666666 url(/Pyramid/images/leftNavBkgd.gif) no-repeat;
              float: left;
              }
              
              /*VERTICAL MENU*/
              #navbar ul, #navbar li{
              list-style: none;
              margin: 0;
              padding: 0;
              border: none;
              }
              
              /**SUBMENU**/
              #navbar ul li {margin-left: 18px; }
              
              /**LINKS**/
              #navbar li a {
              font-size: 12px;
              color: #79A2C7;
              text-decoration: none;
              display: block;
              width: 160px;
              letter-spacing: 1px;
              padding: 7px 0 7px 20px;
              border-bottom: thin solid #090;
              }
              html>body #navbar li a {width:auto; }
              
              #navbar li a:hover, 
              #navbar li a:active, 
              #navbar li a:focus {
              color:#FFF;
              background: url(/Pyramid/images/left_nav_arrow.gif) no-repeat left;
              }
              
              /**end MENU**/
              
              #mainContent {
              width: 700px;
              margin:0 0 0 172px;
              padding: 12px;
              background: #EAEAEA;
              }
              .clearing {clear: both; height: 0px; visibility: hidden;}
              
              #footer {
                   text-align:center;
                   background: #999;
                   color:#FFF;
                   margin: 0;
                   padding: 10px;
              }
              /**TEXT STYLES**/
              h1, h2, h3, h4, h5, p {
              margin-bottom: 0.50em; 
              line-height: 1.5em;
              }
              
              </style>
              </head>
              <body>
              <div id="wrapper">
              
              <div id="header">
              #Header -- some important text goes here
              </div>
              
              <div id="sidebar">
              <p>#Sidebar</p>
              <p>#navbar </p>
              
              <ul id="navbar">
              <li><a href="#">home</a></li>
              <li><a href="#">about</a></li>
              <li><a href="#">in-home</a></li>
              <li><a href="#">one-on-one</a><ul>
                             <li><a href="#">PHA training</a></li>
                             <li><a href="#">sports performance</a></li>
                             </ul></li>
              <li><a href="#">contact us</a></li>
              </ul>  <!--end navbar -->
              </div>  <!--end Sidebar -->
              
              <div id="mainContent">
              <h1>#mainContent</h1>
              <p>your content goes here</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a imperdiet elit? Suspendisse elit ligula, dictum non tincidunt quis, eleifend in nulla. Curabitur gravida condimentum lacinia. Suspendisse potenti. Curabitur nec libero id tortor laoreet sagittis non id justo. Quisque nisi nulla, commodo vel gravida vel, aliquet nec ligula. Fusce quis turpis eget felis hendrerit mollis suscipit vitae nulla. Donec ultrices, tellus sit amet rutrum fringilla, orci metus imperdiet orci, sit amet tempor ante diam bibendum nisl. Ut dictum ultricies tellus quis blandit? Etiam nec diam quis sem tempus condimentum. Aenean at odio elit.<br />
              </p>
              </div>  <!--end mainContent -->
              
              <!--IMPORTANT! clear floats after #mainContent with <p> <br> or <hr> tag -->
              <hr class="clearing" />
              
              <div id="footer">
              footer text goes here
              </div>  <!--end footer -->
              
              </div>  <!--end wrapper -->
              </body>
              </html>
              

               

               

              Good luck with your project!

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: DW suddenly won't use css in the head of an HTML doc.
                lyrad789 Level 1

                OK, I'll try that Nancy. Thank you. Will probably have to try it tomorrow, but I'll post back and let you know. It was just quicker for me to grab the AP div tool and draw out the boxes I needed. Not as good I'm sure, but quick and convenient. But if the AP is what was messing up the links, then it wasn't worth it.  Just remembered one odd thing: when I inserted the real links and previewed the file, everything looked fine. But whenever I clicked on one link, that link would lose it's connection to the stylesheet while the others looked OK. Eventually, as they were all clicked on, they all lost their connection.

                • 5. Re: DW suddenly won't use css in the head of an HTML doc.
                  lyrad789 Level 1

                  That worked!! Thank you!  Now I have to find out what part of my old css was causing the weird problem. As a learning experience so I won't repeat that mistake again.

                  • 6. Re: DW suddenly won't use css in the head of an HTML doc.
                    Nancy OShea Adobe Community Professional & MVP

                    It was caused by a combination of things.  Your UL and LI tags were not styled properly for all browsers and your submen HTML code was not nested correctly.  And of course the dreaded APDivs....

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    1 person found this helpful
                    • 7. Re: DW suddenly won't use css in the head of an HTML doc.
                      lyrad789 Level 1

                      Drat. A collection of greenhorn screwups. Well, I'll just keep at it and learning. Thank you again.