Getting rid of the space in heading (HTML, CSS related) - html

Question

Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}

Answer 1

try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}

Answer 2

I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.

Answer 3

Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}