Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    Overlapping DIV's (Link included)

    I have a slight problem of overlapping DIV's when viewing Firefox at 800x600

    This is the screenshot:



    The following is my main content:

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

    Code:
    /*** 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!

    Taylor.
    Last edited by Taylor_1978; 09-20-2006 at 01:51 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    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?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Sorry.. It's on my local server at the moment so no link available.

    This is the table code:

    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>
    Last edited by Taylor_1978; 09-20-2006 at 12:54 AM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    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!

  • #7
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Okay - Here is the link:

    http://www.goto-league.com/system/?m...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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •