3 replies [Last post]
Breezin
Offline
newbie
Australia
Last seen: 13 years 33 weeks ago
Australia
Joined: 2009-04-10
Posts: 2
Points: 0

Hello ... I am a beginner ... and involved in a non-profit org that I have built a site for.

First time I have used divs rather than tables and first time using CSS... used web tutes and a book for guidance.

I thought I had done an OK job as it all looked good in IE6, but most other browsers the body area does not render properly. Seems the left and right borders are missing and the background pattern shows through and the footer doesnt display where it should.

Because I dont really know what I'm doing, I dont really know what I've done wrong and where to find a fix... any help would be much appreciated.

Here's the site http://www.q-sprint.com.au

<!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>Q Sprint Inc ... Real Horsepower!</title>
<style type="text/css">
<!--
body {
	background-color: #FFCC00;
	background-image: url(images/qsprintbckgrd.jpg);
	background-repeat: repeat;
}
-->
</style>
<link href="css/qsprint.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="wrapper">
  <div id="logo">
    <h1>Q Sprint Inc.</h1>
  </div>
  <div id="menubar">
    <a href="index.html" class="navigation">HOME</a> <a href="members.html" class="navigation">MEMBERS</a> <a href="events.html" class="navigation">EVENTS</a> <a href="racing.html" class="navigation">RACING</a> <a href="sponsors.html" class="navigation">SPONSORS</a> <a href="contact.html" class="navigation">CONTACT US</a>
  </div>
  <div id="picbar"><img src="images/homepicbar.jpg" alt="Home Page images" width="920" height="170" /></div>
  <div id="bodyArea">
 
  <div id="left">
    <h2>WELCOME</h2>
    <p>Q Sprint Inc. is an organisation for sprint racing enthusiasts in Queensland.  Our objects focus on the support and development of this exciting sport. We will achieve this by organising and conducting sprint racing, by holding events to encourage the breeding and racing of Quarter Horses and other breeds, by conducting industry training to encourage new participants, and by providing a united voice to represent our industry. Welcome to our home on the web.</p>
    <p>&nbsp;</p>
    <p>View our Mission Statement here...</p>
    <p>&nbsp;</p>
    <h2>LATEST NEWS</h2>
    <p><strong><em>VRQHA Season finale</em></strong> held on Sunday 29 March at Camperdown, Victoria, was a successful day with wins to Alcatraz in the Rising Star, Buzraami in the Presidents Cup and a dead heat in the Challenge Stakes between mighty mare Bymyside and long shot Destinys Fulfilled.</p>
    <p>&nbsp;</p>
    <p><strong><em>Representatives</em></strong> of the sprint racing industry met with the Board of the Australian Quarter Horse Association 22nd March 2009.</p>
    <p>&nbsp;</p>
    <p><strong><em>Next Q Sprint Inc. Committee Meeting</em></strong> - 26th April 2009 Toowoomba, venue TBA.</p>
    <p>&nbsp;</p>
    <p><strong><em>Q Sprint Inc. Committee has voted</em></strong> to extend Q Sprint Inc membership year to end July 2010.</p>
    <p>&nbsp;</p>
    </div>
  <div id="right">
    <h2>SPONSOR US</h2>
    <p>Details on how your organisation can assist with kick starting sprint racing in Queensland will be available soon. Watch this space. Alternatively, you can contact a representative from our Sponsorship subcommittee to register your interest.</p>
    <p>&nbsp;</p>
    <p>Your logo could be here...</p>
    <p>&nbsp;</p>
  </div>
  <div id="extras"></div>
  </div>
  <div id="footer">
    <div align="center">
      <p>&nbsp;</p>
      <p><strong>Copyright &copy; 2009 Q Sprint Inc.  Disclaimer </strong></p>
    </div>
  </div>
 
</div>
 
</body>
</html>

Sorry, not sure how to post the CSS?

Thanks Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Just add clear:both; to the

Just add
clear:both;
to the #footer.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Breezin
Offline
newbie
Australia
Last seen: 13 years 33 weeks ago
Australia
Joined: 2009-04-10
Posts: 2
Points: 0

Thanks

Thanks Deuce, all fixed now.

Am I correct in assuming that any div following floated divs needs to have clear set to both? (not just the div following directly after the floated div)..

Cheers Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

it honestly depends... no

it honestly depends... no real easy answer.
you can clear:left right or both
I tend to be lazy and just use clear:both unless i really need to only clear one or the other.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph