29 Replies Latest reply on Jan 17, 2011 10:25 AM by osgood_

    CS4 Display Issues

    rorygirl

      I'm creating a new website using CSS in CS4 and the site displays perfectly in

      Design View and Live View but when I view it online using my testing server

      it's a mess! All the formatting is gone. I uploaded the entire site again to the

      testing server just to make sure and it's still not displaying correctly.

      I'm not sure what I should be looking for at this point. Any help would be

      appreciated.

        • 1. Re: CS4 Display Issues
          Ben M Adobe Community Professional

          Can we see a link to the page in question?

          • 2. Re: CS4 Display Issues
            rorygirl Level 1

            Here's the link: http://www.bigcowmusic.com/bigcowstudios/music.html

            Below is a screen shot of the site in "Live View"

             

            Live View.png

            • 3. Re: CS4 Display Issues
              Ben M Adobe Community Professional

              2 problems.

               

              1.  The doctype is not written properly.  The <html> tag should be written as:

               

              <html xmlns="http://www.w3.org/1999/xhtml">

               

              That will make it a valid XHTML document.  That alone could throw browsers into a quirks mode where it guesses because it doesn't know the standard which it should render the page with.

               

              2.  The CSS file that is linked begins with: "file:///".  That should be a relative link and not something on your hard drive (eg: relative --> /folder/file.css instead of file:///hard drive/folder/file.css).  Make sure that when you include the CSS document that is is within your site and that it is uploaded with the rest of the site.

               

              Fix those two issues and you should be good to go.

              • 4. Re: CS4 Display Issues
                rorygirl Level 1

                I relinked the style sheet and everything's displaying correctly now.

                Thanks so much for your help!

                • 5. Re: CS4 Display Issues
                  rorygirl Level 1

                  I spoke to soon. Now I'm getting 3 different results.

                  My design view looks fine

                  In my Live View things move around a bit

                  And online through my testing server I get

                  a completely different result. I've also updated

                  all the files again. The first is design then live view, then online.

                   

                  design view.png

                   

                   

                   

                   

                  live view.png

                   

                  testing server.png

                  • 6. Re: CS4 Display Issues
                    MurraySummers Level 8

                    Fix your code -

                     

                    http://validator.w3.org/unicorn/check?ucn_uri=http://www.bigcowmusic.com/bigcowstudios/mus ic.html&ucn_task=conformance

                     

                    Fix your links -

                     

                                 <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/index.html"><span class="nav_head">design</span></a></li>

                     

                    Then you should get more uniformity in the display.

                    • 7. Re: CS4 Display Issues
                      Ben M Adobe Community Professional

                      I think you may have misinterpreted my last comment.  You almost fixed the <html> tag issue.  You added a line as I suggested, but you left the "<html>" in your code which is invalid and needs to be deleted and removed your own doctype declaration for XHTML 1.1.

                       

                      The first two lines of your code should read:

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      

                       

                      And delete that plain "<html>" from your code.

                       

                      You seemed to have fixed the CSS linked file issue, but as Murray points out there are links on your page to other pages which are pointing to files on your hard drive.  When you create a link (on text, image, etc) it should go to 1 of 2 places:

                       

                      1.  A file within the Dreamweaver defined site

                      2.  Another website address (eg: http://somedomain.com/somefile.html)

                       

                      Currently all the links that you created in your menu go to files on your hard drive which will help no one visiting your website.

                      • 8. Re: CS4 Display Issues
                        rorygirl Level 1

                        Thanks SnakEyez02.

                         

                        Previously when I've created websites I used tables, which

                        I got to know pretty well. This time around I decided to use

                        a template I found online which had a lot of unneccessary

                        code which I really haven't dealt with much. I'm just learning

                        CSS as well so this has been a challenge. I appreciate

                        your help.

                         

                        While I have your attention, I have not been able to delete the

                        underlines associated with the links in my body copy. All of

                        the styles indicate no underline as well as the page properties.

                        It seems to be imbedded somewhere and I just can't find where.

                        • 9. Re: CS4 Display Issues
                          MurraySummers Level 8

                          Change these -

                           

                          A

                          {

                              color: #CCF0C1;

                              text-decoration: none;

                              border-bottom: 2px solid #E9F9E5;

                          }

                           

                          A:HOVER

                          {

                              color: #657860;

                              text-decoration: none;

                              border-bottom: 2px solid #DDF5D6;

                              background-color: #CCF0C1;

                          }

                          to this -
                          A
                          {
                              color: #CCF0C1;
                              text-decoration: none;
                          }
                          A:HOVER
                          {
                              color: #657860;
                              text-decoration: none;
                              background-color: #CCF0C1;
                          }
                          What you are seeing as underlines is actually that 2px wide bottom border.

                          • 10. Re: CS4 Display Issues
                            Ben M Adobe Community Professional

                            rorygirl wrote:

                             

                            While I have your attention, I have not been able to delete the

                            underlines associated with the links in my body copy. All of

                            the styles indicate no underline as well as the page properties.

                            It seems to be imbedded somewhere and I just can't find where.

                             

                            It wasn't actually written as an underline.  So if you were looking for "text-decoration: underline;" you would not have found.  The template you have seems to have done this using the "border-bottom" attribute.  Delete those borders from the "a" links in your CSS document and you will be good to go.

                            • 11. Re: CS4 Display Issues
                              rorygirl Level 1

                              Thank you both! I'm still having display issues regarding

                              my left nav area which in the layout looks fine but

                              in the Live and online views it's not in position.

                              (See attached)

                              Picture 1.png

                              Okay, one more question on adding links and I

                              promise I'll leave you alone (at least for a few hours).

                               

                              As I mentioned I'm new to CS4 and CSS since I've been

                              using Dreamweaver 8 and tables for a long time and selecting

                              hyperlinks to the other pages in my site was a little easier.

                               

                              Now, when I select one of my main nav items "Design, Theatre,

                              etc" and add a hyperlink: http://www.bigcowstudios.com/design, the

                              type size is reduced to about 8 point. Am I not going

                              about this the right way?

                              • 12. Re: CS4 Display Issues
                                MurraySummers Level 8

                                As soon as you make regular text into a hyperlink, the styles specified for hyperlinks take over.  If you are seeing things change after making the text a hyperlink, look in your stylesheet for the anchor pseudo-class rules, e.g., a:link | a:visited | a:hover | a:focus | a:active.

                                • 13. Re: CS4 Display Issues
                                  rorygirl Level 1

                                  I checked my code and didn't see anything that would make the type reduce that much in size"

                                   

                                   

                                  a:link {

                                  text-decoration: none;

                                  }

                                  a:visited {

                                  text-decoration: none;

                                  }

                                  a:hover {

                                  text-decoration: none;

                                  }

                                  a:active {

                                  text-decoration: none;

                                  }

                                  body {

                                  background-repeat: repeat-y;

                                  background-image: url(Linked%20%20Art/background515.gif);

                                  background-color: #30373b;

                                  }

                                  -->

                                  </style>

                                  <link href="style.css" rel="stylesheet" type="text/css">

                                  <style type="text/css">

                                  <!--

                                  .style16 {font-family: Arial, Helvetica, sans-serif;

                                  font-size: 12px;

                                  }

                                  .style3 {font-size: 12px

                                  }

                                  .style9 {

                                  font-size: 24px;

                                  font-family: Arial, Helvetica, sans-serif;

                                  • 14. Re: CS4 Display Issues
                                    rorygirl Level 1

                                    This is the response I received regarding why my nav type changes size once I apply a hyperlink:

                                     

                                    1. You created the larger type for the menus by applying the class nav_head to a span.


                                    2. When you added the link you wiped out the span so the text size reverts to the text size you set in the body rule: 65% (or about 10 pixels).


                                    3. you should get rid of the span and apply your rules directly to the <a> tag. Either by applying the class nav_head to them or by writing a new rule


                                    #nav a


                                    that will apply only to links within the object with id=nav.


                                     

                                    Can someone walk me through how to set up the new rule to only apply to links within id=nav?

                                     

                                    http://www.bigcowmusic.com/bigcowstudios/music.html

                                    • 15. Re: CS4 Display Issues
                                      osgood_ Level 8

                                      Personally IF you are a beginner I'd steer clear of using % to declare your fonts because it can become confusing. Use px instead as its much easier to understand.

                                       

                                      IF you do want to use % then I'd set the body font-size to 100% and work up or down in % from that point.

                                       

                                      At the moment you have the body set at 65% (see below)

                                       

                                      BODY
                                      {
                                          text-align: center;
                                          margin: 0 0;
                                          font-family: Arial, Helvetica, sans-serif;
                                          font-size: 65%;
                                          text-decoration: none;
                                          background-color: #3a4247;
                                          background-image: url(Linked%20%20Art/background600.gif);
                                          background-repeat: repeat-y;
                                          background-position: left top;
                                      }

                                       

                                      Therefore if you want the nav text to be larger than the body text you need to set the font-size at 150% (or whatever you require). If you set it at 100% it will be only be the same size as the body 65%. (That's where it becomes confusing)

                                       

                                      #nav a
                                      {
                                      padding: 15px 10px 8px 10px;
                                      text-decoration: none;
                                      border: none;
                                      font-size: 150%;
                                      }

                                       

                                       

                                      That's why I'd set the body at 100%.

                                       

                                      Then if you want the nav font-size to be a little larger its much easier to equate, you set the nav font-size at 130% (or whatever)

                                       

                                      #nav a
                                      {
                                      padding: 15px 10px 8px 10px;
                                      text-decoration: none;
                                      border: none;
                                      font-size: 130%;
                                      }

                                       

                                      If you want the nav font-size smaller you set it at something below 100%, like 80% (see below)

                                       

                                      #nav a
                                      {
                                      padding: 15px 10px 8px 10px;
                                      text-decoration: none;
                                      border: none;
                                        font-size: 80%;
                                      }

                                       

                                      Also you're not helping issues using pt to declare your 'content' text. (see below) Pt is for printed material not the web. Change it to whatever you decide to use as your unit of measurement %, px or em.

                                       

                                      .content
                                      {
                                          padding: 0 0 5px 0;
                                          color: #FFF;
                                          text-decoration: none;
                                          font-family: Arial, Helvetica, sans-serif;
                                      font-size: 9pt;
                                          line-height: 18px;
                                          border-bottom-width: 1px;
                                          border-bottom-style: none;
                                          border-bottom-color: #9AA3A8;
                                      }

                                       

                                      You don't need the <span></span> tags around your links, Just set them as below:

                                       

                                      <li><a href="http://bigcowmusic.com/bigcowstudios/design.html">design</a></li>
                                      <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/about.html">writing</a></li>
                                      <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/weblog.html">music</a></li>

                                      <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/contact.html">theatre</span></a></li>

                                       

                                       

                                      Also please note all of your links are pointing back to your computer. When you upload your page to the web they will not work.

                                       

                                      I assume you have set up a site root folder and defined it in Dreamweaver at the outset of your project? If so then you should correct the links to point to the files in your site root folder.

                                      • 16. Re: CS4 Display Issues
                                        rorygirl Level 1

                                        Thanks for the help. I didn't set up the original doc, it was a template

                                        and it's been a challenge modifying it as I've been working with tables

                                        for years and decided to update my site using CSS which I don't have

                                        much experience with. Also, I realize my links are pointing back

                                        to my HD—I haven't set all of them up yet.

                                         

                                        Anyway, I wasn't clear on why font sizes were set up with pt or % as

                                        I've always used px. So if I go back to all my rules and set up the

                                        sizes with px, I should be okay?

                                        • 17. Re: CS4 Display Issues
                                          osgood_ Level 8

                                          rorygirl wrote:

                                          Anyway, I wasn't clear on why font sizes were set up with pt or % as

                                          I've always used px. So if I go back to all my rules and set up the

                                          sizes with px, I should be okay?

                                           

                                          Yes, it will be a lot easier for you at this stage of your css development.

                                          • 18. Re: CS4 Display Issues
                                            rorygirl Level 1

                                            Okay. Made the changes and things are getting better except for one thing.

                                            If you check out the nav section, the hover over design, theatre, writing and music

                                            should look like the hover over {big cow studios}. I can't figure out why it's not

                                            behaving the same way.

                                            • 19. Re: CS4 Display Issues
                                              osgood_ Level 8

                                              Amend your 'nav a' to as below:

                                               

                                              #nav a
                                              {
                                              padding: 15px 10px 8px 10px;
                                              text-decoration: none;
                                              font-size: 24px;
                                              border: none;
                                              color: #CCF0C1;
                                              }

                                               

                                              Amend the code below:

                                                <ul class="nav_head">
                                              <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/index.html"><span class="nav_head">{big cow studios}</span></a></li>

                                               

                                              To this (see below - removed class name on <ul> tag and <span></span> around {big cow studios}

                                               

                                              <ul>
                                                <li><a href="file:///Glenn's HD/Users/Big Cow/Desktop/feng_shui/index.html">{big cow studios}</a></li>

                                               

                                               

                                              Finally delete this css selector from your css styles as you don't need it:

                                               

                                              .nav_head
                                              {
                                                  font-family: Arial, Helvetica, sans-serif;
                                                  font-size: 24px;
                                                  text-decoration: none;
                                                  font-variant: normal;
                                                  color: #CCF0C1;
                                              }

                                               

                                              Also please change the font size in your 'content' css from 9pt to say 12px.

                                              • 20. Re: CS4 Display Issues
                                                rorygirl Level 1

                                                Followed your instructions and got this:

                                                 

                                                http://www.bigcowmusic.com/bigcowstudios/music.html

                                                • 21. Re: CS4 Display Issues
                                                  osgood_ Level 8

                                                  But you have not change your 'nav a' css as instructed in my previous post:

                                                   

                                                  Amend this:

                                                   

                                                  #nav a
                                                  {
                                                      padding: 15px 10px 8px 10px;
                                                      text-decoration: none;
                                                      border: none;
                                                  }

                                                   

                                                   

                                                  To this:

                                                   

                                                  #nav a
                                                  {
                                                  padding: 15px 10px 8px 10px;
                                                  text-decoration: none;
                                                  font-size: 24px;
                                                  border: none;
                                                  color: #CCF0C1;
                                                  }

                                                   

                                                   

                                                  Neither have you amended your font-size to 12px in the content css as instructed.

                                                   

                                                  .content
                                                  {
                                                      padding: 0 0 5px 0;
                                                      color: #FFF;
                                                      text-decoration: none;
                                                      font-family: Arial, Helvetica, sans-serif;
                                                      font-size: 9pt;
                                                      line-height: 18px;
                                                      border-bottom-width: 1px;
                                                      border-bottom-style: none;
                                                      border-bottom-color: #9AA3A8;
                                                  }

                                                   

                                                  Can you do that and see what happens please?

                                                  • 22. Re: CS4 Display Issues
                                                    rorygirl Level 1

                                                    I did make all the changes you requested! Is the internet not catching

                                                    up with the uploads to my server?

                                                     

                                                    Yes. That's what is happening. I checked the times on my local updates

                                                    vs. my testing server and the testing server still says 11:08 am, even

                                                    though I'm updating every minute.

                                                     

                                                    I'm dragging the files directly to my ftp site and they are updating.

                                                    Please check the site now.

                                                     

                                                    I'm also only uploading the music.html page right now.

                                                    • 23. Re: CS4 Display Issues
                                                      osgood_ Level 8

                                                      rorygirl wrote:

                                                       

                                                      I did make all the changes you requested! Is the internet not catching

                                                      up with the uploads to my server?

                                                       

                                                      I'm dragging the files directly to my ftp site and they are updating.

                                                      Please check the site now.

                                                       

                                                       

                                                      No, your server still shows the old css file.

                                                       

                                                      However, this should be of no concern because if you made the changes to the css file you will see them locally in Dreamweaver. If you are not then you haven't made the changes?

                                                      • 24. Re: CS4 Display Issues
                                                        rorygirl Level 1

                                                        Locally everything looks fine in my design and live view in Dreamweaver

                                                        except the background color for the hover should be the same background as the

                                                        right column color.

                                                         

                                                         

                                                         

                                                        The latest style.css file is on my testing server as of 11:27 am

                                                        • 25. Re: CS4 Display Issues
                                                          osgood_ Level 8

                                                          Change the background-color to match that of your right column, Currently (see below) it matches the background color of your page background.

                                                           

                                                          #nav a:hover
                                                          {
                                                              border: none;
                                                              padding: 15px 10px 8px 10px;
                                                              background-color: #3a4247;
                                                              text-decoration: none;
                                                              border-top: 1px solid #4f585e;
                                                              border-bottom: 1px solid #4f585e;
                                                              border-left: 1px solid #4f585e;
                                                              font-size: 24px;
                                                          }

                                                          • 26. Re: CS4 Display Issues
                                                            rorygirl Level 1

                                                            Yes, thanks. Made the color change and everything displays fine

                                                            in Design and Live View but not online. Not sure why at this point.

                                                            • 27. Re: CS4 Display Issues
                                                              osgood_ Level 8

                                                              rorygirl wrote:

                                                               

                                                              Yes, thanks. Made the color change and everything displays fine

                                                              in Design and Live View but not online. Not sure why at this point.

                                                               

                                                              Your html page updates so there is no reason why your amended css file should not IF you're uploading it to overwrite the old one.

                                                              • 28. Re: CS4 Display Issues
                                                                rorygirl Level 1

                                                                The online version finally updated and things are looking good.

                                                                I'm not sure why there was such a delay. Anyway, now that

                                                                the basic layout issues are resolved (thanks to you) I can

                                                                continue to build my pages.

                                                                 

                                                                Thank you so much for your assistance. It's been educational.

                                                                Can I take you out for a beer?

                                                                • 29. Re: CS4 Display Issues
                                                                  osgood_ Level 8

                                                                  rorygirl wrote:


                                                                  Can I take you out for a beer?

                                                                   

                                                                  Burlington US? Sounds kinda nice.

                                                                   

                                                                  Maybe next time you're in London.

                                                                   

                                                                  I'm having my pint of virtual beer now, thanks, much appreciated, now that was good