Why is the <b> and <i> not working?
Solution 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;}
Solution 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.
Solution 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.
Solution 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.
Martin-
Updated on July 18, 2022Comments
-
Martin- almost 2 years
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?
-
Bojangles over 11 yearsWhy on Earth would a CSS reset decide to do this I cannot fathom.
-
Paul Tomblin over 11 yearsWhich 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.
-
Eamon Nerbonne over 11 yearsFrankly, now that IE7 is mostly dead, CSS resets seem largely redundant anyhow - browsers are mostly compatible.
-
Sudipta Chatterjee over 11 yearsGood catch, @AlienWebguy - explains your 27.4k reputation :)
-
Eamon Nerbonne over 11 yearsincidentally, this kind of vertical align resetting is pretty... unexpected too.
-
Martin- over 11 yearsSo Eric Meyers reset css file is outdated?
-
Martin- over 11 yearsI 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 -
Martin- over 11 yearsThis actually the only thing worked, remove it from the reset.
-
chrisboustead over 11 yearsGlad to hear it. I tend to use very minimal resets if any for reasons like that.
-
AlienWebguy over 11 yearsOutdated 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.