Bold and Italics are not working in Firefox or Chrome

Question

Bold <b></b> and Italics <i></i> tags render correctly on the iPhone and Internet Explorer, but there is no formatting in Firefox or Chrome.

Here are the .css files. I also tried to add in i { font-style:italic; } separately in Reset and Style.

Color.css:

body {
    color: #fff;
    background-image: url(../img/background-red.png);
}

Reset.css:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, textarea, button
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul, dl {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


Style.css:

html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;  

    font: normal 18px/1.4 'Open Sans', Arial, Helvetica, sans-serif;

    background-position: left top;
    background-repeat: no-repeat;
}

.panel {
    position: absolute;
    z-index: 0;
    background: #fff;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -moz-box-shadow: 0 0 10px #fff;
    -webkit-box-shadow: 0 0 10px #fff;
    box-shadow: 0 0 10px #fff;
}


.content {
    max-width: 45%;
    margin: 100px;

    float: left;

    position: relative;
    z-index: 1;    
}

h1 {
    font-size: 72px;
    line-height: 56px;
    font-weight: 300;    
}

h2 {
    margin: 15px 0 50px;    

    font-size: 30px;
    line-height: 30px;    
    font-weight: 300;    
}

Here is the HTML, I tried using <strong>asdf</strong> to see if it would make text bold but it does not.

<div class="content">
    <h1>adssda</h1>
    <h2>dasdasdsa</h2>

<p><i><strong>sadsad</strong>asdsad</i></p><br>
sadasddsa<br><br>
<strong>asdasd</strong><br><br>
    <p><strong>asdasd</strong></p><br>
</div>

Why does the bold text look the same as normal text?

Answer 1

Firefox has trouble with certain tags like <b>, <strong> and <i> tags for some reason. It is a bug in the firefox browser itself. Try a different version of firefox and things will be different.

Here is the workaround that works for everybody, Add this to your CSS file:

strong, b {
    font-weight: bold;
}

It's a CSS override. Now firefox renders bold text like this instead of like this.

Answer 2

The font: inherit in your main reset block(the first one under the reset header) is causing all of your fonts on the page to be reset. Indeed, not even fixing the invalid html to be valid fixes this, your css in mind.

Commenting out this property fixes your text.