We have an online system that uses plsql to deliver content to users. The underlying system has its own styling for certain elements but most of it were are able to override with a seperate css file for specific clients. Currently I am working on a section for one of our clients where the plsql pulls out all of the current vacancies on a page. The html itself is hard-coded into the plsql procedure so I have to work with it how it comes out of the system. If you look at the image below (shown in Firefox) you will see one of many jobs that are presented on a page. All jobs have the same html structure (shown below in fig 1). The way I have managed to render it in Firefox and all other browsers is perfect (as shown by the image) however in IE7 it looks terrible (fig 2). Any ideas what I can do / add to my css to make it render correctly in IE7? The computed CSS from Firebug can be found at the bottom of this page.
FIG 1
HTML
<div class="jobpost Job Postings">
<div class="template_image"></div>
<div class="jobpost_body">
<h2>
<a href="/icamstest/wd/plsql/wd_portal.show_job?p_web_site_id=4227&p_web_page_id=156962">Head of Operations</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing tincidunt males uada. Aenean metus lorem, lacinia est. Maecenas sit amet magna rhoncus imperdiet. Quisque consectetur lacinia felis, posumassa fermentum vel. Morbi metus nibh, tincidunt luctus hendrerit, iaculis sed velit.
<br>
<br>
Suspendisse potenti. Praesent sit amet rhoncus nisi. Etiam tristique velit ut felis ultrices pulvinar. Ut elit leo, condimentum nec consectetur non, tincidunt malesuada lorem.
</p>
<p class="jobpost_classifications">
<span class="jobclass even location">
<span class="jobclass_type">Location:</span>
<span class="jobvalue"> Birmingham</span>
</span>
<span class="jobclass uneven date_on">
<span class="jobclass_type">Date posted:</span>
26/11/2012
</span>
<span class="jobclass even date_off">
<span class="jobclass_type">Closing Date:</span>
31/01/2013
</span>
<span class="jobclass uneven refno">
<span class="jobclass_type">Ref No:</span>
85
</span>
</p>
</div>
<div class="jobpost_nav">
<p>
<a class="apply_direct" title="Apply For Position ? (Head of Operations)" href="/icamstest/wd/plsql/wd_portal_cand.form?p_web_site_id=4227&p_web_page_id=156962">Apply For Position ? </a>
<a class="send_a_friend" title="Send a friend (Head of Operations)" href="/icamstest/wd/plsql/wd_portal.send_a_friend?p_web_site_id=4227&p_web_page_id=156962">Send a friend</a>
</p>
</div>
</div>
FIG 2
CSS
div.jobpost {
border-bottom: 1px solid #CCCCCC;
padding-top: 15px;
}
div.jobpost {
float: left;
margin: 0;
width: 100%;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
background: none repeat scroll 0 0 transparent;
font-size: 100%;
outline: 0 none;
vertical-align: baseline;
}
div.jobpost div.jobpost_body {
float: left;
margin: 0;
padding: 0;
}
div.jobpost_body {
overflow: hidden;
}
#icams_inserted {
color: #6D7A7E !important;
font-family: Arial !important;
font-size: 12px !important;
font-style: normal !important;
font-weight: 400 !important;
}
html.ext-strict body {
text-align: left !important;
}
body {
color: #6D7A7E;
}
.jobpost_body h2 {
font-family: Arial,'Adamina',serif !important;
font-size: 20px !important;
font-weight: 400;
line-height: 1.25;
margin-bottom: 15px;
}
h1, h2, h3, h4, h5, h6 {
color: #606163;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial,'Adamina',serif;
}
h2 {
font-size: 28px;
}
div.jobpost_body h2 a {
border: 0 solid #FF0000;
display: block;
float: left;
margin: 0 !important;
padding: 10px 0 0;
width: 100%;
}
.not-ie a, .not-ie a > * {
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
a, a > * {
color: #6D7A7E;
text-decoration: none;
}
a {
background: none repeat scroll 0 0 transparent;
font-size: 100%;
margin: 0;
outline: medium none;
vertical-align: baseline;
}
div.jobpost_body h2 a {
border: 0 solid #FF0000;
display: block;
float: left;
margin: 0 !important;
padding: 10px 0 0;
width: 100%;
}
.not-ie a, .not-ie a > * {
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
a, a > * {
color: #6D7A7E;
text-decoration: none;
}
a {
background: none repeat scroll 0 0 transparent;
font-size: 100%;
margin: 0;
outline: medium none;
vertical-align: baseline;
}
div.jobpost_body p.jobpost_classifications {
border: 0 none;
padding-left: 20px;
padding-right: 0;
width: 200px;
}
div.jobpost_body p {
clear: none !important;
display: block;
float: left;
}
div.jobpost_body p {
clear: left;
margin: 0 !important;
}
.jobpost_body p {
color: #6D7A7E;
font: 400 12px/19px Arial;
}
p {
padding-top: 10px !important;
}
p {
margin: 0 0 1.5em;
}
.jobclass {
display: block;
float: none;
}
.jobclass_type {
color: #6D7A7E;
font: 700 12px/18px Arial;
padding-right: 10px;
}
.jobclass_type {
color: #6D7A7E;
font: 700 12px/18px Arial;
padding-right: 10px;
}
div.jobpost_nav {
float: left;
height: 30px;
margin: 0;
padding: 10px 0 6px !important;
width: 100%;
}
div.jobpost_nav p {
margin: 0 !important;
padding: 0 !important;
}
div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
padding: 8px 14px !important;
}
div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
float: left;
}
div.jobpost_nav a.apply_direct, div.jobpost_nav a.job_basket, div.jobpost_nav a.send_a_friend {
padding: 0 20px 0 0 !important;
width: auto;
}
.not-ie a, .not-ie a > * {
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
.apply_now, .apply_direct, .preview input[type="button"], .links > input.continue {
background: none repeat scroll 0 0 #6A8CB1 !important;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font: 400 11px Arial;
margin: 0 5px 17px 0;
outline: 3px none;
padding: 8px 14px !important;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
a {
background: none repeat scroll 0 0 transparent;
padding: 0;
}
Remove the float from
h2 ain both places.