Emmanize
08-18-2006, 09:30 AM
I have been asked to re design a fan site for someone, so I kind of thought why not, however I need some help. I have still been fiddling with the layout of this site. All has gone well until I remembered IE and now I have come across a problem I cannot fix. Basically it looks perfect in FF, however in IE the middle divs (Main image and content) are sitting off the screen, and the container has stretched down with it. I have tried everything I know and nothing works. The only thing that nearly works is “position: absolute;” but when that is done the image sits on top of the text and I can’t separate them. I have tried “display: inline;” but that only worked in FF. :confused: I know alot of you don't like ems but I have tried it in %s and pxls and its not made any difference towards the problem.
Can anyone help?
*Please only comments that may help the problem*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fan Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css_sheet.css" /> </head>
<body>
<div id="container">
<div id="header"> HEADER </div><!--end of header div-->
<br />
<div id="left">
<h3>Navigation</h3>
<br />
<ul>
<li><a href="services.htm" title="Find out more about what we can offer you">Official Fan Forum</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Gordon's Media</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Fan Art</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Recommended Links</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Gordons MySpace</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Contact Us</a></li>
</ul>
<br />
<div id="tourdates">
<h3>Features</h3>
<br />
<div id="overflow"><h4>GORDON'S BOOKS</h4><br />
<p>Gordon is an accomplished writer and teacher and conducts workshops and events around the world.</p>
<br />
<div id="image"><img src="images/sm.jpg" /></div>
<div id="image"><img src="images/UT_PB.jpg" /></div>
<div id="image"><img src="images/ThroughMy_new.jpg" />
</div>
</div>
</div>
</div>
<div id="right">
<h3>Navigation</h3>
<br />
<ul>
<li><a href="services.htm" title="Find out more about what we can offer you">Spiritualism</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Mental Mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Physical mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">The Seven Principles</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">SNU Today</a></li>
</ul>
<br />
<div id="books">
<h3>Tourdates</h3>
<div id="overflow">
<h4>TOUR IN THE UK</h4><br /><li><strong>Tuesday 5th September</strong> <br />Gordon's Bookshop Tour Milton Keynes<br />
</li>
<li><strong>Wednesday 6th September </strong><br />An Evening of Mediumship with GORDON SMITH <br /><br /></li>
<li><h4>TOUR IN THE USA</h4> <br /><strong>Date: September 12, 2006</strong>, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Pennsylvania Convention Center Authority, Philadelphia, PA</li><br />
<li><strong>Date: September 14, 2006</strong>, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Boston Convention and Exhibition Center - Auditorium, Boston, MA </li><br />
<li><strong>Date: September 16</strong>, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Buffalo Niagara Convention Center - Exhibit Hall South, Buffalo, NY</li><br />
<li><strong>Date: September 18</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: COBO Conference/Exhibit Center, Detroit, MI</li><br />
<h4>TOUR IN THE UK</h4><br />
<li><strong>Tuesday 3rd October </strong><br />Gordon's Bookshop Tour Guildford Venue: Ottakers <br />71-73 High Street, Guildford, Surrey, GU1 3DY <br />Time: 7.00pm <br />Tel: 01483 536 366 <br />Email: guildford@ottakars.co.uk <br /></li> <br />
<li><strong>Wednesday 4th October </strong><br />Gordon's Bookshop Tour Basildon Venue: Ottakers <br />Unit 45, Eastgate Centre, Basildon, Essex, SS14 1AE <br />Tel: 01268 532255 <br />Email: basildon@ottakars.co.uk <br /></li><br />
<li><strong>Thursday 5th October </strong><br />Gordon's Bookshop Tour Notting Hill <br />Venue: Waterstone's <br />39-41 Notting Hill Gate, London W11 3JQ <br />Time: 6.30pm <br />Tel: 020 7229 9444 <br /></li><br />
<li><strong>Monday 9th October</strong> <br />Gordon's Bookshop Tour Crewe <br />Venue: Ottakers <br />19 Victoria Street Crewe, Cheshire CW1 2HF Tel: 01270 580022 <br />Email: crewe@ottakars.co.uk <br /></li><br />
<li><strong>Thursday October 12</strong> <br />Gordon's Bookshop Tour Bolton <br />Venue: Sweetens of Bolton Ltd 86, Deansgate, Bolton, Lancashire BL1 1BD <br />Time: 6.30pm <br />Tel: 01204 528 457 <br /></li><br />
<li><strong>Sunday 15th Octobe</strong>r <br />An Evening of Mediumship with GORDON <br />Ticket Price: £18.00 SOLD OUT (booking fees may apply) <br />Venue: The Logan Hall, Institute of Education, University of London, 20 Bedford Way, London WC1H 0AL <br />Time: 7.00pm (Doors open 6.30pm) <br /></li><br />
<li><strong>Monday 16th October</strong> <br />Gordon's Bookshop Tour Bromsgrove <br />Ottakar's 66-68 High Street Bromsgrove, Worcestershire B61 8EX <br />Tel: 01527 833339 <br />Venue: Atrix Theatre School Drive, Bromsgrove, B60 1AX <br />Time: 6.30pm <br />Tel: 01527 577330 <br /></li><br />
<h4>TOUR IN THE USA</h4><br />
<li><strong>Date: November 14</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Nob Hill Masonic Center - Auditorium, San Francisco, CA Directions: Click Here </li><br />
<li><strong>Date: November 17</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA </li><br />
<li><strong>Date: November 17</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA </li><br />
<li><strong>Date: November 19</strong>, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Washington State Convention & Trade Center - Ballroom 6ABC, Seattle, WA </li><br />
<li><strong>Date: November 21</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Orpheum Theater, Vancouver, Canada </li><br />
<h4>TOUR IN THE UK</h4><br />
<li><strong>Wednesday 29th November</strong> <br />Gordon's Bookshop Tour Glasgow <br />Ottakar's 7.30 38A The Plaza, East Kilbride, Glasgow, G74 1LW <br />Venue: TBC <br />Time: 7.30pm <br />Tel: 01355 271 835 <br />Email: eastkilbride@ottakars.co.uk <br /></li><br />
<li><strong>30th November </strong><br />Gordon's Bookshop Tour Glasgow <br />Ottakar's 38 Avenue Centre, Newton Mearns, Glasgow G77 6EY <br />Tel: 0141 616 3933 <br />newtonmearns@ottakars.co.uk <br />Venue: Church at the Cross, Ayr Road, Newton Mearns <br />Time: 7.00pm <br />Tel: 01204 528 457 <br /></li><br />
<li><strong>Saturday 2nd & Sunday 3rd December 2006 </strong><br />Christmas Cavalcade of Clairvoyance at the Spiritualist Association of Great Britain <br />Ticket Price: £20.00 SOLD OUT <br />Venue: SAGB, 33 Belgrave Square, London SW1X 8QB <br />Time: 10.45am to 5.30pm each day <br />
<strong>More dates may be announced shortly. For more information visit spiritualistassociation.org.uk</strong></li><be />
</div>
</div>
</div>
<div id="content">
<div id= "center"><img src="images/gordon2.jpg" width="398" height="337" /> </div>
<br />
<div id="text-content"><h4>About</h4>
<br />
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div><!--end of text-content div-->
</div><!--end of content div-->
</div><!--end of container div-->
</div>
</body>
</html>
/* CSS Document */
*{
margin: 0;
padding: 0;
}
/* Put margins back on certain elements */
h1, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
}
body {
margin: 0;
padding: 0;
font: normal 11px verdana,arial,helvetica,sans-serif;
background-color: #FFDFCC;
color:#666;
}
#header {
background-color: #66CCFF;
border: 1px solid black;
}
#container {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
margin-top: 2em;
width: 900px;
height: 53em;
background-color: #fff;
padding:5px;
}
#left, #right {
float: left;
width: 22em;
height: 20em;
list-style: none;
background-color: #FFF8F4;
}
#left ul {
list-style: none;
}
#center {
text-align: center;
position: static;
clear: both;
display:inline;
}
#right {
float: right;
list-style: none;
height: 20em;
}
#left li a {
color: #000000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
display: block;
text-transform: capitalize;
}
#left ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right li a {
color: #000000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
display: block;
text-transform: capitalize;
}
#right ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right, #left li a:visited {
color: 000000;
}
#content {
margin-left: 250px;
margin-right: 250px;
top: 1em;
}
h3 {
background-color: #FFCBAE;
padding: 5px;
border: 1px solid black;
font-size: 12px;
text-align: center
}
h4 {
background-color: #66CCFF;
font-size: 10px;
}
#books, #tourdates {
float: left;
width: 22em;
list-style: none;
height: 330px;
}
#tourdates {
float: right;
list-style: none;
height: 330px;
}
#overflow {
width: 230px;
height: 340px;
overflow: auto;
background-color: #FFF8F4;
padding: 4px;
}
#footer {
overflow: auto;
clear: both;
border: 1px solid black;
background-color: #FFF8F4;
}
#image {
float: left;
margin-right: 1em;
}
#text-content {
padding: 1em;
text-align: justify;
bottom: 20em;
}
Can anyone help?
*Please only comments that may help the problem*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fan Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css_sheet.css" /> </head>
<body>
<div id="container">
<div id="header"> HEADER </div><!--end of header div-->
<br />
<div id="left">
<h3>Navigation</h3>
<br />
<ul>
<li><a href="services.htm" title="Find out more about what we can offer you">Official Fan Forum</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Gordon's Media</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Fan Art</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Recommended Links</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Gordons MySpace</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Contact Us</a></li>
</ul>
<br />
<div id="tourdates">
<h3>Features</h3>
<br />
<div id="overflow"><h4>GORDON'S BOOKS</h4><br />
<p>Gordon is an accomplished writer and teacher and conducts workshops and events around the world.</p>
<br />
<div id="image"><img src="images/sm.jpg" /></div>
<div id="image"><img src="images/UT_PB.jpg" /></div>
<div id="image"><img src="images/ThroughMy_new.jpg" />
</div>
</div>
</div>
</div>
<div id="right">
<h3>Navigation</h3>
<br />
<ul>
<li><a href="services.htm" title="Find out more about what we can offer you">Spiritualism</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Mental Mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">Physical mediumship</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">The Seven Principles</a></li>
<li><a href="services.htm" title="Find out more about what we can offer you">SNU Today</a></li>
</ul>
<br />
<div id="books">
<h3>Tourdates</h3>
<div id="overflow">
<h4>TOUR IN THE UK</h4><br /><li><strong>Tuesday 5th September</strong> <br />Gordon's Bookshop Tour Milton Keynes<br />
</li>
<li><strong>Wednesday 6th September </strong><br />An Evening of Mediumship with GORDON SMITH <br /><br /></li>
<li><h4>TOUR IN THE USA</h4> <br /><strong>Date: September 12, 2006</strong>, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Pennsylvania Convention Center Authority, Philadelphia, PA</li><br />
<li><strong>Date: September 14, 2006</strong>, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Boston Convention and Exhibition Center - Auditorium, Boston, MA </li><br />
<li><strong>Date: September 16</strong>, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Buffalo Niagara Convention Center - Exhibit Hall South, Buffalo, NY</li><br />
<li><strong>Date: September 18</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: COBO Conference/Exhibit Center, Detroit, MI</li><br />
<h4>TOUR IN THE UK</h4><br />
<li><strong>Tuesday 3rd October </strong><br />Gordon's Bookshop Tour Guildford Venue: Ottakers <br />71-73 High Street, Guildford, Surrey, GU1 3DY <br />Time: 7.00pm <br />Tel: 01483 536 366 <br />Email: guildford@ottakars.co.uk <br /></li> <br />
<li><strong>Wednesday 4th October </strong><br />Gordon's Bookshop Tour Basildon Venue: Ottakers <br />Unit 45, Eastgate Centre, Basildon, Essex, SS14 1AE <br />Tel: 01268 532255 <br />Email: basildon@ottakars.co.uk <br /></li><br />
<li><strong>Thursday 5th October </strong><br />Gordon's Bookshop Tour Notting Hill <br />Venue: Waterstone's <br />39-41 Notting Hill Gate, London W11 3JQ <br />Time: 6.30pm <br />Tel: 020 7229 9444 <br /></li><br />
<li><strong>Monday 9th October</strong> <br />Gordon's Bookshop Tour Crewe <br />Venue: Ottakers <br />19 Victoria Street Crewe, Cheshire CW1 2HF Tel: 01270 580022 <br />Email: crewe@ottakars.co.uk <br /></li><br />
<li><strong>Thursday October 12</strong> <br />Gordon's Bookshop Tour Bolton <br />Venue: Sweetens of Bolton Ltd 86, Deansgate, Bolton, Lancashire BL1 1BD <br />Time: 6.30pm <br />Tel: 01204 528 457 <br /></li><br />
<li><strong>Sunday 15th Octobe</strong>r <br />An Evening of Mediumship with GORDON <br />Ticket Price: £18.00 SOLD OUT (booking fees may apply) <br />Venue: The Logan Hall, Institute of Education, University of London, 20 Bedford Way, London WC1H 0AL <br />Time: 7.00pm (Doors open 6.30pm) <br /></li><br />
<li><strong>Monday 16th October</strong> <br />Gordon's Bookshop Tour Bromsgrove <br />Ottakar's 66-68 High Street Bromsgrove, Worcestershire B61 8EX <br />Tel: 01527 833339 <br />Venue: Atrix Theatre School Drive, Bromsgrove, B60 1AX <br />Time: 6.30pm <br />Tel: 01527 577330 <br /></li><br />
<h4>TOUR IN THE USA</h4><br />
<li><strong>Date: November 14</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Nob Hill Masonic Center - Auditorium, San Francisco, CA Directions: Click Here </li><br />
<li><strong>Date: November 17</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA </li><br />
<li><strong>Date: November 17</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA </li><br />
<li><strong>Date: November 19</strong>, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Washington State Convention & Trade Center - Ballroom 6ABC, Seattle, WA </li><br />
<li><strong>Date: November 21</strong>, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Orpheum Theater, Vancouver, Canada </li><br />
<h4>TOUR IN THE UK</h4><br />
<li><strong>Wednesday 29th November</strong> <br />Gordon's Bookshop Tour Glasgow <br />Ottakar's 7.30 38A The Plaza, East Kilbride, Glasgow, G74 1LW <br />Venue: TBC <br />Time: 7.30pm <br />Tel: 01355 271 835 <br />Email: eastkilbride@ottakars.co.uk <br /></li><br />
<li><strong>30th November </strong><br />Gordon's Bookshop Tour Glasgow <br />Ottakar's 38 Avenue Centre, Newton Mearns, Glasgow G77 6EY <br />Tel: 0141 616 3933 <br />newtonmearns@ottakars.co.uk <br />Venue: Church at the Cross, Ayr Road, Newton Mearns <br />Time: 7.00pm <br />Tel: 01204 528 457 <br /></li><br />
<li><strong>Saturday 2nd & Sunday 3rd December 2006 </strong><br />Christmas Cavalcade of Clairvoyance at the Spiritualist Association of Great Britain <br />Ticket Price: £20.00 SOLD OUT <br />Venue: SAGB, 33 Belgrave Square, London SW1X 8QB <br />Time: 10.45am to 5.30pm each day <br />
<strong>More dates may be announced shortly. For more information visit spiritualistassociation.org.uk</strong></li><be />
</div>
</div>
</div>
<div id="content">
<div id= "center"><img src="images/gordon2.jpg" width="398" height="337" /> </div>
<br />
<div id="text-content"><h4>About</h4>
<br />
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div><!--end of text-content div-->
</div><!--end of content div-->
</div><!--end of container div-->
</div>
</body>
</html>
/* CSS Document */
*{
margin: 0;
padding: 0;
}
/* Put margins back on certain elements */
h1, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
}
body {
margin: 0;
padding: 0;
font: normal 11px verdana,arial,helvetica,sans-serif;
background-color: #FFDFCC;
color:#666;
}
#header {
background-color: #66CCFF;
border: 1px solid black;
}
#container {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
margin-top: 2em;
width: 900px;
height: 53em;
background-color: #fff;
padding:5px;
}
#left, #right {
float: left;
width: 22em;
height: 20em;
list-style: none;
background-color: #FFF8F4;
}
#left ul {
list-style: none;
}
#center {
text-align: center;
position: static;
clear: both;
display:inline;
}
#right {
float: right;
list-style: none;
height: 20em;
}
#left li a {
color: #000000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
display: block;
text-transform: capitalize;
}
#left ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right li a {
color: #000000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
display: block;
text-transform: capitalize;
}
#right ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right, #left li a:visited {
color: 000000;
}
#content {
margin-left: 250px;
margin-right: 250px;
top: 1em;
}
h3 {
background-color: #FFCBAE;
padding: 5px;
border: 1px solid black;
font-size: 12px;
text-align: center
}
h4 {
background-color: #66CCFF;
font-size: 10px;
}
#books, #tourdates {
float: left;
width: 22em;
list-style: none;
height: 330px;
}
#tourdates {
float: right;
list-style: none;
height: 330px;
}
#overflow {
width: 230px;
height: 340px;
overflow: auto;
background-color: #FFF8F4;
padding: 4px;
}
#footer {
overflow: auto;
clear: both;
border: 1px solid black;
background-color: #FFF8F4;
}
#image {
float: left;
margin-right: 1em;
}
#text-content {
padding: 1em;
text-align: justify;
bottom: 20em;
}