...

View Full Version : Overlapping DIV's (Link included)



Taylor_1978
09-20-2006, 12:21 AM
I have a slight problem of overlapping DIV's when viewing Firefox at 800x600

This is the screenshot:

http://goto-league.com/screenshot.gif

The following is my main content:



<div id="contentalt" >
<h2>[title of page]</h2>
<div id="submenu">
<ul>
<li><a href="?module=ladders">Announcements</a></li>
<li><a href="?module=ladders&page=standings">Standings</a></li>
<li><a href="?module=ladders&page=results">Results</a></li>
<li><a href="?module=ladders&page=report">Report Loss</a></li>
</ul>
</div>
<br/>
<h3>Standings</h3>
<div align="right">
Division: <select name="start" onChange="if(this.options[this.selectedIndex].value) window.location='?module=ladders&game=2&ladder=2&page=standings&ladder=2&orderby=&division='+this.options[this.selectedIndex].value;">
<option selected>Division 1</option>
<option value=1>Division 1</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br/>
<br/>
</div>
<div align="center">
<table>
<!-- STANDINGS TABLE HERE -->
</table>
</div>
&nbsp;
<br/>
<br/>
</div>








This is my CSS relating to these div's:




/*** Content ***/

#content,#contentalt {
background-color:#fafcff;
border:1px solid #909090;
min-height:800px;
color:#2a2a2a;
padding:0px;
}

#content {margin:0 200px;}
#contentalt {margin:0 200px 0 20px;}
#content p, #contentalt p {
padding:10px;
}
#content h1,#content h2,#content h3,#contentalt h1,#contentalt h2,#contentalt h3 {
position:relative;
color:#606060;
font-weight:bold;
letter-spacing:-1px;
margin:10px 10px 15px;
padding:0;
}

#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}


#submenu {
float:left;
margin-bottom:25px;
border-top: 1px solid #b0b0b0;
border-bottom: 1px solid #b0b0b0;
width:100%;
background:#f0f0f0 url(themes/smooth_blue/alt-img/$bodybg.jpg) top left repeat-x;
color:#FFFFFF;
}

#submenu ul {
font-size:14px;
margin:0;
padding:0;
vertical-align: middle;
}

#submenu li {
float:left;
list-style:none;
margin:0;
padding:0;
vertical-align: middle;
}

#submenu a {
border-right:1px solid #b0b0b0;
color:#FFFFFF;
display:block;
font-size:0.7em;
padding:5px 5px 5px;
text-transform:uppercase;
vertical-align: middle;
}

#submenu a:hover {
background:#f0f0f0 url(themes/smooth_blue/alt-img/$menubg.jpg) top left repeat-x;
color:$hovercolor;
text-decoration:none;
vertical-align: middle;
}

#submenu a.current {
background:#f0f0f0 url(themes/smooth_blue/alt-img/$menubg.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
vertical-align: middle;
}


My CSS is actually within PHP - hence the $bodybg variables etc.

And I've just discovered that it also occours in Firefox when I minimize my browser slightly.. This doesn't occour in IE.

Any help appreciated! :thumbsup:

Taylor.

Taylor_1978
09-20-2006, 12:24 AM
GRRR - My server just went down.. Basically the overlapping I'm refering to is the <table> it overlaps past the edges of the contentalt div. I have the table set with a width of 98% - is that possibly causing the problem?

_Aerospace_Eng_
09-20-2006, 12:34 AM
The width is taking in the padding as well so its 98% width plus the padding which might take up more than the space you have available. Posting only parts of the code doesn't help. We need to see the rest of the code. A link would be better.

Taylor_1978
09-20-2006, 12:49 AM
Sorry.. It's on my local server at the moment so no link available.

This is the table code:



<table width="98%" cellpadding="3" cellspacing="1">
<tr>
<td class="header" rowspan="2">Rank</td>
<td class="header" width="200" rowspan="2">Alias</td>
<td class="header" rowspan="2">Rating</td>
<td class="header" colspan="10">This Play Period</td>
<td class="header" rowspan="2">Streak</td>
<td class="header" rowspan="2">Idle</td>
</tr>
<tr>
<td class="highlight_c">P</td>
<td class="highlight_c">TW</td>
<td class="highlight_c">WH</td>
<td class="highlight_c">WS</td>
<td class="highlight_c">WL</td>
<td class="highlight_c">L</td>
<td class="highlight_c">Pts</td>
<td class="highlight_c">Pen</td>
<td class="highlight_c">TOTAL</td>
<td class="highlight_c">%</td>
</tr>
<tr>
<td class="center">1</td>
<td class="center">
<table>
<tr>
<td>
<SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td>
<td>
<a href=?module=ladders&game=2&ladder=2&page=members&select_id=9>da_bossman2005</a></td>
<td>
<img width=16 height=16 src=images/hot.gif alt='Hot Streak!'>
</td>
</tr>
</table>
</td>
<td class="center">1500</td>
<td class="center">5</td>
<td class="center">5</td>
<td class="center">0</td>
<td class="center">5</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">10</td>
<td class="center">0</td>
<td class="center">10</td>
<td class="center">100</td>
<td class="center">5</td>
<td class="center">2.07</td>
</tr>
<tr>
<td class="center">2</td>
<td class="center">
<table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=8>dabba</font></a></td><td></td></tr></table></td>
<td class="center">1500</td>
<td class="center">3</td>
<td class="center">3</td>
<td class="center">0</td>
<td class="center">3</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">6</td>
<td class="center">0</td>
<td class="center">6</td>
<td class="center">100</td>
<td class="center">3</td>
<td class="center">0.08</td>
</tr>
<tr>
<td class="center">3</td>
<td class="center">
<table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=6>test</font></a></td><td></td></tr></table></td>
<td class="center">1500</td>
<td class="center">1</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">2</td>
<td class="center">0</td>
<td class="center">2</td>
<td class="center">100</td>
<td class="center">1</td>
<td class="center">0.08</td>
</tr>
</table>

_Aerospace_Eng_
09-20-2006, 12:57 AM
Then make a link available. Help us help you. There are free webhosts out there that support php you know. I told you its the width plus any padding. The padding does count for overall width.

Taylor_1978
09-20-2006, 01:04 AM
I have a domain to upload it to, which will take me all of 5 min.. but the stupid server has gone down.. so will as soon as it goes back up.

I don't quite understand what you're getting at with the width + padding. As the width is in %, which I thought would therefore be the % of whatever is left once padding is taken out of the equation.

As soon as the server goes back up I'll upload it and let you know where..

Thanks for your help Aero!

Taylor_1978
09-20-2006, 01:49 AM
Okay - Here is the link:

http://www.goto-league.com/system/?module=ladders&game=2&ladder=2&page=standings

I've also noticed that in IE that although not doing the same as Firefox.. when the browser is minimized or looked at from 800x600, it moves the content div below the rightside.

And I do know there are coding issues. I am redevloping this script from back in the days when I had no idea what HTML/CSS validation was about - obviously I'm still learning but have spent last week going through each page slowly fixing all the little things like <center> and colspan=2 instead of colspan="2" etc.

_Aerospace_Eng_
09-20-2006, 01:58 AM
I told you padding counted for overall width. Currently you have cellpadding of 3px and cellspacing of 1px plus the 2px padding for each td cell. This is making the table to wide. Set cellpadding and cellspacing to 0 in this table

<table cellpadding="3" cellspacing="1"> <tr>

<td class="header" rowspan="2">Rank</td>
<td class="header" width="200" rowspan="2">Alias</td>
<td class="header" rowspan="2">Rating</td>
<td class="header" colspan="10">This Play Period</td>
<td class="header" rowspan="2">Streak</td>
<td class="header" rowspan="2">Idle</td>

</tr>
<tr>
<td class="highlight_c">P</td>
<td class="highlight_c">TW</td>
<td class="highlight_c">WH</td>
<td class="highlight_c">WS</td>
<td class="highlight_c">WL</td>

<td class="highlight_c">L</td>
<td class="highlight_c">Pts</td>
<td class="highlight_c">Pen</td>
<td class="highlight_c">TOTAL</td>
<td class="highlight_c">%</td>
</tr>

<tr>
<td class="center">1</td>
<td class="center"><table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=9&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>da_bossman2005</font></a></td><td><img width=16 height=16 src=images/hot.gif alt='Hot Streak!'></td></tr></table></td>
<td class="center">1500</td>
<td class="center">5</td>
<td class="center">5</td>

<td class="center">0</td>
<td class="center">5</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">10</td>
<td class="center">0</td>

<td class="center">10</td>
<td class="center">100</td>
<td class="center">5</td>
<td class="center">2.12</td>
</tr>
<tr>
<td class="center">2</td>

<td class="center"><table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=8&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>dabba</font></a></td><td></td></tr></table></td>
<td class="center">1500</td>
<td class="center">3</td>
<td class="center">3</td>
<td class="center">0</td>
<td class="center">3</td>

<td class="center">0</td>
<td class="center">0</td>
<td class="center">6</td>
<td class="center">0</td>
<td class="center">6</td>
<td class="center">100</td>

<td class="center">3</td>
<td class="center">0.12</td>
</tr>
<tr>
<td class="center">3</td>
<td class="center"><table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=6&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>test</font></a></td><td></td></tr></table></td>
<td class="center">1500</td>

<td class="center">1</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="center">0</td>

<td class="center">2</td>
<td class="center">0</td>
<td class="center">2</td>
<td class="center">100</td>
<td class="center">1</td>
<td class="center">0.12</td>

</tr>
<tr>
<td class="highlight_c">4</td>
<td class="highlight_c"><table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=10&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>test3</font></a></td><td></td></tr></table></td>
<td class="highlight_c">1500</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>

<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>

<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">N/A</td>
</tr>
<tr>
<td class="highlight_c">5</td>

<td class="highlight_c"><table><tr><td><SPACER TYPE="block" WIDTH="16" HEIGHT="16"><SPACER TYPE="block" WIDTH="16" HEIGHT="16"></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=7&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>test2</font></a></td><td></td></tr></table></td>
<td class="highlight_c">1500</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>

<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>

<td class="highlight_c">0</td>
<td class="highlight_c">N/A</td>
</tr>
<tr>
<td class="highlight_c">6</td>
<td class="highlight_c"><table><tr><td><img height=16 width=16 src=images/Gold.png alt='Gold Member'><img height=16 width=16 src=images/Silver.png alt='Silver Member'></td><td><a href=?module=ladders&game=2&ladder=2&page=members&select_id=5&PHPSESSID=60b40a924d5d95a33181b41bb092b0fa>bling_dude2u</font></a></td><td></td></tr></table></td>
<td class="highlight_c">1500</td>

<td class="highlight_c">9</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">0</td>
<td class="highlight_c">9</td>

<td class="highlight_c">-9</td>
<td class="highlight_c">0</td>
<td class="highlight_c">-9</td>
<td class="highlight_c">0</td>
<td class="highlight_c">-9</td>
<td class="highlight_c">0.12</td>

</tr>
</table>

Taylor_1978
09-20-2006, 02:12 AM
Okay - I originally made the table as cellpadding and cellspacing to 0. But that still didn't work. This also obviously took away the spacing between cells which made the border look thick and ugly, and I like the spacing look between borders. So instead I made the table cellpadding as 0, the cellspacing as 1, and changed the td padding in the CSS to 1px instead of 2px.

This seems to have done the trick.. thanks Aero.. now I understand what you meant, I wasn't paying attention to the padding in my <style>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum