Problem with table position on page

Dev Shed Forums Sponsor:

March 6th, 2010, 01:13 PM

jameshead

Registered User

Join Date: Mar 2010

Posts: 1

Time spent in forums: 8 m 33 sec
Reputation Power: 0

Problem with table position on page

I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout.

The layout is along these lines:

Code:

<body>
<div id="page">

<div id="banner">
<div id="leftlogo">  </div>
<div id="rightlogo">  </div>
<div id="oh3banner"><p class="pagetitle">Oxford H3</p></div>
</div>

<div id="mainbody">

<div id="wrap1">
<div id="wrap2">

<div id="leftnavigation">
</div>

<div id="rightnavigation">
</div>

<div id="content">
<h1>Oxford Hash House Harriers</h1>
<h2>Oxford H3 Hash Diary </h2>
<div id="hashdiary">
<table summary="Oxford H3 Run Diary">
<caption>Forthcoming Oxford H3 Hashes</caption>
<colgroup>
<col id="date" />
<col id="postcode" />
<col id="venue" />
<col id="hare" />
<col id="beermaster" />
<col id="chef" />
<col id="run" />
</colgroup>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Post Code & Grid Ref.</th>
<th scope="col">Venue</th>
<th scope="col">Hares</th>
<th scope="col">Beer Master</th>
<th scope="col">Chef</th>
<th scope="col">Run#</th>
</tr>
</thead>
<tbody>

<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
</div>

</div> 
</div> 

</div> 
</div>
</body>

Whilst the relevant (I think) parts of the CSS look like this:

DIV#page{
margin-top: 0px;
}

DIV#banner{
width:100%;
background-color : #06168a;
height : 130px;
margin-left : 0px;
margin-top: 0px;
position : absolute;
top: 0px;
float : none;
}

DIV#oh3banner{
clear : none;
background-image : url('images/oxfordh3banner.jpg');
background-repeat : no-repeat;
height : 110px;
margin-top: 10px;
background-position : center;
}

DIV#mainbody{
margin-top: 130px;
}

DIV#wrap1{
background-color : #06168a;
}

DIV#wrap2{
background-color : #06168a;
}

DIV#leftnavigation{
width:15%;
background-color : #06168a;
margin-left : 0%;
float: left;
}

DIV#rightnavigation{
width:15%;
background-color : #06168a;
margin-right : 0%;
margin-left : 3%;
float: right;
}

DIV#content{
width:auto;
margin-left : 15%;
margin-right: 15%;
padding-left: 5px;
padding-right: 5px;
background-color: White;
}

I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason.

I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong?
Regards,
James

March 6th, 2010, 08:44 PM

hase

Contributing User

Join Date: Mar 2010

Posts: 100

Time spent in forums: 14 h 14 m 5 sec
Reputation Power: 4

I'm still a little confused as with the code you gave us and the website...

but anyway.

Did this problem just start recently with the addition of the blue bars? Or did you just start noticing it? :P

I know firefox and IE like displaying values differently at times. If it were me, I'd start out by playing with some values and seeing if it's shifts around. Is that white area with content a table?

I typically use table layouts, as they have less spacing issues (IMO anyway) - and I've actually never used just divs. I'm a div virgin.