Jump to content
xisto Community
Sign in to follow this  
Followers 0
fffanatics

Div Layout Problems table in div not shrinking

By fffanatics, in Programming

Recommended Posts

fffanatics    0

fffanatics
Posted

Hey everyone. I am having an issue on one of my pages where the table inside my middle section of my layout will not continue to shrink if the browser window is shrunk. AKA, i get a slider bar on the bottom instead of things just overlapping. Below is the code for the page along with my style sheet. If you want to see for yourself the problem just go here: Final Fantasy Fanatics - FF7 - Armor.

Armor.php

<?php	session_start();    include './../db_connect.php';    include './../member_class.php';	include './../news_class.php';	$member_class = new member_class;	$news_class = new news_class;	include './../loginCheck.php';?><html><head><meta name="copyright" content="Robert Keller. 2005"><meta name="author" content="Robert Keller"><title>Final Fantasy Fanatics - Final Fantasy 7 - Armor</title><base target="_top"><link rel="STYLESHEET" href="./../styles.css" type="text/css"></head><body bgcolor="#24109E" text="#FFFFFF"> <div id="nonheaderArea"> <a href="./../index.php" title="Final Fantasy Fanatics">   <div id="topLogo"> </div>   </a>     <div id="blueSeparator"> </div>     <div id="bothMenus">     <?php  if (file_exists("./../leftSide.php")) {  	@include("./../leftSide.php");  }//if	?>     <br>     <div class="centerTable">       <div class="topicTitle">Armor</div>       <div class="news">         <div class="newsContent" style="border-top : 1px solid white;">           <table border="0" cellspacing="0" cellpadding="0" class="infoTable">             <tr>               <td colspan="2"></td>             </tr>             <tr>               <th>Name</th>               <th>Cost</th>               <th>D</th>               <th>D%</th>               <th>MD</th>               <th>M%</th>               <th>Un</th>               <th>Ln</th>               <th>Mg</th>               <th>Location</th>             </tr>             <tr>               <td>Bronze Bangle</td>               <td>---</td>               <td>8</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>Initially Equipped</td>             </tr>             <tr>               <td>Iron Bangle</td>               <td>160</td>               <td>10</td>               <td>0</td>               <td>2</td>               <td>0</td>               <td>1</td>               <td>---</td>               <td>1</td>               <td>Beginner's Shop</td>             </tr>             <tr>               <td>Titan Bangle</td>               <td>280</td>               <td>14</td>               <td>2</td>               <td>4</td>               <td>0</td>               <td>2</td>               <td>---</td>               <td>1</td>               <td>After defeating Airbuster in Shinra Reactor</td>             </tr>             <tr>               <td>Mythril Armlet</td>               <td>350</td>               <td>18</td>               <td>3</td>               <td>6</td>               <td>0</td>               <td>---</td>               <td>2</td>               <td>1</td>               <td>Shop in Wall Market</td>             </tr>             <tr>               <td>Carbon Bangle</td>               <td>800</td>               <td>27</td>               <td>3</td>               <td>8</td>               <td>0</td>               <td>1</td>               <td>2</td>               <td>1</td>               <td>Stolen from Moth Slasher in Shinra</td>             </tr>             <tr>               <td>Four Slots</td>               <td>1300</td>               <td>12</td>               <td>0</td>               <td>10</td>               <td>0</td>               <td>---</td>               <td>8</td>               <td>1</td>               <td>Exchange for Item Coupon A in Shrina Tower</td>             </tr>             <tr>               <td>Shinra Beta</td>               <td>---</td>               <td>30</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>2</td>               <td>2</td>               <td>1</td>               <td>Stolen from Marine on Shinra Boat</td>             </tr>             <tr>               <td>Plantinum Bangle</td>               <td>1800</td>               <td>20</td>               <td>0</td>               <td>12</td>               <td>0</td>               <td>2</td>               <td>---</td>               <td>1</td>               <td>Shop in Costa Del Sol Bar</td>             </tr>             <tr>               <td>Silver Armlet</td>               <td>1300</td>               <td>34</td>               <td>4</td>               <td>14</td>               <td>0</td>               <td>2</td>               <td>2</td>               <td>1</td>               <td>After defeating Dyne in Gold Saucer</td>             </tr>             <tr>               <td>Gold Armlet</td>               <td>2000</td>               <td>46</td>               <td>4</td>               <td>22</td>               <td>0</td>               <td>0</td>               <td>4</td>               <td>1</td>               <td>Steal from Dragon in Nibel Mountains</td>             </tr>             <tr>               <td>Edincoat</td>               <td>---</td>               <td>50</td>               <td>0</td>               <td>33</td>               <td>0</td>               <td>8</td>               <td>---</td>               <td>1</td>               <td>After defeating Palmer in Rocket Town</td>             </tr>             <tr>               <td>Diamond Bangle</td>               <td>3200</td>               <td>57</td>               <td>6</td>               <td>37</td>               <td>0</td>               <td>1</td>               <td>4</td>               <td>1</td>               <td>Shop in Bone Village</td>             </tr>             <tr>               <td>Rune Armlet</td>               <td>3700</td>               <td>43</td>               <td>5</td>               <td>24</td>               <td>0</td>               <td>4</td>               <td>---</td>               <td>2</td>               <td>Shop in Bone Village</td>             </tr>             <tr>               <td>Dragon Armlet</td>               <td>---</td>               <td>58</td>               <td>3</td>               <td>0</td>               <td>7</td>               <td>---</td>               <td>6</td>               <td>1</td>               <td>After defeating Red Dragon in Temple of the Ancients</td>             </tr>             <tr>               <td>Gigas Armlet</td>               <td>---</td>               <td>59</td>               <td>0</td>               <td>0</td>               <td>0</td>               <td>1</td>               <td>---</td>               <td>0</td>               <td>After defeating Demons Gate in Temple of the Ancients</td>             </tr>             <tr>               <td>Aurora Armlet</td>               <td>---</td>               <td>76</td>               <td>8</td>               <td>54</td>               <td>3</td>               <td>---</td>               <td>4</td>               <td>1</td>               <td>Forgotten City Shrine</td>             </tr>             <tr>               <td>Wizard Bracelet</td>               <td>12000</td>               <td>6</td>               <td>3</td>               <td>85</td>               <td>3</td>               <td>---</td>               <td>8</td>               <td>1</td>               <td>After defeating Jeneva Life in Forgotten City</td>             </tr>             <tr>               <td>Bolt Armlet</td>               <td>---</td>               <td>74</td>               <td>8</td>               <td>55</td>               <td>3</td>               <td>---</td>               <td>4</td>               <td>1</td>               <td>Corral Valley Caves<br>                 <b>NOTE</b> - Nullifies <b>Lightning</b> Attacks</td>             </tr>             <tr>               <td>Fire Armlet</td>               <td>---</td>               <td>72</td>               <td>8</td>               <td>52</td>               <td>3</td>               <td>---</td>               <td>4</td>               <td>1</td>               <td>Inside of Gaea's Cliff<br>                 <b>NOTE</b> - Nullifies <b>Fire</b> Attacks</td>             </tr>             <tr>               <td>Crystal Bangle</td>               <td>4800</td>               <td>70</td>               <td>8</td>               <td>45</td>               <td>1</td>               <td>---</td>               <td>6</td>               <td>1</td>               <td>Shop in Medeel</td>             </tr>             <tr>               <td>Warriors Bangle</td>               <td>---</td>               <td>96</td>               <td>0</td>               <td>21</td>               <td>0</td>               <td>---</td>               <td>4</td>               <td>1</td>               <td>Defeating Eagle Gun on Coal Train</td>             </tr>             <tr>               <td>Shinra Alpha</td>               <td>---</td>               <td>77</td>               <td>0</td>               <td>34</td>               <td>0</td>               <td>---</td>               <td>6</td>               <td>1</td>               <td>Steal from Underwater MP in Underwater Reactor</td>             </tr>             <tr>               <td>Ziedrich</td>               <td>---</td>               <td>100</td>               <td>0</td>               <td>15</td>               <td>98</td>               <td>18</td>               <td>0</td>               <td>0</td>               <td>Steal from Rude on Shinra No. 26<br>                 <b>NOTE</b> - Decreases all elemental attacks by 1/2</td>             </tr>             <tr>               <td>Escort Guard</td>               <td>---</td>               <td>62</td>               <td>5</td>               <td>55</td>               <td>0</td>               <td>0</td>               <td>6</td>               <td>1</td>               <td>Sunken Shinra Air Ship<br>                 <b>NOTE</b> - Man's Armlet nullifies, <b>Lightning/Earth/Water/ Poison</b></td>             </tr>             <tr>               <td>Aegis Bracelet</td>               <td>---</td>               <td>55</td>               <td>15</td>               <td>86</td>               <td>50</td>               <td>---</td>               <td>4</td>               <td>1</td>               <td>Invasion of Midgar</td>             </tr>             <tr>               <td>Imperial Guard</td>               <td>---</td>               <td>82</td>               <td>0</td>               <td>74</td>               <td>0</td>               <td>---</td>               <td>6</td>               <td>1</td>               <td>Reno</td>             </tr>             <tr>               <td>Minerva Band</td>               <td>---</td>               <td>60</td>               <td>8</td>               <td>57</td>               <td>0</td>               <td>0</td>               <td>6</td>               <td>1</td>               <td>Steal from Elena in Midgar Subway<br>                 <b>NOTE</b> - Women's Armlet nullifies <b>Fire/Cold/Gravity/ Holy</b></td>             </tr>             <tr>               <td>Mystile</td>               <td>---</td>               <td>65</td>               <td>50</td>               <td>72</td>               <td>60</td>               <td>0</td>               <td>6</td>               <td>1</td>               <td>Invasion of Midgar</td>             </tr>             <tr>               <td>Chocobracelet</td>               <td>---</td>               <td>35</td>               <td>10</td>               <td>38</td>               <td>10</td>               <td>4</td>               <td>0</td>               <td>1</td>               <td>Chocobo Racing Gift</td>             </tr>           </table>         </div>       </div>     </div>     <br>     <br>   </div>   <?php  if (file_exists("./../footer.php")) {  	@include("./../footer.php");  }//if	?> </div> </body></html>

styles.css
/* CSS Document */body{       background: #24109E url('./images/bg.jpg');	color : #ffffff;    	font-size : 12px;	font-family : Verdana, Comic Sans MS, Arial, Helvetica, sans-serif;    scrollbar-face-color : #24109E;       scrollbar-highlight-color : #fffff;    scrollbar-shadow-color : #ffffff;    scrollbar-3d-light-color : #ffffff;    scrollbar-arrow-color : #ffffff;    scrollbar-track-color : #ffffff;    scrollbar-darkshadow-color : #505050;}a { color : #ffffff; text-decoration : none; }a:hover {text-decoration : underline; }table{	font-size : 12px;}td {	vertical-align : top;}.centerTable{	background : url("images/tableBg.jpg");	border : 1px solid white;	width : 100%;}textarea {	font-family : Verdana, Comic Sans MS, Arial, Helvetica, sans-serif;	font-size: 12px;}#topLogo {	background: url('./images/titleImage.jpg');  height: 150;  width: 100%;	text-align: right;	border-bottom : 1px solid white;	cursor : pointer;}#footer {	border-top : 1px solid white; 	background-color : #000040; 	padding: 4px;}#blueSeparator {	background: url('./images/separator.jpg');  height: 15;  width: 100%;	text-align: right;}#topLinks {	background : #000040;}#leftMenu {	background: url('./images/sidebar.jpg');	position : absolute;	left : 11px;	width: 150px;	z-index : 2;		background-color : #000040;		border-right : 1px solid white;	border-bottom : 1px solid white;}#rightMenu {	background: url('./images/sidebar.jpg');	position: absolute;	right : 10px;		width: 150px;	z-index : 1;		background-color : #000040;		border-left : 1px solid white;	border-bottom : 1px solid white;}#nonheaderArea {	border : 1px solid white;	z-index : 0;	border : 1px solid white;}#noRightMenu{	*height : 565px;	min-height : 547px;		padding-left : 165px;	padding-right : 15px;}#bothMenus{	*height : 563px;	min-height : 547px;		padding-left : 165px;	padding-right : 165px;}.topicTitle {	z-index : 0;	font-size : 20px;	font-weight : bold;		text-align : left;	text-indent : 10px;	border-bottom : 1px solid white;	background: #000040;}.formTitle {	font-size : 29px;	font-weight : bold;	text-indent : 140px;}.menuHeader, .menuHeaderLink, .menuHeaderOver {	font-weight: bold;	width: 147;	padding-top: 2px;	padding-bottom: 2px;	text-indent : 4px;}.menuHeader  {	background : #000040;	border-bottom : 1px solid white;		border-top : 1px solid white;}.menuHeaderOver {	text-decoration : underline;}a.menuHeader , a.menuHeaderOver { border : none; padding : none; } /* fixes IE blocking issue */.menuItem, .menuItemOver {	color: white;	padding-left: 6px;	padding-top: 2px;	padding-bottom: 2px;}.menuItemOver {	background-color: #000040;}a.menuItem, a.menuItemOver { border : none; padding : none; } /* fixes IE blocking issue */#loginMenu {	text-align : center;	padding-top: 2px;	padding-bottom: 2px;}#loggedInMenu {	padding-top: 2px;	padding-bottom: 2px;}.news {	margin-top : 15px;	margin-bottom : 15px;	position : relative;}.newsTitle{	background: #000040;	text-indent: 5px;	font-size : 14px;	padding : 3px;	margin-left : 15px;	margin-right : 15px;		border: 1px solid white;}.newsInfo {	font-size : 11px;}.newsContent {	background:  url("images/tableUpperBg.jpg");	text-indent: 25px;	padding : 3px;	margin-left : 15px;	margin-right : 15px;		margin-bottom : 3px;	border: 1px solid white;	border-top : 0px;	}.formImportant{	color : #FFFF00;	font-weight : bold;}.formLeft {	text-align : right;	width : 200px;}.formRight {	padding-left : 10px;}.infoTable{	display : table;}.infoTable td{	display : table-cell;	padding-left : 15px;	padding-top : 2px;}.infoTable th{	display : table-cell;	border-bottom : 1px solid white;	font-size : 16px;	font-weight : normal;	text-align : left;	padding-left : 15px;	background-color: #000040;}.divTH{	display : table-cell;	border-bottom : 1px solid white;	font-size : 16px;	font-weight : normal;	text-align : left;	padding-left : 15px;	background-color: #000040;}

Also, if you cant get to my site let me know cause all of a sudden i just got an error connecting to my database but my cpanel is down too so i just think it is Xisto. Please help me on this cause i really want to get this layout finished so that more content can be added. Thanks

Share this post

Link to post
Share on other sites

fffanatics    0

fffanatics
Posted

Hey all sorry about not having a description but i wasnt really sure what to put at first so i wrote the post hit submit and then tried to stop it but i wasnt quick enough. It was supposed to be "table in div not shrinking" sorry

Share this post

Link to post
Share on other sites

serverph    0

serverph
Posted

edited topic to reflect description.... you can use the preview button next time, ffanatics. :unsure: and use the report button for editorial amendments you want for your original post if there are any corrections. :P

Share this post

Link to post
Share on other sites

rvalkass    5

rvalkass
Posted

Make sure that you do not set a fixed width (e.g width: 100%:unsure: anywhere for anything inside the table, as this will cause it to stay at the full size. Otherwise I am not sure what is causing it. Try having a look at QuirksMode. This site has some useful tips and hints for CSS.

Sorry I can't help you more.

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

yeah thats the best guest i would have get rid of the fixed stats and it should work, other then that i have no clue, well i guess i don't worry about it that much.

Share this post

Link to post
Share on other sites

biscuitrat    0

biscuitrat
Posted (edited)

It's all in the CSS. Edit the values there. Percent values often change per browser but they maintain a more streamlined viewing of the site, I believe. You might also want to validate the CSS (link it to your styles document) to find out other issues with it.

Edit: Fixed link

Edited by snlildude87 (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept