5 Replies Latest reply on May 23, 2010 4:58 AM by jxlusa

    Text size changes on whole page when changed in table.

    69Pisces Level 1

      When I change the text size of text in a table, the text size of all text changes as well.

      It seems that this is linked to the container css, but I can not find out where to change this.

      Hope anyone can give me a clue.

       

      This is the HTML code:

       

      <!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"><!-- InstanceBegin template="/Templates/Noorderzon.dwt" codeOutsideHTMLIsLocked="false" -->
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="file:///C|/Documents and Settings/Me/Mijn documenten/Websites/Noorderzon/css/Noorderzon.css" rel="stylesheet" type="text/css" />
      <META name=GENERATOR content="MSHTML 8.00.6001.18904"><title>Schudden fansite</title><style type="text/css">
      <!--
      a:link {
      color: #000;
      font-style: italic;
      font-weight: bold;
      }
      a:visited {
      color: #369;
      }
      a:hover {
      color: #800000;
      }
      a:active {
      color: #369;
      }
      -->
      </style></HEAD>
      <BODY>
      <DIV id=header></DIV>
      <!--end header -->
      <!--begin content -->
      <DIV id=nav></div>
      <DIV id=content>
        <p> </p>
        <p> </p>
        <p> </p>
        <!-- InstanceBeginEditable name="Content" -->
        <table width="700" border="0" align="center" cellpadding="0" id="nieuwsarchief">
        <tr>
        <td width="700"><h1>2010</h1></td>
        </tr>
         <tr class="nieuwstablecontent">
         <td class="centerpink"><p><a href="nieuwsarchief.html">Nieuwsarchief</a></p>
         <p> </p></td>
          </tr>
        </table>
        <!-- InstanceEndEditable -->
      </DIV>
      <!--end content -->
      <!--begin footer --><DIV id=footer></DIV><!--end footer -->
      <H3>
        <!--end document -->
      </H3>
      </BODY><!-- InstanceEnd --></HTML>

       

      and this is the CSS code:

       

      * {
      BORDER-BOTTOM: 0px;
      BORDER-LEFT: 0px;
      LINE-HEIGHT: normal;
      BORDER-TOP: 0px;
      BORDER-RIGHT: 0px;
      font-weight: normal;
      padding: 0px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      font-size: 8pt;
      text-align: center;
      width: 960px;
      }
      BODY {
      MARGIN-BOTTOM: 1px;
      HEIGHT: 100%;
      FONT-SIZE: 10pt
      }
      BODY {
      MIN-WIDTH: 770px;
      TEXT-ALIGN: center;
      WIDTH: 100%;
      FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
      background-color: #800000;
      }
      #header {
      LINE-HEIGHT: 0;
      COLOR: white;
      FONT-WEIGHT: bold;
      width: 960px;
      margin-right: auto;
      margin-left: auto;
      background-color: #040404;
      background-image: url(../../Schudden/images/header.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      padding: 0px;
      height: 160px;
      }
      #content {
      WIDTH: 960px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
      background-color: #e5e5e5;
      background-image: url(../../Schudden/images/mainbg.jpg);
      }
      #footer {
      WIDTH: 100%;
      COLOR: #ffffff;
      FONT-WEIGHT: bold;
      background-image: url(../images/bottom.png);
      position: fixed;
      visibility: visible;
      z-index: 99;
      bottom: 0px;
      height: 100px;
      background-repeat: repeat-x;
      }


      #nav {
      text-align:center;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:10pt;
      color:#000;
      font-weight:700;
      text-decoration:none;
      background-color: #fff;
      background-repeat: repeat;
      width: 960px;
      margin-right: auto;
      margin-left: auto;
      padding-top: 9px;
      padding-bottom: 10px;
      background-image: url(../../Schudden/images/mainbg.jpg);
      }

      #nav a {
      background:#fff;
      color:#000;
      text-decoration: none;
      }

      #nav a:active {
      background:#fff;
      color:#800000;
      }

      #nav a:hover {
      color:#000;
      font-size:10pt;
      padding-bottom:4px;
      border-bottom-style: dotted;
      border-bottom-color: #800000;
      border-bottom-width: 3px;
      }
      </STYLE>
      #content {
      font-size: 10pt;
      }
      .subtext {
      font-size: 9px;
      color: #800000;
      }
      .subtitle {
      font-weight: normal;
      color: #800000;
      font-size: 9pt;
      }

        • 1. Re: Text size changes on whole page when changed in table.
          Nancy OShea Adobe Community Professional & MVP

          You have an external stylesheet in your Documents folder called Noorderzon.css

           

          <link href="

          file:///C|/Documents and Settings/Me/Mijn documenten/Websites/Noorderzon/css/Noorderzon.css" rel="stylesheet" type="text/css" />

           

          Did you build this page in Microsoft Word and then save it as HTML?

           

          <META name=GENERATOR content="MSHTML 8.00.6001.18904">

           

          MS Word formatting code doesn't always play nice with HTML editors.  If you must copy & paste content from Word or any other MS Office application into DW, use   Edit > Paste Special > Text Only.

           

           

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

          • 2. Re: Text size changes on whole page when changed in table.
            jxlusa Level 2

            You have no styles defined that would apply to only the table.

             

            Add something that affects only the table, like maybe one of the following, depending on what you want to do:

             

            /* will affect all tables unless otherwise specified */

            table {

            font-size: 1.6em;

            }

             

            /* will affect only tables with this id */

            #nieuwsarchief {

            font-size: 1.6em;

            }

             

            /* will affect the table row that has this class */

            .nieuwstablecontent {

            font-size: 1.6em;

            }

             

            /* will affect the ttable cell that has this class */

            .centerpink {

            font-size: 1.6em;

            }

             

            use whatever font size, colors, or other rules you want.

             

            Other things that come to mind:

            • Body is in there twice, so is #content. You should consoladate  those so you can find your rules more easily.
            • Why are the link rules defined in your template while verything else in in the external stylesheet? They probably should all be in the external stylesheet.
            • There is a closing </STYLE> tag in the middle of the css you posted. If it exists in the external stylesheet, it's an error.
            • the link to your stylesheet is given as a file path in the html. Usually this means that either you have not saved the document yet (unlikely in this case.) or that the stylesheet is outside the defined site set-up. Either way, this needs to be fixed before your site will work online.
            • XHTML only allows lowercase tags. You should change them all to lower case rather than the odd mix you have now.
            • 3. Re: Text size changes on whole page when changed in table.
              69Pisces Level 1

              No , I didn't build the page in Word.  (wasn't even aware of that option)

              I based this page on another site.

              What should I change in that code, so that it works?

              • 4. Re: Text size changes on whole page when changed in table.
                69Pisces Level 1

                Mmm, it seems my whole page is a mess. I'd better start from scratch. Hopefully

                I'll get it working the way I want to.

                Thanks for your help.

                • 5. Re: Text size changes on whole page when changed in table.
                  jxlusa Level 2

                  It's not so bad compared to a lot of what is on the web, but I agree. It's probably better to start from scratch than to try and figure out the errors of someone else's bad code. I'd much rather try and figure out the errors in my own code. That way at least I know why things are the way they are to begin with and have a starting point to figure out where to change them.