1 Reply Latest reply on Nov 17, 2008 7:14 AM by Newsgroup_User

    CS3 Background Color Bleeds Through, why?

    Roma Pie
      I've searched the forum and haven't found an answer. I know this maybe an amateur question but I just can't seem to figure out a solution.

      Disclaimer: I'm new to CSS at what I know about div tag I learned from an online tutorial.

      When I insert the div tag and specify an infinite background, the background bleeds through eh boxes that hold my text.

      I select the entire page in DW and
      insert a a div tag;
      -wrap around selection
      -ID : layout
      -New CSS Style
      Background;I set the back ground color by sampling the color that I brought in with my sliced image from PS.
      Box; width 100% height 100%. Margin: same for all; auto.

      and this is the result:

      romapielarska.com

      here is the code

      <html>
      <head>
      <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <style type="text/css">
      <!--
      body,td,th {
      font-family: Florencesans Exp;
      font-size: 12px;
      color: #CCCCCC;
      }
      #layout {
      background-color: #F5F4EC;
      margin: auto;
      height: 100%;
      width: 100%;
      }
      -->
      </style>
      </head>
      <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
      <!-- ImageReady Slices (test.psd) -->
      <div id="layout">
      <div id="layout">
      <div>
      <table id="Table_01" width="1276" height="916" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td rowspan="6">
      <img src="images/index_01.gif" width="136" height="916" alt=""></td>
      <td colspan="9">
      <img src="images/index_02.gif" width="1004" height="101" alt=""></td>
      <td rowspan="6">
      <img src="images/index_03.gif" width="136" height="916" alt=""></td>
      </tr>
      <tr>
      <td colspan="9">
      <img src="images/index_04.jpg" width="1004" height="640" alt=""></td>
      </tr>
      <tr>
      <td colspan="9">
      <img src="images/index_05.gif" width="1004" height="61" alt=""></td>
      </tr>
      <tr>
      <td rowspan="2">
      <img src="images/index_06.gif" width="162" height="31" alt=""></td>
      <td><div align="center">PORTRAITS</div></td>
      <td rowspan="2">
      <img src="images/index_08.gif" width="54" height="31" alt=""></td>
      <td>EVENTS</td>
      <td rowspan="2">
      <img src="images/index_10.gif" width="50" height="31" alt=""></td>
      <td><div align="center">PEOPLE &amp; PALCES</div></td>
      <td rowspan="2">
      <img src="images/index_12.gif" width="52" height="31" alt=""></td>
      <td><div align="center">CONTACT THE STUDIO</div></td>
      <td rowspan="2">
      <img src="images/index_14.gif" width="174" height="31" alt=""></td>
      </tr>
      <tr>
      <td>
      <img src="images/index_15.gif" width="101" height="12" alt=""></td>
      <td>
      <img src="images/index_16.gif" width="69" height="12" alt=""></td>
      <td>
      <img src="images/index_17.gif" width="170" height="12" alt=""></td>
      <td>
      <img src="images/index_18.gif" width="172" height="12" alt=""></td>
      </tr>
      <tr>
      <td colspan="9">
      <img src="images/index_19.gif" width="1004" height="83" alt=""></td>
      </tr>
      </table>
      </div>
      </div>
      </div>
      <!-- End ImageReady Slices -->
      </body>
      </html>
        • 1. Re: CS3 Background Color Bleeds Through, why?
          Level 7
          body,td,th {
          font-family: Florencesans Exp;
          font-size: 12px;
          color: #CCCCCC;
          }

          Be aware that this font is definitely NOT websafe. Most people will see
          Times/Times New Roman in its place. Your safe choices are -

          http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

          <div id="layout">
          <div id="layout">
          <div>

          Be aware that you cannot use a given ID more than once on any page. As a
          result, this markup is invalid. Any what is the reason for the three nested
          divs anyhow?

          Your page layout -

          <div id="layout">
          <div id="layout">
          <div>
          <table id="Table_01" width="1276" height="916" border="0"
          cellpadding="0" cellspacing="0">

          is functionally identical to using just this -

          <table id="Table_01" width="1276" height="916" border="0"
          cellpadding="0" cellspacing="0">

          Why use the divs at all?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "Roma Pie" <webforumsuser@macromedia.com> wrote in message
          news:gfqc66$dp3$1@forums.macromedia.com...
          > I've searched the forum and haven't found an answer. I know this maybe an
          > amateur question but I just can't seem to figure out a solution.
          >
          > Disclaimer: I'm new to CSS at what I know about div tag I learned from an
          > online tutorial.
          >
          > When I insert the div tag and specify an infinite background, the
          > background
          > bleeds through eh boxes that hold my text.
          >
          > I select the entire page in DW and
          > insert a a div tag;
          > -wrap around selection
          > -ID : layout
          > -New CSS Style
          > Background;I set the back ground color by sampling the color that I
          > brought in
          > with my sliced image from PS.
          > Box; width 100% height 100%. Margin: same for all; auto.
          >
          > and this is the result:
          >
          > romapielarska.com
          >
          > here is the code
          >
          > <html>
          > <head>
          > <title>test</title>
          > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
          > <style type="text/css">
          > <!--
          > body,td,th {
          > font-family: Florencesans Exp;
          > font-size: 12px;
          > color: #CCCCCC;
          > }
          > #layout {
          > background-color: #F5F4EC;
          > margin: auto;
          > height: 100%;
          > width: 100%;
          > }
          > -->
          > </style>
          > </head>
          > <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
          > marginheight="0">
          > <!-- ImageReady Slices (test.psd) -->
          > <div id="layout">
          > <div id="layout">
          > <div>
          > <table id="Table_01" width="1276" height="916" border="0"
          > cellpadding="0" cellspacing="0">
          > <tr>
          > <td rowspan="6">
          > <img src="images/index_01.gif" width="136" height="916"
          > alt=""></td>
          > <td colspan="9">
          > <img src="images/index_02.gif" width="1004" height="101"
          > alt=""></td>
          > <td rowspan="6">
          > <img src="images/index_03.gif" width="136" height="916"
          > alt=""></td>
          > </tr>
          > <tr>
          > <td colspan="9">
          > <img src="images/index_04.jpg" width="1004" height="640"
          > alt=""></td>
          > </tr>
          > <tr>
          > <td colspan="9">
          > <img src="images/index_05.gif" width="1004" height="61"
          > alt=""></td>
          > </tr>
          > <tr>
          > <td rowspan="2">
          > <img src="images/index_06.gif" width="162" height="31"
          > alt=""></td>
          > <td><div align="center">PORTRAITS</div></td>
          > <td rowspan="2">
          > <img src="images/index_08.gif" width="54" height="31"
          > alt=""></td>
          > <td>EVENTS</td>
          > <td rowspan="2">
          > <img src="images/index_10.gif" width="50" height="31"
          > alt=""></td>
          > <td><div align="center">PEOPLE &amp; PALCES</div></td>
          > <td rowspan="2">
          > <img src="images/index_12.gif" width="52" height="31"
          > alt=""></td>
          > <td><div align="center">CONTACT THE STUDIO</div></td>
          > <td rowspan="2">
          > <img src="images/index_14.gif" width="174" height="31"
          > alt=""></td>
          > </tr>
          > <tr>
          > <td>
          > <img src="images/index_15.gif" width="101" height="12"
          > alt=""></td>
          > <td>
          > <img src="images/index_16.gif" width="69" height="12"
          > alt=""></td>
          > <td>
          > <img src="images/index_17.gif" width="170" height="12"
          > alt=""></td>
          > <td>
          > <img src="images/index_18.gif" width="172" height="12"
          > alt=""></td>
          > </tr>
          > <tr>
          > <td colspan="9">
          > <img src="images/index_19.gif" width="1004" height="83"
          > alt=""></td>
          > </tr>
          > </table>
          > </div>
          > </div>
          > </div>
          > <!-- End ImageReady Slices -->
          > </body>
          > </html>
          >
          >