6 Replies Latest reply on Sep 22, 2008 8:03 AM by Newsgroup_User

    styled text does not display in browsers

    Nadz2
      Styled text displays in DW design view but when I preview the page in a browser, whether FF 3 or IE 6, the text does not have the style. I did -- in DW -- do a /File / Check Page on my CSS and cleared a couple of things but still the problem persists. The "problem style" (# events H3) does show up in the CSS styles panel group. I assume that means it is registering. The #events H3 rule shows up there after the initial Header rule. I do want the events style to over-rule the initial style. I assume that is what the panel is telling.

      I am new to CSS and to DW so my mistake may be very basic. I do appreciate any help you may be able to give. I have attached the code.

      Thanks
        • 1. Re: styled text does not display in browsers
          Level 7
          We would need to see the HTML as well to see the page structure and how the
          CSS is applied.

          Take care,
          Tim


          "Nadz2" <webforumsuser@macromedia.com> wrote in message
          news:gaua29$rmh$1@forums.macromedia.com...
          > Styled text displays in DW design view but when I preview the page in a
          > browser, whether FF 3 or IE 6, the text does not have the style. I did --
          > in
          > DW -- do a /File / Check Page on my CSS and cleared a couple of things but
          > still the problem persists. The "problem style" (# events H3) does show
          > up in
          > the CSS styles panel group. I assume that means it is registering. The
          > #events H3 rule shows up there after the initial Header rule. I do want
          > the
          > events style to over-rule the initial style. I assume that is what the
          > panel
          > is telling.
          >
          > I am new to CSS and to DW so my mistake may be very basic. I do
          > appreciate
          > any help you may be able to give. I have attached the code.
          >
          > Thanks
          >
          > @charset "utf-8";
          > /* CSS Document */
          >
          > /* Global Defaults */
          > html, body {
          > margin: 0px;
          > padding: 0px;
          > border: 0px;
          > background-color:#CBD5DE ;
          > }
          >
          > body {
          > font: 1em/1.25 Arial, Helvetica, sans-serif;
          > font-size:76%;
          > }
          >
          > /* Headlines */
          > h1, h2, h3, h4, h5, h6 {
          > margin: 4px;
          > padding: 4px;
          > font-weight: normal;
          > font-family: Arial, Helvetica, sans-serif;
          > }
          >
          > /* Text Styles */
          > p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input,
          > select,
          > textarea {
          > margin: 0px;
          > padding: 0px;
          > font: normal normal normal 1.0em/1.25 Arial, Helvetica, sans-serif;
          > }
          > blockquote {
          > margin: 1.25em;
          > padding: 1.25em
          > }
          > q {
          > font-style: italic;
          > }
          > acronym, abbr {
          > cursor: help;
          > border-bottom: 1px dashed;
          > }
          > small {
          > font-size:.85em;
          > }
          > big {
          > font-size:1.2em;
          > }
          >
          > /* Links and Images */
          >
          > img {
          > border: none;
          > }
          >
          > /* Tables */
          > table {
          > background-color:#FFFFFF;
          > margin: 0;
          > padding: 0;
          > border: 0;
          > border-collapse:collapse;
          > }
          >
          > /* Forms */
          > form {
          > margin: 0;
          > padding: 0;
          > display: inline;
          > }
          > label {
          > cursor: pointer;
          > }
          >
          > /* Common Classes */
          > .clear { clear: both; }
          > .floatLeft { float: left; }
          > .floatRight { float: right; }
          > .textLeft { text-align: left; }
          > .textRight { text-align: right; }
          > .textCenter { text-align: center; }
          > .textJustify { text-align: justify; }
          > .blockCenter { display: block; margin-left: auto; margin-right: auto; } /*
          > remember to set width */
          > .bold { font-weight: bold; }
          > .italic { font-style: italic; }
          > .underline { text-decoration: underline; }
          > .noindent { margin-left: 0; padding-left: 0; }
          > .nomargin { margin: 0; }
          > .nopadding { padding: 0; }
          > .nobullet { list-style: none; list-style-image: none; }
          > .update {font-size:.8em;padding-left:1em;}
          >
          >
          > ul.nav {
          > margin-left:0;
          > list-style-type: none;
          > padding-left:0;
          > padding-top: 6px;
          > padding-bottom: 7px;
          > }
          >
          > ul.nav li{display:inline;}
          >
          > ul.nav a {
          > border: 1px solid #000;
          > padding: 5px 15px 6px 15px;
          > margin-right: 5px;
          > background-color:#000000;
          > text-decoration: none;
          > color:#FFFFFF;
          > }
          >
          > ul.nav a:link, ul.nav a:visited{
          > text-decoration:none;
          > }
          >
          > #footer {
          > background:#000000;
          > font-size:.9em;
          > color:#FFFFFF;
          > margin-left:0px;
          > padding-left:0px;
          > }
          >
          > #footer a:link, a:visited{
          > color:#FFFFFF;
          > text-align:center;
          > }
          >
          > #footer a:link.left, a:visited.left{
          > color:#FFFFFF;
          > text-align:left;
          > }
          >
          > #disclaimer {
          > background-color:#CCCCCC;
          > font-size:.8em;
          > text-align:center;
          > }
          >
          > /* The Below Added by Nadine */
          >
          > #content {
          > background-color: #666666;
          > color:#FFFFFF;
          > margin:0px;
          > padding:0px;
          > }
          >
          > #content p {
          > margin: 10px 10px 10px 10px;
          > padding-left:5px;
          > }
          >
          > #content address {
          > margin: 0 10px 10px 10px;
          > padding-left:10px;
          > }
          >
          >
          > #content h1 {
          > font-family : Georgia, Times New Roman, Times, serif;
          > font-size : 1.6em;
          > color: #fff;
          > border-bottom : 1px solid #fff;
          > margin-bottom:10px;
          > }
          >
          > #content h2 {
          > font-family : Georgia, Times New Roman, Times, serif;
          > font-size : 1.4em;
          > color: #fff;
          > margin-bottom:10px;
          > }
          >
          > #content h3 {
          > font-family : Georgia, Times New Roman, Times, serif;
          > font-size : 1.2em;
          > color: #fff;
          > margin-bottom:10px;
          > }
          >
          > #content a, #content a:link {
          > text-decoration: underline;
          > color:#FFFFFF;
          > }
          >
          > #content a:visited {
          > text-decoration: underline;
          > color:#003399;
          > }
          >
          > #content ul{
          > list-style-type: none;
          > Padding-left:20px;
          > margin-left:20px;
          > }
          >
          > #content ul li{
          > list-style-type : square;
          >
          > }
          >
          > #content ul li li{
          > list-style-type : square;
          >
          > }
          >
          > #content ul li li li{
          > list-style-type : square;
          >
          > }
          >
          > #content ul li li li li{
          > list-style-type : square;
          >
          > }
          >
          > #content ol {
          > Padding-left:20px;
          > margin-left:20px;
          > }
          >
          > #content hr {
          > border: 0;
          > width: 100%;
          > color: #E6E6E6;
          > background-color: #E6E6E6;
          > height: 1px;
          > }
          >
          > #content p.update {
          > font-size:.8em;
          > text-align:right;
          > }
          >
          > .indent1 {
          > padding: 0em 0em 0em 1em;
          > }
          >
          > .indent2 {
          > padding: 0em 0em 0em 2em;
          > }
          >
          > .indent3 {
          > margin-left: 350px;
          > padding-left: 350px;
          > }
          >
          > #indent ul{
          > list-style-type: none;
          > margin-left: 50px;
          > padding-left: 50px;
          > }
          >
          > .bluehighlight {
          > color: #0066FF;
          > }
          > .margin30 {padding-left:50px}
          >
          > .orange {
          > color:#FF0000
          > }
          >
          >
          > #events {
          > color: #003366;
          > background-color:#efefef;
          > text-align: center;
          > font-size: .9em;
          > border: thick solid #000000;
          > }
          >
          > #events h3{
          > border-top-width:thick;
          > border-top:solid;
          > border-collapse:separate;
          > color:#000000;
          > }
          >
          > #events p{
          > color: #003366;
          > text-align: center;
          > font-size: .9em;
          > }
          >


          • 2. Re: styled text does not display in browsers
            Nadz2 Level 1
            Attaching HTML. Thanks again for your help.
            • 3. Re: styled text does not display in browsers
              Level 7
              Hello,

              I put up your page (HTML and CSS) here:

              http://tnsgraphics.com/sdsu.htm

              What is the part that isn't doing what you want, and what should it be
              doing?

              Take care,
              Tim


              "Nadz2" <webforumsuser@macromedia.com> wrote in message
              news:gb0gd5$kn6$1@forums.macromedia.com...
              > Attaching HTML. Thanks again for your help.
              >
              > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              > " http://www.w3.org/TR/html4/loose.dtd">
              > <html>
              > <head>
              > <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              > <!-- TemplateBeginEditable name="Title" -->
              > <title>MALAS :: Master of Arts in Liberal Arts and Sciences</title>
              > <!-- TemplateEndEditable -->
              > <link href="../mala.css" rel="stylesheet" type="text/css">
              > </head>
              > <body><a href="#content"><img src="images/spacer.gif" alt="skip
              > navigation"
              > width="1" height="1" hspace="0" vspace="0" border="0" align="top" /></a>
              >
              > <table width="789" align="center">
              > <tr>
              > <td><img src="../images/sdsu.gif" width="320" height="60" alt="SDSU
              > Home
              > Page"></td>
              > <td bgcolor="#333333"><img src="../images/malas2.jpg" alt=""
              > width="291"
              > height="55" align="right"></td>
              > </tr>
              > <tr bgcolor="#000000">
              > <td colspan="2">
              > <ul class="nav">
              > <li class="nav"><a href="../index.html">Home</a></li>
              > <li class="nav"><a href="../admissions.html">Admission</a></li>
              > <li class="nav"><a href="../courses.html">Courses</a></li>
              > <li class="nav"><a href="../studentInfo.html">Student Information</a></li>
              > <li class="nav"><a href="../faculty.html">Faculty</a></li>
              > <li class="nav"><a href="../contact.html">Contact Information</a></li>
              > </ul></td></tr><tr ><td bgcolor="#666666"><div id="content">
              > <!-- TemplateBeginEditable name="Content" -->
              > <p>Some text will go here.Some text will go here.Some text will go
              > here.Some text will go here.Some text will go here.Some text will go
              > here.</p>
              > <p><a href=" http://cal.sdsu.edu">link</a></p>
              > <h2>h2</h2>
              > <h3>h3</h3>
              >
              > <ul>
              > <li>test</li>
              > <ul>
              > <li>test</li>
              > <li>test</li>
              > </ul>
              > <li>test</li>
              > <li>test</li>
              > </ul>
              >
              > <ol>
              > <li>test</li>
              > <li>test</li>
              > <li>test</li>
              > </ol>
              > <p class="update" >
              > Last update:
              > <!-- #BeginDate format:Am1 -->September 19, 2008<!-- #EndDate --></p>
              > <!-- TemplateEndEditable -->
              > </div></td>
              > <div id="events">
              > <td width="270" height="196" valign="top"><img
              > src="../images/globe.gif"
              > alt="" width="220" height="196" hspace="30" vspace="10" align="middle">
              > <h3>Spring 2009 Lecture Series</h3>
              > <p> Foreign Policy Challenges of the New Adminstration<br>
              > Thursdays 7 - 8:40 p.m.<br>
              > HT 140</p>
              >
              > <h3>3rd Annual Joint Student and Alumni Symposium </h3>
              > <p>Spring 2009<br>
              > Watch here for details come Spring</p> </div>
              > <tr id="footer" >
              > <td class="indent2">
              > San Diego State University<br>
              > MALAS program MC 4423<br>
              > 5500 Campanile Dr., San Diego, CA 92182<br>
              > Telephone (619)594-4426<br>
              > <a class="left" href="mailto:clewis@mail.sdsu.edu">Email us</a>
              > </td>
              > <td>
              > <a href=" http://cal.sdsu.edu/">College of Arts and Letters</a> <br>
              > </td>
              > </tr>
              > <tr id='disclaimer'><td colspan="2">The statements found on this
              > page/site
              > are for informational purposes only. While every effort is made to ensure
              > that
              > this information is up-to-date and accurate, official information can be
              > found
              > in the university publications.</td> </tr>
              > </table>
              > </body>
              > </html>
              >


              • 4. Re: styled text does not display in browsers
                Nadz2 Level 1
                The part that does not work is the *right column* which I have called "events". None of this code (see below) has an effect in the browser but it does show up in DW. So

                #1 It seems that I cannot trust what DW displays. Is that right?
                #2 How do I get the blue bgcolor and center alignment and borders to display for this section?

                Thanks again.
                Nadine


                > #events {
                > color: #003366;
                > background-color:#efefef;
                > text-align: center;
                > font-size: .9em;
                > border: thick solid #000000;
                > }
                >
                > #events h3{
                > border-top-width:thick;
                > border-top:solid;
                > border-collapse:separate;
                > color:#000000;
                > }
                >
                > #events p{
                > color: #003366;
                > text-align: center;
                > font-size: .9em;
                > }
                • 5. Re: styled text does not display in browsers
                  Level 7
                  > #1 It seems that I cannot trust what DW displays. Is that right?

                  While DW is getting better with each release, it's never safe to trust what
                  Design view shows. This is true in *any* HTML authoring system.

                  > #2 How do I get the blue bgcolor and center alignment and borders to
                  > display
                  > for this section?

                  Probably a big help would be to fix the invalid markup. Change this -

                  <!-- TemplateEndEditable --> </div></td>
                  <div id="events">
                  <td width="270" height="196" valign="top"><img
                  src="../images/globe.gif" alt="" width="220" height="196" hspace="30"
                  vspace="10" align="middle">
                  <h3>Spring 2009 Lecture Series</h3>
                  <p> Foreign Policy Challenges of the New Adminstration<br>
                  Thursdays 7 - 8:40 p.m.<br>
                  HT 140</p>
                  <h3>3rd Annual Joint Student and Alumni Symposium </h3>
                  <p>Spring 2009<br>
                  Watch here for details come Spring</p>
                  </div>
                  <tr id="footer" >

                  to this -

                  <!-- TemplateEndEditable --> </div></td>
                  <td width="270" height="196" valign="top"><img
                  src="../images/globe.gif" alt="" width="220" height="196" hspace="30"
                  vspace="10" align="middle">
                  <div id="events">
                  <h3>Spring 2009 Lecture Series</h3>
                  <p> Foreign Policy Challenges of the New Adminstration<br>
                  Thursdays 7 - 8:40 p.m.<br>
                  HT 140</p>
                  <h3>3rd Annual Joint Student and Alumni Symposium </h3>
                  <p>Spring 2009<br>
                  Watch here for details come Spring</p>
                  </div>
                  </td>
                  <tr id="footer" >

                  The <div> was improperly nested, placed between a </td> and a <td>, and
                  there was a missing </td>

                  --
                  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
                  ==================


                  "Nadz2" <webforumsuser@macromedia.com> wrote in message
                  news:gb8bjl$78q$1@forums.macromedia.com...
                  > The part that does not work is the *right column* which I have called
                  > "events".
                  > None of this code (see below) has an effect in the browser but it does
                  > show up
                  > in DW. So
                  >
                  > #1 It seems that I cannot trust what DW displays. Is that right?
                  > #2 How do I get the blue bgcolor and center alignment and borders to
                  > display
                  > for this section?
                  >
                  > Thanks again.
                  > Nadine
                  >
                  >
                  > > #events {
                  > > color: #003366;
                  > > background-color:#efefef;
                  > > text-align: center;
                  > > font-size: .9em;
                  > > border: thick solid #000000;
                  > > }
                  > >
                  > > #events h3{
                  > > border-top-width:thick;
                  > > border-top:solid;
                  > > border-collapse:separate;
                  > > color:#000000;
                  > > }
                  > >
                  > > #events p{
                  > > color: #003366;
                  > > text-align: center;
                  > > font-size: .9em;
                  > > }
                  >

                  • 6. Re: styled text does not display in browsers
                    Nadz2 Level 1
                    Found my problem. I had placed my <div> tags outside the <td> tags for the column.

                    Tim, thanks for being willing to look at my code. Knowing that I was not alone with my problem let me relax enough to think of other options.

                    Nadine