Bold and Italics are not working in Firefox or Chrome
css, html
Solution
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.
Problem
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?