[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 804
  • Last Modified:

text always bold in Dreamweaver only

I am building some pages witih Dreamweaver. All the text is coming up bold no matter what I do. This is only happening in Dreamweaver. I've included below my CSS of one of my pages in case that helps. I've tried a few things in this CSS code, but I couldn't get it.  Thanks in advanced.

<style type="text/css">
<!--
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #e3ecf3;
}
.style1 {color: #666666}
.style83 {font-family: Verdana; color: #37805E; font-size: 16px; }
.style9 {      font-family: Verdana;
      font-size: 11px;
}
.style11 {font-size: 11px}
.style10 {font-size: 15px}
.style27 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.style68 {
      color: #37805E;
      font-size: 16px;
}
.style85 {
      font-size: 18px;
      color: #37805E;
      font-family: Verdana;
}
.style86 {      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #999999;
}
.style88 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #999999; font-style: italic; }
.style89 {color: #999999;
      font-size: 11px;
}
.style91 {font-size: 11px; font-family: Verdana; color: #000000; }
.style95 {font-size: 11px; font-family: Verdana; color: #000000; font-weight: bold; }
-->
</style>
0
weikelbob
Asked:
weikelbob
  • 3
  • 3
1 Solution
 
Havin_itCommented:
Hi,

When you say it is only happening in Dreamweaver, do you mean that the actual pages when viewed in a browser do not have the bold type?

If so, it sounds like a bug in DW's rendering engine, albeit one I have not heard of myself.

If you mean 'only pages created by Dreamweaver', we might need to look at an example page that's affected by this. Perhaps you could post some code?

On inital looks at the above, you only have font-weight defined for one of your CSS classes, so it would affect other elements on the page, even if they have their own class, through inheritance rules. To explain further:

<body class="style95">
   <p class="style91">
   </p>
</body>

In this case, the <p> will be bold, even though that attribute is not defined in its own class (style91).  Because the P element's parent, namely the <body>, has a 'font-weight:bold;' attribute, that is inherited by all its child elements (the P and anything else in the document) - unless their class specifies a different font-weight CSS attribute.

If you're not familiar with this hierarchical model of your documents, most of it can be seen by simply looking at which HTML tags are contained within which others.

In Dreamweaver, you have the advantage that whatever element is highlighted on the page, you will see the full tag hierarchy above it listed along the bottom of the viewport (all of that list is clickable too).  Select one of the affected bits of text, click through its parent elements, and see if any of them has the class style95. If so, there is your answer.  Correct it by either removing 'font-weight:bold' from the parent, or adding 'font-weight:normal' to the child.

Hope this all makes sense - please let me know if not.
0
 
weikelbobAuthor Commented:
I understand most of what you said, maybe I should post the code for my index.html page:


<!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=iso-8859-1">
<title>Owndesigns.com, Affordable Web Design</title>
<style type="text/css">
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #FFFFFF;
}
.style1 {color: #666666}
.style76 {font-family: Verdana; color: #666666; font-size: 11px; }
.style77 {color: #37805E; font-weight: bold; font-size: 16px; font-family: Verdana; }
.style78 {font-family: Verdana; color: #333333; font-size: 11px; }
.style81 {color: #333333; font-weight: bold; font-size: 11px; font-family: Verdana; }
.style82 {color: #333333}
.style83 {font-family: Verdana; color: #37805E; font-size: 16px; }
.style84 {      font-family: Verdana;
      color: #37805E;
}
.style86 {      font-family: Verdana;
      color: #37805E;
      font-size: 18px;
}
.style9 {      font-family: Verdana;
      font-size: 11px;
}
.style88 {
      color: #333333;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
}
.style89 {      color: #999999;
      font-size: 11px;
}

.style91 {font-weight: bold}
</style></head>

<body>

<div align="center">
  <table width="50" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th scope="col"><img src="Ownd-very-top.gif" width="780" height="59"></th>
    </tr>
    <tr>
      <th height="2" scope="col"><img src="../local-boise/header/divider-header.gif" width="780" height="1"></th>
    </tr>
    <tr>
      <th height="25" scope="col"><p><img src="footer-and-header2.gif" width="780" height="25" border="0" usemap="#Map"></p>
      </th>
    </tr>
    <tr>
      <th height="49" scope="col"><p><img src="woman-with-laptop.jpg" width="780" height="430"></p>      
         
       </th>
    </tr>
  </table>
</div>
<table width="780" border="0" align="center" cellpadding="10" cellspacing="0">
  <tr>
    <th width="390" valign="top" scope="col"><span class="style86">About me</span>
        <p align="left" class="style88">I am a successful web designer from Boise, Idaho. I offer a wide variety of web design services. What makes me different than the next web designer is that my prices are low. Even though my prices are low, I make very fast, effective, and professional sites. </p>
        <p align="left" class="style78">Beyond my web design skills, I have a degree in Mathematics and I have some computer programming experience. I started learning web development languages about 7 years ago, then I quit for a while. Now I have restarted. I bought a lot of computer hardware and softare, and b<strong>etween the software and my web design skills, I have b<span class="style82">een t</span>aking</strong> in clients for about 9 months.</p>
        <p align="left" class="style78">I specialize in small business web design services. My sites turn out very professional, and if the client wants, very fast-running. Even the big photo at the top of this page downloads fast. </p>
        <p align="left" class="style83">Variety</p>
        <p align="left" class="style78">I can do many kinds of web design, including SSL secure pages, SSL secure sites, questionnaires, and databases. Big or small projects are fine. </p>
        <p align="left" class="style81">&nbsp;</p>
        <div align="left" class="style9"></div>
    <p align="left" class="style76">&nbsp;</p></th>
    <th width="390" valign="top" scope="col"><div align="left"><span class="style84">Security </span> </div>
        <p align="left" class="style78">If you have the need to secure your information, we can protect and encrypt your sensitive pages. You may not notice any difference when using the encrypted page, but it will secure your more sensitive information. Also, I use Paypal or 2Checkout for all money transaction, so your payment information is secure as well. 2Checkout has I nicer speed and look than Paypal, but it's more expensive. </p>
        <p align="left" class="style81">The following paragraphs offer a couple of items that people often want in their websites. Most forms are free, databases are extra.</p>
        <p align="left" class="style77"><img src="man-blue-bkgrd.jpg" width="185" height="178" align="left">Forms</p>
        <p align="left" class="style78">Another thing that customers often need is forms on their web sites. I can make questionnaires, small or large forms for gathering information, feedback forms, email forms, and pretty much any other form you want.</p>
        <p align="left" class="style78">An email form is popular because it goes directly to the customer's mail, not a popup software program. It also keeps your e-mail address completely hidden in your contact page and also on the server you are using (your Internet Service Provider)</p>
        <p align="left" class="style77">Databases</p>
        <div align="left" class="style9">
          <p class="style1"><span class="style82">Another thing people often want<strong> is a database to hold information like customer tracking, inventory tracking, or invoice management.</strong></span></p>
          <p>&nbsp;</p>
      </div></th>
  </tr>
</table>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col"><img src="footer-and-header2.gif" width="780" height="25" border="0" usemap="#MapMap">
      <map name="MapMap">
        <area shape="rect" coords="241,3,300,20" href="process.html">
        <area shape="rect" coords="310,4,428,23" href="prices.html">
        <area shape="rect" coords="440,4,502,22" href="portfolio.html">
        <area shape="rect" coords="515,3,592,24" href="portfolio.html">
      </map></th>
  </tr>
  <tr>
    <th height="26" scope="col"><span class="style89"><span class="style91">Copyright 2005&copy; Owndesigns.com &nbsp; &nbsp; &nbsp; <a href="terms.html">Terms </a></span></span></th>
  </tr>
</table>
<p align="center">&nbsp;</p>
<map name="Map">
  <area shape="rect" coords="241,3,300,20" href="process.html">
  <area shape="rect" coords="310,4,428,23" href="prices.html">
  <area shape="rect" coords="440,4,502,22" href="portfolio.html">
  <area shape="rect" coords="515,3,592,24" href="contact.html">
</map>
</body>
</html>







0
 
Havin_itCommented:
Wow.  That was a pretty darn elusive one.  Your problem is with CSS, but not with improper application of your own styles, as I thought.

Okay, this is something I just discovered myself, so bear with me.  There are more CSS styles in that page than just your own classes. The browser has its own default styles that give it pointers on how to render un-styled pages.  In Internet Explorer, you can't get at this default stylesheet - not that I've seen so far anyway - but, in Mozilla Firefox you can actually edit it to your heart's content.  I went looking for this and found it here:

 Program Files\Mozilla Firefox\res\html.css

If you have Firefox installed, open this file in Dreamweaver, and search for 'th' (a tag you are bizarrely using instead of <td> for some reason...) - this is what you'll find.

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
}

So there you have it: text in a <th> will always be bold, unless you hack that html.css file - and that's not much help for a developer.  Try using <td> instead...

I have to add though, that this code needs a lot of work besides that.  Don't get me wrong, it is nice to see CSS being used instead of FONT tags all over the place, but you do have a kinda 'scattergun' approach to applying them.  The default style issue didn't even occur to me for nearly an hour, because I was convinced the bug lay somewhere in that tag soup.

I don't mean to attack, but I do hope you'll spend some time pruning-out some of the tags that are piled up inside one another (this causes a lot of redundancy, especially as many of your classes are almost identical).  I sense you like to build pages in Design Mode only - this is really not wise, because you can't see the bad things Dreamweaver does.  Having a <strong> tag in the MIDDLE OF A WORD, for instance.  And always keep in mind the inheritance factor - if the class you put on a paragraph contains a style element that's already on the DIV or TD that contains it, then that element is already inherited and doesn't need to be on the paragraph itself.

Sorry, I'm rambling now.  It is a big subject, and off-topic for this question, but if you have any more questions, please ask. I can be incredibly rude, but I'm just trying to help ;)
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
weikelbobAuthor Commented:
I'll check it out and get back to you. Thank you Havin_it for the detailed looking around

Bob
0
 
Havin_itCommented:
No probs - by the way, back on the subject of Firefox, it has an extension specially aimed at developers that seems germane to mention at this point. It's called - wait for it - Web Developer, and is included in Firefox as a 'custom install' option.  If you already have Firefox installed, you can download it from

https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&id=60

I mention this because it has a tool to disable the 'default stylesheet' - that's how I brought your problem to light.  But as I see from other TA's you are showing a lot of interest in moving to CSS design, I think you'll also appreciate the many other tools included in this extension.
0
 
weikelbobAuthor Commented:
OK, thanks a lot for your detailed help.

Bob
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now