Solved

Bold and Italics not rendering on page

Posted on 2013-12-12
16
395 Views
Last Modified: 2013-12-13
I have used both <B> <STRONG> <I> <EM> in <p> tag but it wont render in the browser as bold or italic.

The CSS designer is gone - can someone please help tell me what I need to do in the CSS to make it work

The Heading tags are bolding OK

Here is an example page where bolded and <em> text is not rendering properly

http://www.housecarers.com/why-not-to-board-pets.cfm

The CSS is main.css

Thank you for your help
0
Comment
Question by:Ian White
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +2
16 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39715738
You can remove font: inherit from reset.css on line 6.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39715749
A bigger problem is that you don't have the BOLD or ITALIC versions of that web font so it will not display BOLD or ITALIC.  The standard fonts that you have on your computer like Arial and Times New Roman all come with Regular, Bold, Italic, and Bold-Italic versions.  If you want to do that with a web-font, you have to load those versions and instead of using <b> or <i>, you need to declare the appropriate Bold or Italic font.  Since you are loading the fonts thru the browser, it doesn't know to use the variations.  You have to do it explicitly.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39715758
If you want text inside your <em> tags to be bold, add this to your css (at the bottom so it overrides anything else).

em{font-weight: bold;}
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39716254
Your problem is because you use a reset.css stylesheet to reset everything. This effectively removes all styling from all elements, so you can build your own from the ground up - that means you need to style your own strong tags:

Add this to your CSS and it'll work fine:

strong { font-weight:bold; }
b { font-weight:bold; }
em { font-style: italic; }
i { font-style: italic; }

Open in new window

A more modern approach is to use a normalizer stylesheet instead of a reset. This applies sensible defaults styles to all elements instead of removing them. It makes for a better starting point.

http://necolas.github.io/normalize.css/
0
 

Author Comment

by:Ian White
ID: 39716517
I want <em> to be Italic not bold. I want <strong> to be bold

I am sorry I dont see the solution .. maybe I dont know enough. I want the web visitors to see bold and italiic that I markup.  Can someone please tell me in plain English the steps I need to take to make this happen like on most websites,  What do others do to get bold and itallic working.  sureley this is not hard.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716545
You really need to re-read through my previous comment. It explains why you have the problem and how to fix it. It also shows you exactly what you need to make <em> italic and <strong> bold!
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39716585
>I am sorry I dont see the solution
This is a good answer for what you want http:#a39716254

>Can someone please tell me in plain English the steps I need to take... maybe I dont know enough
If you are at the point where you don't understand http:#a39716254, then I suggest taking a few hours here http://www.codecademy.com/learn and click on the green Explore button in the Web Fundamentals box.  Several hours to learn the basics will save you more then ten fold as you work on your site.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39716629
An even quicker solution is here if you just want a simple fix rather than actually learning anything.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39716846
>rather than actually learning anything.

There are multiple ways to get to the same visual outcome.  If you are going to be working on this kind of thing more than once, you should understand what you are doing.  Most the the problems we fix here are from copy and pasting code that was bad to begin with.    Just taking quick hits of advice and not really understanding what you are doing will lead to more troubles down the road.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39717112
>if you are going to be working on this kind of thing more than once..

Why even make that assumption of the OP? Do you want to train everyone who posts a question to be a good web developer? Why?
 
Some people just want a quick solution.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39717597
Do you want to train everyone who posts a question to be a good web developer? Why?

So in the future they can figure this stuff out on their own!

Look at the profile of the OP. 50 questions over 4 years, most regarding Web Development. So maybe education is the way to go.

Give a man a fish, he eats for a day. Teach a man to fish and he eats a lots of fish - or some thing like that ;)
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39717620
As I pointed out above, you can't get BOLD or ITALIC if you don't have BOLD and ITALIC fonts installed.  The asker does not have them in his web-fonts.  Even in standard Windows fonts like Arial, BOLD and ITALIC are Separate fonts.  <b> and <i> only work if the BOLD and ITALIC fonts are installed where the programs know how to find them.
0
 

Author Comment

by:Ian White
ID: 39718146
But <H3> tag you can see is bold on the sample page above . So BOLD is rendering for <h3> but not for <p>  You will see Bold for the headings but not for the P
0
 

Author Closing Comment

by:Ian White
ID: 39718157
Aha ... Thanks that works.  Now I understand. Thank you for all your contributions from a one many business who must wear multiple hats. Yes I used to code Cobol and write JCL on a mainframe.  Hopefully this will help other novices coming along and looking. It is good to learn something every day.

I paid a lot of money to a designer to do this initially and they have gone and I need to maintain it. I will try the more modern approach when I have time - but for now the quick fix worked fine.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39718159
The <H3> tag is Not bold, it is a different and larger font.  There are no <b> tags in that page at all.
0
 

Author Comment

by:Ian White
ID: 39718164
Thanks - It worked by adding this to the CSS as is the accepted solution

Add this to your CSS and it'll work fine:

strong { font-weight:bold; }
b { font-weight:bold; }
em { font-style: italic; }
i { font-style: italic; }

The reset was removing these defaults and the designer never used them - now I need them.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question