Why is the <b> and <i> not working?

Question

I have this site http://www.korsholm-jagtrejser.dk/

In the text

Korsholm Jagtrejser kan tilbyde jagtrejser til et bredt udvalg af jagtlande

Korsholm has <b> around and jagtrejser has <i> around, but it does not shown as bold/italic. I'm using meyerweb reset css, which have a <b> and <i>.

My chrome inspector does not say anything about that it should not be bold.

Can somebody pinpoint the problem?

Eryn

Post code? Anything to do with CSS reset may have an affect on your meta tags – Villalobos

use a normalize instead of a reset. – Grimace

Answer 1

Because the reset.css stylesheet has font: inherit; which is overriding the browser's CSS:

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,
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: inherit; font-size: 100%; vertical-align: baseline;}

Stilla

Why on Earth would a CSS reset decide to do this I cannot fathom. – Atwell

Which part of "reset" don't you understand? The purpose of a reset.css is to reset everything to do nothing so you can add your own styling. – Lagunas

Frankly, now that IE7 is mostly dead, CSS resets seem largely redundant anyhow - browsers are mostly compatible. – Clavicytherium

Good catch, @AlienWebguy - explains your 27.4k reputation :) – Yttria

incidentally, this kind of vertical align resetting is pretty... unexpected too. – Clavicytherium

So Eric Meyers reset css file is outdated? – Eryn

Outdated is probably the wrong word. It's not like this used to work and now it doesn't. Just find another one that suits your needs. There are a bazillion. – Stilla

Answer 2

The reset stylesheet has font: inherit; against a selector that matches lots of different things including b and i. font includes font-weight and font-style so it sets those to the values of the parent element.

Carbolize

Answer 3

You have 'font' set to inherit for the b tag in reset.css in line 19. Either remove the b tag or add a new selector for it to change the font-weight.

Shiekh

This actually the only thing worked, remove it from the reset. – Eryn

Glad to hear it. I tend to use very minimal resets if any for reasons like that. – Shiekh

Answer 4

When you use CSS Reset, it resets all the styles. Now you need to use a CSS UnReset. I recommend using Vanilla CSS Un-Reset.

The full code is given here:

/**
 * Start Vanilla CSS 1.0.2 
 */ 
body {
    font: 9pt/1.5em sans-serif;
}
pre, code, tt {
    font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
}
h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: bold;
}
em, i, dfn {
    font-style: italic;
}
dfn {
    font-weight:bold;
}
p, code, pre, kbd {
    margin:0 0 1.5em 0;
}
blockquote {
    margin:0 1.5em 1.5em 1.5em;
}
cite {
    font-style: italic;
}
li ul, li ol {
    margin:0 1.5em;
}
ul, ol {
    margin:0 1.5em 1.5em 1.5em;
}
ul {
    list-style-type:disc;
}
ol {
    list-style-type:decimal;
}
ol ol {
    list-style: upper-alpha;
}
ol ol ol {
    list-style: lower-roman;
}
ol ol ol ol {
    list-style: lower-alpha;
}
dl {
    margin:0 0 1.5em 0;
}
dl dt {
    font-weight:bold;
}
dd {
    margin-left:1.5em;
}
table {
    margin-bottom:1.4em;
    width:100%;
}
th {
    font-weight:bold;
}
th, td, caption {
    padding:4px 10px 4px 5px;
}
tfoot {
    font-style:italic;
}
sup, sub {
    line-height:0;
}
abbr, acronym {
    border-bottom: 1px dotted;
}
address {
    margin:0 0 1.5em;
    font-style:italic;
}
del {
    text-decoration: line-through;
}
pre {
    margin:1.5em 0;
    white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    display: inline;
}
img.alignleft {
    display: inline;
}
.alignright {
    float: right;
    margin-left: 10px;
}
.alignleft {
    float: left;
    margin-right: 10px;
}
img {
    max-width: 100%;
}
* html .clearfix {
    height: 1%;
}
* + html .clearfix {
    display: inline-block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .group {
    height: 1%;
}
* + html .group {
    display: inline-block;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/**
* End Vanilla CSS
*/

And the nice thing is, you can use whatever is required and what you don't.

Gianna

I know just added b, strong {font-weight:bold !important;} i, em {font-style:italic !important;} But this just doesnt not work (tried with important just to see if it changed anything) - This is AFTER the reset – Eryn