Emmanize
08-24-2006, 02:01 PM
How do you guys balance the measurements for each browser? I have a tiny issue where if the measurements are fine in one browser it’s too much in the other.
My issue is, that in IE the container hangs to low leaving a space below the two side columns in FF. However in FF all the measurements are fine within the container but there is empty space under (outside) the container because it hangs to low in IE :rolleyes: . How can I balance the measurements out so its right in both?
Its not a HUGE issue I could leave it - but it would look a but off in IE.
chris_bcn
08-24-2006, 03:49 PM
Generally you have to allow for box model variances and the like. All browser behave slightly differently, so sometimes you need to allow for that. I always have an IE stylesheet that has all the hacks and like in it, then I link that intot the age via conditional comments
First thing to do is validte your site - if it doesn't validate then you might find the problem there.
It could be a result of double margins in IE.
Try setting your display to inline for the element.
Emmanize
08-25-2006, 10:47 AM
FF: (correct)
http://img.photobucket.com/albums/v123/Fashy/ffbottm.jpg
IE:
http://img.photobucket.com/albums/v123/Fashy/iebottom.jpg
I have fiddled with the height until I am blue in the face. But what looks correct in one browser is wrong is the other. Don't really understand tha solution yet either. I did try using overflow: hidden but that when wrong on scrolling lol.
chris_bcn
08-25-2006, 04:11 PM
throw up your html and css
Emmanize
08-25-2006, 04:37 PM
HTML:
<body>
<div id="container">
<div id="header"><img src="images/gbannerx.jpg" /></div>
<!--end of header div-->
<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>Books</h3>
<br />
<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/ThroughMyEyes_new.jpg" /> </div>
</div>
</div>
<!--end of tourdates div-->
<!--end of leftebar 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 SMITH <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>
<!--end of side books div-->
</div>
<!--end of righttebar div-->
<div id="content">
<div id= "center"><img src="images/pa*****ner2.jpg" /></div>
<div id="text-content">
<h4>A Bit about Gordon</h4>
<br />
<p>Gordon Smith is an astoundingly accurate medium. He is renowned for his
ability to give exact names of people, places and even streets. The seventh
son of a seventh son, Gordon travels around the world to appear before
audiences, read for celebrities and demonstrate his abilities, but his
feet have remained firmly on the ground. Gordon’s extraordinary skills
have attracted the attention of university scientists researching the
paranormal and countless numbers of journalists and documentary makers.
</p>
<br />
<p>Gordon prefers to have the opportunity to be honest with people that
he provides readings for by not charging them. By doing this, he feels
that if no one has made himself or herself known to him or if nothing
comes through then he is under no obligation to make something up just
to satisfy the person concerned. And is quoted as saying "That way I have
the luxury of being honest. If it's not working, I just tell people it's
not working. I don't have this obligation to come up with the goods, which
might be a temptation to exaggerate or embroider things. Anyway, I already
have a job."</p>
</div>
<!--end of text-content div-->
</div>
<!--end of content div-->
</div>
<!--end of container div-->
<br clear="all" />
</div>
CSS:
/* 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: #666;
color:#000;
}
#header {
background-color: #fff;
text-align: right;
}
#container {
position: relative;
border: 1px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
margin-top: 2em;
width: 940px;
background-color: #fff;
height: 780px;
}
#left, #right {
float: left;
width: 250px;
list-style: none;
background-color: #F0F0F0;
text-align: center;
}
#left ul {
list-style: none;
color: white;
}
#center {
text-align: center;
}
#right {
float: right;
list-style: none;
height: 150px;
background-color: #F0F0F0;
}
#right li {
list-style: none;
}
#left li a {
color: #000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
text-transform: capitalize;
text-align: center;
}
#left ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right li a {
color: #000;
text-decoration:none;
font-size: 13px;
font-weight: lighter;
text-transform: capitalize;
list-style: none;
text-align: center;
}
#right ul li :hover {
text-decoration: underline;
background-color: #F0F0F0;
}
#right, #left li a:visited {
color: #000000;
}
#content {
margin-left: 250px;
margin-right: 250px;
text-align: left;
width:425px;
}
h3 {
background-color: #666;
padding: 5px;
border: 1px solid black;
font-size: 12px;
text-align: center;
color: #fff
}
h4 {
background-color: #999;
font-size: 10px;
color: #fff;
border: 2px dashed black;
}
#books, #tourdates {
float: left;
width: 230px;
list-style: none;
height: 300px;
width: 250px;
}
#tourdates {
float: right;
list-style: none;
height: 311px;
}
#overflow {
height: 275px;
overflow: auto;
background-color: #F0F0F0;
padding: 4px;
}
#overflow li {
color: #000;
}
#footer {
overflow: auto;
clear: both;
border: 1px solid black;
background-color: #fff;
}
#image {
float: left;
margin-left: 15px;
}
#text-content {
float: left;
padding: 5px;
text-align: justify;
bottom: 20em;
height: 407px;
}
I dunno am just really tired today, its probably some silly little thing. Never had a problem with this before :rolleyes:
chris_bcn
08-25-2006, 05:05 PM
I'll try ot ohave a look later today
things that stand out:
<div id="image"> - poor naming convention and you have an id declared 3 times - that needs to be a class
you should not use <br /> in the manner you have - you have them as presentational items in your markup - those spaces need to be defined in thr CSS file
It's often liitle things like this that can throw things off in browsers.
Also check your naming conventiosn - left and right are not good names for ids
Benjamin
08-28-2006, 04:57 PM
I don't think you don't have height defined for the left div, although you have set it for the right div.
Also, as Chris said, you don't need all those <br /> tags. You can control vertical spacing between headings and paragraphs, for example, using margin.
Emmanize
08-28-2006, 05:08 PM
Oops. Should have mentioned I have sorted it now :)
It was the main content that was the issue. Being a dumb-ass I never thought to turn borders back on to see what was going on. Site is doing fine now.
I have taken the br's out. As I told Chris I only used them because I was told some false information at the beginning of my training.
Many thanks for your help guys :)
Emma.