Grrrr - IE5 css screwups!

**ferrit** · Oct 16, 2004 03:42

Hi,

I can't for the life of me find out why my defintion lists in the right hand column have a huge pad/margin or text-indent and why the background img doesn't show up.

site: http://crsonline.co.uk/site/home/
css: http://crsonline.co.uk/site/_css/site_650px.css

any ideas ???

thanks,

jon

**Paul O'B** · Oct 16, 2004 04:38

Hi Jon,

There are a few reasons for the problems you are experiencing.

The first is your use of the voice family hack which not only hides the following styles in the same block but in IE5 it hide the whole next style block as well. I'm still surprised that the Tantek hack is still widely used and this issue isn't raised more.

The reason most people get away with using it is that they also insert the be kind to opera rule immediately after the hack. (htm>body #etc). Then of coures ie5 jumps this block which it doesn't need anyway.

You are much safer to use the star selector hack and its much easier to use as well (See the FAQ thread on broken box model for a thorough explanation).

The second problem is that you are using margins alone to define the width of the rightcol and ie doesn't like this much and can't work out the width. Most times you can get away with it where space isn't tight but when space is a at a premium you will get float drop.

There is also the added problem of ie's 3 pixel jog (which can be defeated - see FAQ on floats) but in a fixed width is more easily avoided by floating both element and avoiding the 3 pix jog altogether.

Another problem is that you have incorrectly worked out the dimensions of the box model hack so things aren't adding up correctlt, You must add left and right padding to the dimensions (and borders where applicable) to get the true dimension.

However your page will still fail even if you have done this correctly because you are using the xml prologue which causes ie6 to go into quirks mode and use the broken box model. Therfore you need to supply ie6 the same dimensions that you are giving to ie5 and ie5.5. Of course your voice family hack won't do the job because ie6 reads the hack and gives itself back the wrong value.

Just use the star selector hack to pass values to all ie (see FAQ for more info).

Heres your code adjusted to work (although it may still need tweaking).

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--| version 1.0 |-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome | Home | Financial Services Recruitment: crsonline.co.uk</title>
<meta name="keywords" content="Sales Consultants / IFA, Telephone Broker Consultants, Field Auditors, Compliance Managers, Regulated/Endowment Complaints Handler, Compliance Monitoring Officer, Fact Find Auditor, New Business Assessment Officer, Business Review Officer, Pensions, Compliance &amp; T &amp; C Officer, Scheme Administration, Field Auditors, Training and Competence Managers, Training and Competence Officers, Life &amp; Pensions, Paraplanner, Sales Support, Pension Review, Secretarial/PA, Compliance, Training, Mortgage Administration, Underwriters, Mortgage Processors, Training &amp; Development" />
<meta name="description" content="Specialists in Financial Recruitment with a searchable database plus information, resources and links." />
<meta name="author" content="Jon Bennett [ jben.net ]" />
<meta name="copyright" content="Jon Bennett &amp; Compliance Resource Solutions Ltd" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="1 days" />
<meta name="rating" content="general" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
/*<![CDATA[*/
 body {
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Trebuchet MS", verdana, lucida, arial, helvetica, sans-serif;
	background: #00356B url("http://crsonline.co.uk/site/_img/bg_blue_dk.jpg") top left repeat-x;
	/*background: #003882 url("http://crsonline.co.uk/site/_img/bg_blue_lt.jpg") top left repeat-x;*/
	text-align: center;
}
a img {
	border: none;
}
h2, h3, h4, h5, h6 {
	color: #FF5E00;
}
dl, dl dt, dl dd {
	text-indent: 0;
}
.skipnav {
	width: 1px;
	height: 1px;
	text-indent: -9000px;
	font-size: 10px;
	visibility: hidden;
	overflow: hidden;
}
#wrapper {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 650px;
	text-align: left;
	background: #002850 url("http://crsonline.co.uk/site/_img/bg_blue.jpg") top left repeat-x;
}
#banner {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 650px;
	height: 145px;
	text-align: center;
	background: white url("http://crsonline.co.uk/site/_img/banner_650px_blue.jpg") top left no-repeat;
}
h1 {
	margin: 0 auto 0 auto;
	padding: 25px 0 0 0;
	width: 640px;
	height: 25px;
	font-size: 17px;
	color: white;
	text-align: left;
}
h1 a, h1 a:visited, h1 a:hover {
	color: white;
	text-decoration: none;
}
#globalNav {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 640px;
	height: 25px;
	font-size: 11px;
	text-align: right;
}
#globalNav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#globalNav ul li {
	display: inline;
	margin: 0;
	padding: 0;
}
#globalNav ul li a {
	margin: 0 0 0 20px;
	padding: 0 0 3px 0;
	color: #FF5F01;
	text-decoration: none;
	border: none;
}
#globalNav ul li a:hover {
	text-decoration: none;
	border-bottom: 4px solid #FF5F01;
}
#globalNav ul li a#selected {
	text-decoration: none;
	border-bottom: 4px solid #FF5F01;
	color: #FF5F01;
}
/*
	rightCol
*/
#rightCol {
	margin:  30px 0px 5px 15px;
	float:left;
 width:200px;
 padding: 0 0 10px 0;
	text-align: left;
}
#rightCol dl {
	margin: 0 0 5px 10px;
	padding: 0 0 25px 0;
	text-indent: 0;
	background: url("http://crsonline.co.uk/site/_img/rightcol_bot.png") bottom no-repeat;
	text-align: left;
}
#rightCol dl dt {
	margin: 0 0 0 0;
	padding: 7px 5px 0 15px;
	text-indent: 0;
	font-size: 13px;
	font-weight: bold;
	color: #FF5F01;
	text-align: left;
	background: url("http://crsonline.co.uk/site/_img/rightcol_top.png") top no-repeat;
 height: 18px;
}
* html #rightCol dl dt { height: 25px;}/* box model assuming quirks mode*/
#rightCol dl dd {
	list-style-type: none;
	display: block;
	white-space: normal;
	margin: 0 0 0 0;
	padding: 5px 5px 0 15px;
	text-align: left;
	text-indent: 0;
	letter-spacing: 0;
	font-size: 11px;
	color: #012851;
	background: url("http://crsonline.co.uk/site/_img/rightcol_mid.png") top left repeat-y;
}
#rightCol dl dd span.selected {
	text-align: left;
	text-indent: 0;
}
#rightCol dl dd.noBG {
	background: none;
	text-align: left;
	text-indent: 0;
}
#rightCol dl dd a, #rightCol dl dd a:link, #rightCol dl dd a:visited, #rightCol dl dd a:active {
	font-weight: normal;
	text-decoration: underline;
	text-align: left;
	color: #0880FF;
	text-indent: 0;
}
#rightCol dl dd a:hover {
	text-decoration: none;
	text-indent: 0;
}

#main {
 float: left;
 margin: 0;
 padding: 10px 5px 5px 10px;
 width: 415px;
 text-align: left;
 color: #eee;
}
* html #main { width: 430px;  /* box model hack */ }
#main h2 {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	font-size: 16px;
	color: #FF5E00;
	text-align: left;
	border-bottom: 1px dotted #717171;
}
#main h3 {
	clear: both;
	margin: 0 0 5px 0;
	padding: 0 0 0 0;;
	font-size: 14px;
	color: #FF5E00;
	text-align: left;
	/*border-bottom: 1px dotted #717171;*/
}
#main p {
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 11px;
	line-height: 1.5em;
	color: #eee;
	clear: both;
	text-align: justify;
}
#main a, #main a:visited, #main a:active {
	color: #0880FF;
	text-decoration: underline;
}
#main a:hover {
	text-decoration: none;
}
#main a#apply {
	clear: both;
	display: block;
	margin: 0 0 10px 0;
	padding: 5px;
	font-size: 13px;
	font-weight: bolder;
	text-decoration: none;
	color: #FF5E00;
	border: 1px solid #FF5E00;
	background: #0365C9;
text-align: center;
}
#main a#apply:hover {
	color: #0365C9;
	border: 1px solid #0365C9;
	background: #FF5E00;
}
#main p.boldType {
	font-weight: bold;
}
#main p.nb {
	margin: 0;
	padding: 10px;
	font-style: italic;
}
#main dl {
	margin: 0;
	padding: 0;
	font-size: 11px;
	text-indent: 0;
	text-align: left;
	line-height: 1.5em;
}
#main dl dt {
	margin: 1em 0 0 0;
	padding: 0 0 0.2em 0;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}
#main dl dt:first-child {
	margin: 0 0 0 0;
}
#main dl dd {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style-type: none;
}
	
#main .rowContainer {
	margin: 0;
	padding: 10px 0 10px 0;
	width: 395px;
}
#main .row {
	margin: 0;
	padding: 0;
	clear: both;
	width: 100%;
}
#main .row span.note {
	display: inline;
	margin: 0;
	padding: 0 0 5px 0;
	float: right; 
	width: 250px; 
	font-size: 11px;
	text-align: left;
	color: #fff;
}
#main .row span.labels {
	display: inline;
	margin: 0;
	padding: 0 0 5px 0;
	float: left; 
	width: 135px; 
	text-align: left;
	font-size: 11px;
	color: #fff;
}
#main .row span.labelsRequired {
	display: inline;
	margin: 0;
	padding: 0 0 5px 0;
	float: left; 
	width: 135px; 
	text-align: left;
	font-size: 11px;
	color: #fff;
	font-weight: bold;
	/*font-style: italic;*/
}
#main .row span.items {
	display: inline;
	margin: 0;
	padding: 0 0 5px 0;
	float: right; 
	width: 250px; 
	font-size: 11px;
	text-align: left;
	color: #fff;
}
#main form input, .rowContainer .row input, #main form textarea, .rowContainer .row textarea {
	margin: 0;
	padding: 3px;
	border: 1px solid #cccccc;
	font-size: 11px;
	color: #666;
}
#main form select, .rowContainer .row select {
	margin: 0;
	padding: 0;
	border: 1px solid #cccccc;
	font-size: 11px;
	color: #666;
}
#main ul#summary {
	margin: 10px 0 10px 0; 
	padding: 10px; 
	text-indent: 0; 
	list-style-type: none; 
	font-size: 11px; 
	line-height: 1.5em; 
	/*border-left: 5px solid #FF5E00;
	color: #767676;
	background: #eeeeee;*/
	font-weight: bold;
	text-align: left;
}
#main ul.extras {
	margin: 0 0 10px 3px; 
	padding: 0 10px; 
	text-indent: 0; 
	list-style-type: square; 
	font-size: 11px; 
	line-height: 1.5em; 
	color: #eee;
	font-weight: normal;
}
#main ul.extras li {
	font-size: 11px;
	text-align: left;
}
#main .miniCol {
	float: left;
	width: 50%;
}
ul.address {
	margin: 10px 0 10px 0;
	padding: 0;
	display: list-item;
	list-style-type: none;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
}
ul.address li {
	margin: 0 0 5px 0;
	padding: 0;
	text-align: left;
}
ul.address li span.Label {
	font-weight: normal;
}
ul#categories {
	display: block;
	float: left;
	width: 49%;
	margin: 10px 0 10px 0;
	padding: 0;
	display: list-item;
	list-style-type: none;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}
ul#categories li {
	margin: 10px 0 10px 0;
	padding: 0;
	display: block;
	text-align: left;
}
ul#categories li ul.sub-categories {
	margin: 2px 0 15px 0;
	padding: 0;
	display: block;
	list-style-type: circle;
	font-size: 11px;
	text-align: left;
}
ul#categories li ul.sub-categories li {
	margin: 10px 0 10px 15px;
	padding: 0 5px 0 0;
	display: list-item;
	font-weight: normal;
	white-space: nowrap; 
	text-align: left;
}
#breadcrumb {
	clear: both;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	font-size: 9px;
	font-style: normal;
	text-align: left;
	color: #eee;
}
#breadcrumb ul {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
#breadcrumb li {
	margin: 10px 0 10px 0;
	padding: 0 5px 0 5px;
	display: inline;
	border-left: 1px solid #cccccc;
}
#breadcrumb li:first-child {
	padding: 0 5px 0 0;
	border: none;
}
#backtotop {  
	clear: both;
	margin: 10px 0 10px 0;
	padding: 10px 15px 15px 15px;
	color: #FF5F01;
	font-size: 10px;
	text-align: left;
	font-weight: bold;
}
#backtotop a, #backtotop a:visited, #backtotop a:active {
	color: #FF5F01;
	text-decoration: underline;
}
#backtotop a:hover {
	text-decoration: none;
}
#footer {
	margin: 5px auto 10px auto;
	padding: 0;
	width: 650px;	
	font-size: 9px;
	color: white;
}
#footer span {
	display: block;
	padding: 2px 2px 2px 2px;
	margin: 0;
}
#footer span a, #footer span a:visited, #footer span a:active {
	color: white;
	text-decoration: underline;
}
#footer span a:hover {
	text-decoration: none;
}
#error {
	margin: 0;
	padding: 0;
	color: #FF3300;
	font-size: 10px;
}
#error h1 {
	color: #FF3300;
	font-weight: bold;
}
#error p {
	color: #FF3300;
	font-weight: normal;
}
#error ul {
	text-align: left;
	margin-left: 0;
	padding-left: 0;
}
#error li {
	list-style-type: none;
	padding: 0px;
	display: block;
}
#error li:first-child {
	border: none;
}  
   
/*]]>*/
</style>
<link rel="stylesheet" href="/site/_css/print.css" title="print styles" type="text/css" media="print" />
</head>
<body>
<a id="top"></a> 
<h1><a href="/site/" title="return to homepage">Financial Services Recruitment: 
  crsonline.co.uk</a></h1>
<div class="skipnav"><a href="#content" title="skip navigation">skip navigation</a></div>
<div id="globalNav"> 
  <ul>
	<li id="home"><a id="selected" href="/site/home/" title="home">home</a></li>
	<li id="candidates"><a href="/site/candidates/" title="candidates services">candidates</a></li>
	<li id="vacancies"><a href="/site/vacancies/" title="vacancies">vacancies</a></li>
	<li id="companyprofile"><a href="/site/company/" title="our company profile">company</a></li>
	<li id="contact"><a href="/site/contact/" title="contact">contact</a></li>
  </ul>
</div>
<!-- globalNav -->
<div id="wrapper"> 
  <div id="banner"></div>
  <a id="content"></a> 
  <div id="main"> 
	<h2>Welcome</h2>
	<p class="boldType">Welcome to the new look Compliance Resource Solutions 
	  Ltd web site. We are dedicated to excelling within the UK Recruitment industry.</p>
	<p>Please <a href="/site/accounts/register.php" title="Register with us, including uploading your cv">Register</a> 
	  with us if you have not done so before, otherwise, please <a href="/site/accounts/" title="Login to your account">Login</a>.</p>
	<p>We currently have vacancies in the following disciplines: <strong>Sales 
	  Consultants / IFA, Telephone Broker Consultants, Field Auditors, Compliance 
	  Managers, Regulated/Endowment Complaints Handler, Compliance Monitoring 
	  Officer, Fact Find Auditor, New Business Assessment Officer, Business Review 
	  Officer, Pensions, Compliance &amp; T &amp; C Officer, Scheme Administration, 
	  Field Auditors, Training and Competence Managers, Training and Competence 
	  Officers, Life &amp; Pensions, Paraplanner, Sales Support, Pension Review, 
	  Secretarial/PA, Compliance, Training, Mortgage Administration, Underwriters, 
	  Mortgage Processors, Training &amp; Development</strong>.</p>
	<h3>Site news 09/04</h3>
	<p>We are currenty implementing new features, such as an advanced vacancy 
	  search and customised email newsletters notifying you of any new positions 
	  in the areas you want, so you can find the right job for you quicker and 
	  easier.</p>
  </div>
  <!-- main -->
  <div id="rightCol"> 
	<dl>
	  <dt>Candidates:</dt>
	  <dd><a href="/site/candidates/index.php" >Login</a> | <a href="/site/candidates/register.php" >Register</a></dd>
	</dl>
	<dl>
	  <dt>latest vacancies:</dt>
	  <dd><a href="/site/vacancies/index.php?vacancy_id=126">Compliance &amp; 
		T &amp; C Officer</a> - BRISTOL / SOUTH WEST</dd>
	  <dd><a href="/site/vacancies/index.php?vacancy_id=125">Protection/Investment 
		Consultant</a> - CARDIFF</dd>
	  <dd><a href="/site/vacancies/index.php?vacancy_id=124">Training &amp; Development 
		Manager</a> - Leeds - West Yorkshire</dd>
	  <dd><a href="/site/vacancies/index.php?vacancy_id=123">Assistant Group Competence 
		Co-Ordinator</a> - Leeds - West Yorkshire</dd>
	  <dd><a href="/site/vacancies/index.php?vacancy_id=122">P.A. To The Group 
		Directors</a> - Leeds - West Yorkshire</dd>
	</dl>
  </div>
  <!-- rightCol -->
  <div id="backtotop">&uarr; <a href="#top" title="go to the top of the page">back 
	to top</a></div>
</div>
<!-- wrapper -->
<div id="footer"> <span><a href="/site/privacy_policy.html" target="_blank">privacy 
  policy</a></span> <span>All content &copy; 2004 <a href="<A href="http://crsonline.co.uk">Compliance">http://crsonline.co.uk">Compliance 
  Resource Solutions Ltd</a> | <a href="<A href="mailto:info@crsonline.co.uk">info@crsonline.co.uk</a></span">mailto:info@crsonline.co.uk">info@crsonline.co.uk</a></span> 
  <span>Design &amp; Developement &copy; 2004 <a href="http://www.jben.net" target="_blank">Jon 
  Bennett</a> | valid <a href="http://validator.w3.org/check/referer" target="_blank">xhtml</a> 
  &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></span> 
</div>
</body>
</html>

(The absolute image addresees were for my benefit in testing so turn them back to relative.)

Hope that helps.

Paul

**ferrit** · Oct 16, 2004 12:43

Hi Paul,

Many many many thanks, I had no idea it was such a convoluted and complicated issue dealing with IE on the PC (I'm an avid OSX user).

I've managed to get my css designs to work in IE before, but I guess that was by shear luck more than anything else!

I was unaware of the issues regarding Tantek's hack, and have been pulling my hair out trying to figure out why my #main h2 wasn't behaving at all like it shoiuld.

I had also been using a single floated div, with the small right hand div just a margin (ala a list apart) because Safari didn't like it when I used clear: both in either of the columns, it didn't occur to me to try floating them both left (originally I had been floating left and right) so thanks for that also.

I had another site in production that uses a very similar layout, so I can also now fix the same h2 problem on that

I've uploaded the changes you made to the css file and it all works flawlessly now, cheers.

Greatly appreciated mate.

Jon

User Tag List

Thread: Grrrr - IE5 css screwups!

Thread Tools

Display

Grrrr - IE5 css screwups!

Bookmarks

Bookmarks

Posting Permissions