3 Replies Latest reply on Dec 1, 2010 5:32 AM by MurraySummers

    Css Problem ??

    Rimmer Needs Help

      Hello everyone,

       

       

      First off, thank you for helping. I am having a problem with what seems to be "CSS". I am teaching myself Dreamweaver, and this problem is driving me mental. I am hoping it is something very simple to fix. I have included 2 screenshot's to help you better understand as well.

       

      I am trying to change the font SIZE in another area of the template I made, and when I change it from "12" to "14" ( font Arial ) it changes ALL the font size's on the entire page, putting all my "slices" completely out of wack. I want to be able to change the font size's in different area's of the page(s) without it doing this. Can someone please explain how I can do this in any detail ? It's driving me kind of mental at this point.

       

      Much appreciated in advance ( Screenshot's attached )

       

      Matt Rimmer

       

       

       

      This screenshot is with BOTH font's the same size. No issues here. The second screenshot is where poop hits the fan for me!

       

      css1.jpg

      css2.jpg

        • 1. Re: Css Problem ??
          MurraySummers Level 8

          CODE!  WE NEED CODE!

           

          Screenshots only show us the result of the problem.  Code shows us why the problem is happening.  Please post either a link to the live page, or the HTML and CSS on that page.  There are just too many potential alternative mistakes for us to try to guess what you might have done.

           

          And bear in mind that putting text into a vertically constrained container is a dangerous thing to do.  Remember that the visitor can set the text display size in their browser (you cannot control this) and larger text is often the result.  If the text is not in a region that can gracefully expand vertically, then your layout will break.

          1 person found this helpful
          • 2. Re: Css Problem ??
            Rimmer Needs Help Level 1

            CODE! WE NEED CODE!"

             

            coming up although I should point out that code and I are not friends yet  - sure we have danced a few times, but we are far from making a commitment to one another!

             

            "And bear in mind"

             

            Is there a way I can flatted the image(s) and just write wherever I want ?? That would be fantastic! ( But surely too easy of an answer )

             

             

             

            Code Below :

             

            html>
            <head>
            <title>index_citeon_update</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <style type="text/css">
            #Table_01 tr td {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #000;
            }
            #Table_01 tr td {
            font-weight: bold;
            font-size: 12px;
            }
            #Table_01 tr td {
            font-size: 11px;
            }
            #Table_01 tr td {
            font-size: 12px;
            }
            tr td {
            font-size: 12px;
            }
            </style></head>
            <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
            <!-- Save for Web Slices (index_citeon_update.psd) -->
            <table id="Table_01" width="1100" height="1271" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td colspan="9">
               <img src="images/index_citeon_update_01.jpg" width="504" height="30" alt=""></td>
              <td colspan="16">
               <img src="images/index_citeon_update_02.jpg" width="508" height="30" alt=""></td>
              <td colspan="3" rowspan="2">
               <img src="images/index_citeon_update_03.jpg" width="87" height="84" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="30" alt=""></td>
            </tr>
            <tr>
              <td>
               <img src="images/index_citeon_update_04.jpg" width="49" height="54" alt=""></td>
              <td colspan="3" rowspan="2">
               <img src="images/index_citeon_update_05.jpg" width="115" height="107" alt=""></td>
              <td rowspan="2">
               <img src="images/index_citeon_update_06.jpg" width="133" height="107" alt=""></td>
              <td colspan="3" rowspan="2">
               <img src="images/index_citeon_update_07.jpg" width="135" height="107" alt=""></td>
              <td colspan="5" rowspan="3">
               <img src="images/index_citeon_update_08.jpg" width="125" height="108" alt=""></td>
              <td>
               <img src="images/index_citeon_update_09.jpg" width="1" height="54" alt=""></td>
              <td rowspan="3">
               <img src="images/index_citeon_update_10.jpg" width="108" height="108" alt=""></td>
              <td colspan="2" rowspan="3">
               <img src="images/index_citeon_update_11.jpg" width="107" height="108" alt=""></td>
              <td colspan="6" rowspan="2">
               <img src="images/index_citeon_update_12.jpg" width="188" height="107" alt=""></td>
              <td colspan="2">
               <img src="images/index_citeon_update_13.jpg" width="51" height="54" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="54" alt=""></td>
            </tr>
            <tr>
              <td rowspan="18">
               <img src="images/index_citeon_update_14.jpg" width="49" height="1186" alt=""></td>
              <td rowspan="6">
               <img src="images/index_citeon_update_15.jpg" width="1" height="372" alt=""></td>
              <td colspan="2" rowspan="3">
               <img src="images/index_citeon_update_16.jpg" width="51" height="267" alt=""></td>
              <td colspan="3">
               <img src="images/index_citeon_update_17.jpg" width="87" height="53" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="53" alt=""></td>
            </tr>
            <tr>
              <td colspan="7" rowspan="4">
               <img src="images/index_citeon_update_18.jpg" width="383" height="318" alt=""></td>
              <td>
               <img src="images/index_citeon_update_19.jpg" width="3" height="1" alt=""></td>
              <td colspan="5" rowspan="2">
               <img src="images/index_citeon_update_20.jpg" width="185" height="214" alt=""></td>
              <td colspan="3" rowspan="2">
               <img src="images/index_citeon_update_21.jpg" width="87" height="214" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
            </tr>
            <tr>
              <td colspan="5" rowspan="3">
               <img src="images/index_citeon_update_22.jpg" width="125" height="317" alt=""></td>
              <td colspan="4">
               <img src="images/index_citeon_update_23.jpg" width="218" height="213" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="213" alt=""></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="3">
               <img src="images/index_citeon_update_24.jpg" width="129" height="105" alt=""></td>
              <td colspan="4" rowspan="3">
               <img src="images/index_citeon_update_25.jpg" width="110" height="105" alt=""></td>
              <td rowspan="3">
               <img src="images/index_citeon_update_26.jpg" width="3" height="105" alt=""></td>
              <td colspan="6">
               <img src="images/index_citeon_update_27.jpg" width="246" height="98" alt=""></td>
              <td rowspan="15">
               <img src="images/index_citeon_update_28.jpg" width="53" height="919" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="98" alt=""></td>
            </tr>
            <tr>
              <td colspan="6" rowspan="2">
               <img src="images/index_citeon_update_29.jpg" width="246" height="7" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="6" alt=""></td>
            </tr>
            <tr>
              <td rowspan="13">
               <img src="images/index_citeon_update_30.jpg" width="1" height="815" alt=""></td>
              <td colspan="3" rowspan="2">
               <img src="images/index_citeon_update_31.jpg" width="247" height="239" alt=""></td>
              <td rowspan="3">
               <img src="images/index_citeon_update_32.jpg" width="3" height="240" alt=""></td>
              <td colspan="4" rowspan="2">
               <img src="images/index_citeon_update_33.jpg" width="246" height="239" alt=""></td>
              <td colspan="3">
               <img src="images/index_citeon_update_34.jpg" width="11" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="2">
               <img src="images/index_citeon_update_35.jpg" width="3" height="239" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_36.jpg" width="246" height="238" alt=""></td>
              <td rowspan="9">
               <img src="images/index_citeon_update_37.jpg" width="2" height="672" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_38.jpg" width="249" height="238" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="238" alt=""></td>
            </tr>
            <tr>
              <td colspan="3">
               <img src="images/index_citeon_update_39.jpg" width="247" height="1" alt=""></td>
              <td colspan="4">
               <img src="images/index_citeon_update_40.jpg" width="246" height="1" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_41.jpg" width="246" height="1" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_42.jpg" width="249" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
            </tr>
            <tr>
              <td colspan="3" align="center" valign="top" nowrap>
                What's in your attic ?</td>
              <td colspan="5">
                 <img src="images/index_citeon_update_44.jpg" width="249" height="66" alt=""></td>
              <td rowspan="7">
               <img src="images/index_citeon_update_45.jpg" width="1" height="433" alt=""></td>
              <td colspan="8">
               <img src="images/index_citeon_update_46.jpg" width="248" height="66" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_47.jpg" width="249" height="66" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="66" alt=""></td>
              </tr>
            <tr>
              <td colspan="8" rowspan="2">
               <img src="images/index_citeon_update_48.jpg" width="496" height="149" alt=""></td>
              <td colspan="8" rowspan="6">
               <img src="images/index_citeon_update_49.jpg" width="248" height="367" alt=""></td>
              <td colspan="7">
               <img src="images/index_citeon_update_50.jpg" width="249" height="133" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="133" alt=""></td>
            </tr>
            <tr>
              <td colspan="2" rowspan="3">
               <img src="images/index_citeon_update_51.jpg" width="36" height="173" alt=""></td>
              <td colspan="4" rowspan="2" valign="top">At any time, our friendly staff are waiting to answer any questions you may have regarding the process in which we will upgrade your attic insulation. Email Today!</td>
              <td rowspan="5">
                <img src="images/index_citeon_update_53.jpg" width="22" height="234" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="16" alt=""></td>
            </tr>
            <tr>
              <td rowspan="7">
               <img src="images/index_citeon_update_54.jpg" width="12" height="360" alt=""></td>
              <td colspan="4" rowspan="5">
               <img src="images/index_citeon_update_55.jpg" width="304" height="247" alt=""></td>
              <td colspan="3" rowspan="7">
               <img src="images/index_citeon_update_56.jpg" width="180" height="360" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="77" alt=""></td>
            </tr>
            <tr>
              <td colspan="4">
               <img src="images/index_citeon_update_57.jpg" width="191" height="80" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="80" alt=""></td>
            </tr>
            <tr>
              <td colspan="4">
               <img src="images/index_citeon_update_58.jpg" width="188" height="42" alt=""></td>
              <td colspan="2" rowspan="2">
               <img src="images/index_citeon_update_59.jpg" width="39" height="61" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="42" alt=""></td>
            </tr>
            <tr>
              <td colspan="4">
               <img src="images/index_citeon_update_60.jpg" width="188" height="19" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="19" alt=""></td>
            </tr>
            <tr>
              <td colspan="17" rowspan="2">
                 <img src="images/index_citeon_update_61.jpg" width="500" height="72" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="29" alt=""></td>
            </tr>
            <tr>
              <td colspan="4" rowspan="2">
               <img src="images/index_citeon_update_62.jpg" width="304" height="113" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="43" alt=""></td>
            </tr>
            <tr>
              <td colspan="17">
                 <img src="images/index_citeon_update_63.jpg" width="500" height="70" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="70" alt=""></td>
            </tr>
            <tr>
              <td>
               <img src="images/spacer.gif" width="49" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="12" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="133" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="3" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="66" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="66" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="72" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="42" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="2" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="8" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="1" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="108" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="21" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="86" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="3" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="19" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="2" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="3" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="33" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="128" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="24" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="27" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="12" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="22" height="1" alt=""></td>
              <td>
               <img src="images/spacer.gif" width="53" height="1" alt=""></td>
              <td></td>
            </tr>
            </table>
            <!-- End Save for Web Slices -->
            </body>
            </html>"

            • 3. Re: Css Problem ??
              MurraySummers Level 8

              coming up although I should point out that code and I are not friends yet  - sure we have danced a few times, but we are far from making a commitment to one another!

               

              If you are serious about wanting to use DW, then this will have to change.  Not only will you find yourself wandering from one mysterious anomaly to another, but also you won't understand the answers that you get here in this forum.  It's all about the code.  You simply cannot use DW in a real sense without a good understanding of HTML and CSS - that enlightenment should begin here:

               

              http://www.w3schools.com

               

              My first comment about your code is that you do not have a valid and complete doctype.  Every page must have one or else it will be rendered in quirks mode by the browsers - that's not a good thing.  You should choose a doctype that is consistent with your understanding of HTML, and in your case, that would be HTML 4.01 Transitional.  By including this doctype on your page, you are not only avoiding quirks rendering, you are also telling the validator that the page contains HTML 4.01-type markup that is "Loose" in it's use of tag attributes. You'll understand this later.

               

              My next comment about your code is that your layout approach is badly flawed.  I am suspicious that this HTML was written by Photoshop or perhaps by Fireworks, because a) it's a table-based layout, and b) there are col- and rowspans galore in the table.  These latter two are the kiss of death for a layout, since they make your table unable to resist the small 'shape' changes that occur when people increase/decrease the text size in their browser, and gaps will inexplicably appear within your table as a result.  Please read this essay to learn more about this and why it happens - http://www.apptools.com/rants/spans.php.

               

              The answer to your original question is this - all of the (very little) readable content on the page is within a table (i.e., within a cell (<td></td>)).  You have this rule in your stylesheet -

               

              tr td { font-size:12px; }

               

              which says "Find all table cells on the page, and make the font size of their contents be 12px". In other words, it affects ALL content on the page.

               

              Assuming that all you wanted to do would be to change the size of this content to 12 px and leave the rest of the content at 11px -

               

               

              <td colspan="3" align="center" valign="top" nowrap>

                  What's in your attic ?</td>

               

               

              you could do that any number of ways.

               

              1.  You could add some inline CSS -

               

               

              <td colspan="3" align="center" valign="top" nowrap style="font-size:12px;">

                  What's in your attic ?</td>

               

               

              which would only affect that cell's contents.

               

              2.  You could add some markup to the content and adjust your rule -

               

              <td colspan="3" align="center" valign="top" nowrap>

                  <p>What's in your attic?</p></td>

               

              with

               

              tr td p { font-size:12px; }

               

              3.  You could add a CSS class or ID to the desired cell, and adjust your rule -

               

               

              <td colspan="3" align="center" valign="top" nowrap id="special">

                  What's in your attic ?</td>

               

               

              #special { font-size:12px; }

               

              Is this making sense?  You see why we say that you must have some comfort with HTML and CSS?

               

              With regard to your second question about just flattening the image, the last thing you want to do is to create a web page that cannot be spidered.  A page that contains only images is one of those. Not only is such a page a heavy download since it is filled with images, but also, it contains no meaningful content for search engines to rank your page with.  You might as well just post a link to a PDF file....