PDA

Click to See Complete Forum and Search --> : Problem with getting site to work in IE


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;
}

Emmanize
08-18-2006, 09:53 AM
I thought I had it licked with

position: absolute;
top: 30em

I got it half way up to the top. When I checked it in FF though, it was back to front (meaning the text was on top on the image). :eek:

I am well and truely stumped.

Red Kittie Kat
08-18-2006, 10:15 AM
If you are talking about this section of code

<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>


I changed it to this and it sits dead in the middle in IE and doesn't overlap the text


<strong>More dates may be announced shortly. For more information visit
spiritualistassociation.org.uk</strong></li>
<be />
</div>
</div>
</div>

<p>&nbsp;</p>
<div id="content">
<div id= "center">
<div align="center"><img src="images/gordon2.jpg" width="398" height="337" />
</div>
</div>
<br />



If I misunderstood what you meant I am sure someone who knows what they are doing will be along as soon as people start waking up ;)

Bear
08-18-2006, 10:16 AM
em, please, please stop putting your widths and heights as em's! They screw your content when resizing text.

i'll take a quick look at the rest in a miniute

Bear
08-18-2006, 10:24 AM
it's the div#center that's causing problems. remove that tag and put the image in text-content indstead.

you've also got multiple ID's defined (overflow is used at least twice), so redefine them as classes

Bear
08-18-2006, 10:25 AM
your main container also needs position: relative;

Bear
08-18-2006, 10:29 AM
I realise i've buggered your html a little but that was just in the process of some quick edits.

If you're developing in firefox have a search for chris pedric's firefox web developer extension and the TIDY html extensions

http://chrispederick.com/work/webdeveloper/
http://users.skynet.be/mgueury/mozilla/

they are both valuable tools, especially TIDY as it gives you a little warning thing in the bottom right of FF which when double clicked tells you all your markup errors

below is the HTML and CSS i applied


/* 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 {
position:relative;
border: 1px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
margin-top: 2em;
width: 900px;
background-color: #fff;
padding:5px;
}
#left, #right {
float: left;
width: 230px;

list-style: none;
background-color: #FFF8F4;
}
#left ul {
list-style: none;
}
#center {
text-align: center;
float:left;
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;
}
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: 230px;
height: 200px;
overflow: auto;
list-style: none;
height: 330px;
}
#tourdates {
float: right;
list-style: none;
height: 330px;
}
#overflow {
height: 340px;
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 {
float: left;
padding: 1em;
text-align: justify;
bottom: 20em;
}

<!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
<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
<!--end of header div-->
<br />
<div id="left">
<h3>Navigation
<br />
<ul>
<li>Official Fan Forum
<li>Gordon's Media
<li>Fan Art
<li>Recommended Links
<li>Gordons MySpace
<li>Contact Us
</ul>
<br />
<div id="tourdates">
<h3>Features
<br />
<div id="overflow">
<h4>GORDON'S BOOKS
<br />
<p>Gordon is an accomplished writer and teacher and conducts workshops and events around the world.


<br />
<div id="image">images/sm.jpg
<div id="image">images/UT_PB.jpg
<div id="image">images/ThroughMy_new.jpg
</div>
</div>
</div>
<div id="right">
<h3>Navigation
<br />
<ul>
<li>Spiritualism
<li>Mediumship
<li>Mental Mediumship
<li>Physical mediumship
<li>The Seven Principles
<li>SNU Today
</ul>
<br />
<div id="books">
<h3>Tourdates
<div id="overflow">
<h4>TOUR IN THE UK
<br />
<li>Tuesday 5th September

Gordon's Bookshop Tour Milton Keynes<br />
</li>
<li>Wednesday 6th September

An Evening of Mediumship with GORDON SMITH <br />
<br />
</li>
<li>
<h4>TOUR IN THE USA
<br />
<strong>Date: September 12, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Pennsylvania Convention Center Authority, Philadelphia, PA
<br />
<li>Date: September 14, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Boston Convention and Exhibition Center - Auditorium, Boston, MA
<br />
<li>Date: September 16, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Buffalo Niagara Convention Center - Exhibit Hall South, Buffalo, NY
<br />
<li>Date: September 18, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: COBO Conference/Exhibit Center, Detroit, MI
<br />
<h4>TOUR IN THE UK
<br />
<li>Tuesday 3rd October

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>Wednesday 4th October

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>Thursday 5th October

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>Monday 9th October

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>Thursday October 12

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>Sunday 15th October

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>Monday 16th October

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
<br />
<li>Date: November 14, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Nob Hill Masonic Center - Auditorium, San Francisco, CA Directions: Click Here
<br />
<li>Date: November 17, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA
<br />
<li>Date: November 17, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Hollywood Palladium, Los Angeles, CA
<br />
<li>Date: November 19, 2006, 2:00 pm - 5:00 pm Sponsored by: Hay House Location: Washington State Convention & Trade Center - Ballroom 6ABC, Seattle, WA
<br />
<li>Date: November 21, 2006, 7:00 pm - 10:00 pm Sponsored by: Hay House Location: Orpheum Theater, Vancouver, Canada
<br />
<h4>TOUR IN THE UK
<br />
<li>Wednesday 29th November

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>30th November

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>Saturday 2nd & Sunday 3rd December 2006

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
<be />
</div>
</div>
</div>
<div id="content">

<div id="text-content">
<img src="images/gordon2.jpg" width="398" height="337" />
<h4>About
<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.


</div>
<!--end of text-content div-->
</div>
<!--end of content div-->
<br clear="all" />

</div>
<!--end of container div-->
</div>
</body>
</html>

Emmanize
08-18-2006, 11:27 AM
I use ems because I can’t read numbers hon. When the numbers get too high I get confused. So I like to keep the numbers low. I have never had a problem using ems, they are just easier for me to use.



I will have a look at what you have done.

Bear
08-18-2006, 11:34 AM
but em's are for font sizing, not for structure sizing. they can be used for structure, but instead of me telling you, look for yourself

in firefox, viewing your site, press ctrl + to size your text up, all your boxes resize with it, even one step and instantly your have a div mess right there,

try the same in I.E, go to view > text size > large, and again all your divs resize and overlap each other.

the bottom line is that people with visual disabilites can and will resize your text, they may even have predefined styles which override your own so that text appears at double its normal size. as soon as they enter your site, everything will appear screwed and unreadble

it's just not good practise sadly.

sorry, not beating down on you, just trying to give a good response and guide ya!

is surbiton as wet as brizzle ?

Emmanize
08-18-2006, 11:42 AM
What have you changed to the code? I am compearing it to mine, but it sends my eyes funny after awhile lol.

Bear
08-18-2006, 11:46 AM
moved the image into the text-content

added position:relative to your container div

added floats to text-content

can't remember what else.

buggered up the scrollers on the book thing i think, but that just needs to be changed to the other bit

Emmanize
08-18-2006, 12:02 PM
Well, I am glad I didn't save that! lol. I pasted your whole code (html and css) in and it *****ed up big time. In IE it was just a white page and in FF it was a total mess. I didn't save it I have my original so nothing is lost.

But the issue still lies. :o

Bear
08-18-2006, 12:11 PM
sorry, it worked fine here.

http://www.playnicely.co.uk/gdf/emmanize-test.html

the forum may have buggered the code

Emmanize
08-18-2006, 12:24 PM
Again, copy and paste the code from view source and its still view as shown:



http://img.photobucket.com/albums/v123/Fashy/draft2.jpg

I don't understand it.

Bear
08-18-2006, 12:29 PM
which browser is that you're using?

edit* actually, don't worry, it was the scroll bar that threw me, just realised you got xp style on :D

JPnyc
08-18-2006, 12:31 PM
Probably a client-width issue, Bear.

Bear
08-18-2006, 12:35 PM
I'm thinking it's to do with a clear somewhere.

emmanize, make sure you've cleared your cache also.

Emmanize
08-19-2006, 11:39 AM
Ah, its ok I got it to work. For some reason when I paste it in, it would go "...value" so I had to put in manually. But I can kinda see where I went wrong.

Thanks Bear :)