CSS-Tricks

stevedeer

This is killin' me.

http://www.murdersupplies.com/mybloodyreview.html

At the bottom of my page, I'm trying to get the 'Credits:' title to bold. I've tried the simple inline

<b>

tag... and also created a span class, but it just doesn't want to bold up.

<!DOCTYPE html>
<html lang="en">
<head>

<script type="text/javascript" src="http://use.typekit.com/lcb1vtd.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<meta charset="utf-8" />
<title>Steve Deer</title>
    <style type="text/css">
body{
font-size:62.5%;
    padding:0px;
    margin:0px;
}

h1 {
    width:auto;
    font-family: "museo-sans-rounded",sans-serif;
font-style: normal;
font-weight: 1000;
    font-size:8em;
    color:black;
    margin:48px;
    padding:0;
    padding-bottom: 0.25em;
    border:0;
    border-bottom: 8px solid black;
    line-height:1;
}

h2 {
    width:600px;
    font-family: "museo-sans-rounded",sans-serif;
font-style: normal;
font-weight: 1000;
    font-size:2em;
    color:black;
    margin: 0px 0px 0.4em 48px;
    padding:0;
 line-height:1.25;
}

p {
    width:600px;
    font-family: "museo-sans-rounded",sans-serif;
font-style: normal;
font-weight: 100;
    font-size:2em;
    color:black;
    margin: 0px 0px 0.4em 48px;
    padding:0;
 line-height:1.25;

}

.credits {
margin-left:48px;
margin-right:48px;
margin-bottom:48px;
border-top:1px dotted black;
}

.credits p {

width:auto;
        font-family: "New Courier", Monaco, Monospace;
    font-size:.8em;
line-height:1.25em;
margin:0;
color:black;
margin-top:24px;
padding:0;
}

.fontbold {
        font-family: "New Courier", Monaco, Monospace;
font-style:bold;
}


.qanda {
margin-bottom:36px
}

.greytype{
color:#888;
}

.highlight{
    font-family: "museo-sans-rounded",sans-serif;
font-weight:500;

}

    </style>

</head>
<body>

<h1>My bloody review! <span class="greytype">This is the 2011 online review of Steve Deer; Art Director and Designer at McCann Manchester.</span></h1>

<div class="qanda"><h2>List your main achievements over the past twelve months.</h2>
<p> Over the past twelve months I have had a fine art photo achieve "People's Choice Winner" in the Canon Professional Network photography competition.</p><p>The same image achieved a "Highly Commended" in Landscape Photographer of the Year 2011, published in the book, and exhibited at the National Gallery in London.</p>
<p>I have published a personal project in the form of a 24 page newspaper "Unposed", a collection of unposed street photography.</p>
<p>Also, I have advanced much further digitally, particularly in web development... CSS, HTML and jQuery. I have coded and launched my own web site (www.stevedeer.co.uk) showcasing my photography, and set up another site for experimenting with web typography and Javascript (www.murdersupplies.com).</p>
<p>I have no achievements to speak of with regard to my position as senior art director on the Aldi account.</p></div>

<div class="qanda"><h2>What areas could you improve on<br />to be even better at what you do?</h2>
<p> The inefficient way at which we work on the Aldi account needs to improve for me to become better at what I do. There is too much disinformation, repetitive updates, amends and changes. We need to start at getting the brief right and signed off!</p></div>

<div class="qanda"><h2>What support would you need to achieve this<br />improvement (coaching, training, technology etc).</h2>
<p> As above, I don't need any training. The system needs to improve. Hopefully the ALLI initiative will help.</p></div>

<div class="qanda"><h2>What else would you like to discuss at your review?<br />(Career progression, objectives, development etc).</h2>
<p><span class="highlight">Career progression:</span> I don't expect to progress any further in my career within the agency.</p>
<p><span class="highlight">Objectives:</span> My objectives are to work across all media, all delivery platforms and across all disciplines. I have always been an 'all rounder', but I don't expect to achieve this at McCann as people are quickly 'pigeon-holed'.</p>
<p><span class="highlight">Training and development:</span> All my training is undertaken on my own initiative, in my own time, and payed for by myself. I see it as 'investing in my own future'. I have never had any help or support from the agency, even though I have listed my training requirements in all previous Performance Reviews, but they have never been acted upon.</p></div>

<div class="qanda"><h2>Do you have any feedback for your manager<br />or the Agency in general?</h2>
<p>Things have improved greatly since Carol came on board, but there is still a long way to go in terms of improving the way we work.</p></div>

<div class="credits"><p><span class="fontbold">Credits:</span><br />This online Performance Review has been brought to you via murdersupplies.com The digital development space and CSS playground of Steve Deer. <b>Headline:</b> 80pt on 100pt Museo Sans Rounded Extra Bold. Subhead: 20pt on 35pt Museo Sans Rounded Extra Bold. Body copy: 20pt on 25pt Museo Sans Rounded Light</p>
</div>


</body>
</html>

andy_unleash

I guess ahead of time that you're using a webkit browser to view it in like Chrome? Bold font-faces are notoriously annoying in webkit, check it in Firefox for the official.

Your best bet is also to have a bold font-face set with the same font otherwise the browser does the bolding and that is notoriously un-reliable.

Also, don't use

<b>

this has been deprecated in favour of

<strong></strong>

andy_unleash

Scratch that -

font-weight: bold;

instead of font-style

stevedeer

cheers andy... sorted!!!

Paulie_D

Frankly, I think I'd be using 'header', 'section' & 'footer' for a lot of this and then have an 'h1' for each section.

Much easier to target without using strange class names or using a lot of spans.

Forums Get help. Give help.

Howdy, Stranger!

Categories

Tips