Can someone help me with this?

Xenonsoft

Active Member
I'm just coding up this site, and need a couple of corrections to get it going. Any help or general tips are appreciated.

Sandra Neylon Occupational Health Ltd - Vocational Rehabilitation and Absence Management

Two problems:

  1. The image doesn't float proplery on IE7 (havent checked IE6/8). The text won't come up and wrap round it.
  2. There's an extra bit of white space on the right, producing the scroll bar. No idea why, it's bound to be something extremely obvious.
The code for the site:

HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sandra Neylon Occupational Health Ltd - Vocational Rehabilitation and Absence Management</title>

<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<body>
<div id="header">
<h1 id="header_title">Neylon Occupational Health Ltd</h1>
<h2 id="header_motto">Good Health is Good Business</h2>
<div id="container_header">
</div>
</div>

<div id="container">
<h3>Welcome to Sandra Neylon Occupation Health</h3>
<div id="div_img"><img id="profile_img" src="http://www.designforums.co.uk/images/profile_img.png" /><br /><p>Sandra Neylon</p></div>

<p>Having worked as an RGN at Queen Mary’s hospital Sidcup, Sandra left general nursing to pursue a career in Occupational Health in 1995. She gained a BSc honours degree in Occupational Health from the RCN in 1999.</p>

<p>In 2000 she set up Neylon Occupational Health Ltd (NOHL) specialising in Vocational Rehabilitation and Absence Management, providing an occupational health service to Tate & Lyle and ICI Akzonobel along with many other organisations.</p>

<p>In recent years Sandra has focused a lot of her work on helping companies to deal with the &lsquo;sick-note culture&rsquo;. In  partnership with Tate & Lyle, NOHL have won several awards in the field of  Rehabilitation/Absence Management including Gold in the Food and Drink Federation&rsquo;s  Community Partnerships Award 2008, won gold for our &lsquo;Active  Back-care Management Programme&rsquo; in 2007 at the &lsquo;Occupational Health  Magazine Awards&rsquo; which also won silver at the FDF&rsquo;s Community Partnerships Awards.Sandra was also named Health Volunteer of the Year 2007 by the East London Business Alliance for advice given to them on community health programs.</p>

<h4>Services:</h4>

<ul>
  <li>Pre-employment fitness for work  assessments</li>
  <li>Fitness to return to work following illness or  injury</li>
  <li>Management referral assessment</li>
  <li>Health surveillance: will be provided where  required by legislation or best practice in response to certain workplace  exposures </li>
  <li>Musculoskeletal injury management service</li>
  <li>Maintaining medical records inline with best  practice</li>
  <li>Sickness/absence management</li>
  <li>Management of ill-health early retirement cases</li>
  <li>Provide telephone advice to HR professionals and  line managers </li>
  <li>Provide advice on queries relating to health  aspects of any of the companies products</li>
  <li>Provision of health awareness training including  stress management, manual handling training</li>
  <li>Health & Safety advisory service:  Advice to be provided on matters in the areas  of legislation, policies & procedures, training, drugs & alcohol</li>
</ul>

<h4>Contact me:</h4>
<p><acronym title="Telephone">T:</acronym> +44 (0)7595-220909<br />
  <acronym title="Fax">F:</acronym> +44 (0)20-8300-1724<br />
  <acronym title="E-mail">E:</acronym> [email protected]<br />
  <acronym title="Address">A:</acronym> 51 Willersley Avenue<br />
  Sidcup<br />
  Kent<br />
  DA15 9EJ</p>

</div>
<div id="container_btm_bg">
</div>
</body>
</html>
CSS
Code:
@charset "utf-8";/* CSS Document */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; }#header {    background-image:url(images/header_bg.png);    height:10.938em; /* 10.938 * 16 = 175px */    background-repeat:repeat-x;    width:100%;}#header_title {    font-family:Georgia, Times New Roman, Times, serif;    font-size:3.438em; /* 3.438 * 16 = 55px */    font-weight:400;    color:#FFFFFF;    margin-left:auto;    margin-right:auto;    width:14.34em; /* 14.34 * 55 = 789px */    padding-top:0.364em; /* 0.364 * 55 = 20px */}#header_motto {    font-family:Georgia, Times New Roman, Times, serif;    font-size:2.375em; /* 2.375 * 16 = 38px */    font-style:italic;    font-weight:400;    color:#3a3a62;    margin-left:auto;    margin-right:auto;    width:13.3em; /* 13.3 * 38 = 505px */    padding-top:0.526em; /* 0.526 * 38 = 20px */}#container_header {    width:42.563em; /* 42.563 * 16 = 681px */    height:0.75em; /* 0.75 * 16 = 10px */    margin-left:auto;    margin-right:auto;    margin-top:19px;    background-color:#FFFFFF;}#container {    width:43.563em; /* 43.563 * 16 = 697px */    margin-left:auto;    margin-right:auto;    padding-bottom:0.625em; /* 0.625 * 16 = 10px */    background-image:url(images/container_bg.png);}#container h3 {    font-size:1.125em; /* 1.125 * 16 = 18px */    font-family:Arial, Helvetica, sans-serif;    font-weight:700;    line-height:1.5em;    width:35.389em; /* 35.389 * 18 = 637px (This gives a 10px border each side of the text)*/    margin-left:auto;    margin-right:auto;    padding:0.278em 0 0.222em 0; /* 0.288 * 18 = 5px */ /* 0.222 * 18 = 4px */ /* padding format: top right bottom left */}#container h4 {    font-size:1em; /* 1 * 16 = 16px */    font-family:Arial, Helvetica, sans-serif;    font-weight:600;    line-height:1.5em;    width:39.813em; /* 39.813 * 16 = 637px (This gives a 10px border each side of the text)*/    margin-left:auto;    margin-right:auto;    padding:0.25em 0 0.25em 0; /* 0.25 * 16 = 4px */ /* padding format: top right bottom left */}#container p {    font-size:0.75em; /* 0.75 * 16 = 12px */    font-family:Arial, Helvetica, sans-serif;    line-height:1.5em;    font-weight:400;    width:53.083em; /* 53.083 * 12 = 637px (This gives a 10px border each side of the text) */    margin-left:auto;    margin-right:auto;    padding:0.333em 0 0.333em 0; /* 0.333 * 12 = 4px */ /* padding format: top right bottom left */}ul {    font-size:0.75em; /* 0.75 * 16 = 12px */    font-family:Arial, Helvetica, sans-serif;    line-height:1.5em;    font-weight:400;    width:55.083em; /* 55.083 * 12 = 661px (This gives a 10px border each side of the text) */    margin-left:auto;    margin-right:auto;    padding:0.333em 0 0.333em 2em; /* 0.333 * 12 = 4px */ /* padding format: top right bottom left */ /* 2em (24px) brings the bullet points in */}#profile_img {    width:11.75em; /* 11.75 * 16 = 188px */    height:12.313em; /* 12.313 * 16 = 197px */}#container_btm_bg {    background-image:url(images/container_btm_bg.png);    height:0.5em; /* 0.5 * 16 = 8px */    width:43.563em; /* 43.563 * 16 = 697px */    margin-left:auto;    margin-right:auto;}#div_img {    float:right;    width:188px; /* 11.75 * 16 = 188px */    padding:0.313em 1.875em 0.313em 0.5em; /* 0.313 * 16 = 5px */ /* 1.875 * 16 = 30px */ /* 0.5em * 16 = 8px /* padding format: top right bottom left */}

There's scroll bars in there (it's formatted oddly).
 
1. Instead of floating a div container, why not just use align="right" on the image with some padding.
2. I dont see any horizontal scrollbar appear in IE7/FF. Which browser?
 
Ignore 1. I see what you are doing now, you are floating it so that all paragraphs wrap around the floated element.
 
darren said:
1. Instead of floating a div container, why not just use align="right" on the image with some padding. Ignore 1. I see what you are doing now, you are floating it so that all paragraphs wrap around the floated element.
2. I dont see any horizontal scrollbar appear in ie7/ff. Which browser?
1. Yeah, that's the one :)

2. Horizontal scroll bar appears in FF 3.0.7, IE 7.0.6001, Google Chrome 1.0.154.53, Safari 3.2.2.

Cheers for trying to help Darren :up:
 
Hmm, that does indeed fix both of them! I take it you can't use fixed widths for text then. I added that as I wanted the same side margin-left and right, so did that and centered it with margin-left:auto and margin-right:auto.

I'll do it another way and hopefully all will be well.

Thanks very much Darren!
 
Well you can have fixed withs on text via a paragraph, but its generally not really done that way, you should fix the width of the container and then just use margin/padding on the paragraph to provide the correct widths, since it will always try to be 100% wide.

Just to explain both the problems. FF does not seem to adhere to the fixed with of the <p> tag, so it looked right. IE did and therefore pushed the paragraphs under the image since it could not makes the paragraphs the correct width if it wrapped them.

The reason you got the scrollbars (and because I didnt see them was in indication that it is a fixed width problem - higher resolution) was because the floated div that contains your image, also has a paragraph in it where you have the persons name. This meant that the 637 pixels that you had assigned to your paragraph started at half-way through the content div and at the top right. So you had a paragraph that contained the persons namethat extended right out of the page to the right.

Hope this helps.
 
Fantastic Darren. That all makes sense, really appreciate that. Learnt a few new things today, many thanks!
 
Back
Top