Databases
StackOverflow2013
Postsdbo
POwhy my page is not stable?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POwhy my page is not stable?
    text
    copied!<p>I have a page structured as a hidden table ( I tried using divs only, but it's not suitable to me).. and I have links in the SECOND cell (let's call it A) that call links in the FIRST cell (let's call it B) that will call a div section under the SECOND cell (a paragraph under A) all within the same row..</p> <p>everything is going fine, but when I hit A, the B links showed fine but make the page shifts up.. and when I hit the button that hide B the page shifts back to the original place.. </p> <p>I searched a lot about this.. most of answers was all about scroll.. I did it just in case (even though my problem is in shifting up and down not right and left).. but I still have the problem..</p> <p>any suggestion please?</p> <p>thanks in advanced.. </p> <p>UPDATE: I really did plenty of research.. but seems nobody has faced the problem I'm facing .. PLus, I tried to manipulate my code for two days.. plz don't misjudge me :(</p> <p>the main table:</p> <pre><code>.myTable { width: 100%; max-width: 1000px; float : left; table-layout: auto; overflow: hidden; /*border: 1px solid black; */ } /*.myTable td { border-width: 2px; padding: 1px; border-style: inset; border-color: gray; background-color: white; -moz-border-radius: ; overflow: hidden; } */ .myCenter { width: 90%; } .tLeft { width: 150px; } .myLeft { text-align:left; /* This is only if you want the tab items at the center */ padding: 0; margin: 0; vertical-align: bottom; /* position:relative; top: 100px; left: 0; */ visibility: hidden;display: none; /*left:5px; border: 3px solid green; */ } .myLeft:target { text-align:left; /* This is only if you want the tab items at the center */ padding: 0; margin: 0; vertical-align: bottom; width: 150px; display: block; visibility:visible; float:left; /* no such thing as float center !!!*/ position:relative; top: 0px; left: -43px; /*left:5px; /*border: 1px solid green;*/ } .myLeft &gt; ul.menuLeft { list-style-type:none; display:block; /* Change this to block or inline for non-center alignment */ float: left; vertical-align: bottom; /*border: 1px solid red;*/ } .myLeft &gt; ul.menuLeft &gt; li &gt; a { color: #580000; /* #7a7883; /* tabs titles */ text-decoration:none; display:block; text-align:center; border:1px solid grey; /* #3333FF border of the tabs */ margin:2px; width: 150px; /* Width of the tabs */ font-size:15px; font-family:"Times New Roman", Times, serif; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -moz-user-select:none; cursor:hand; } .myLeft &gt; ul.menuLeft &gt; li &gt; a:hover { color: white; cursor:hand; } .myLeft &gt; ul.menuLeft &gt; li &gt; a:focus { color: #f5f9fc; } .myLeft &gt; ul.menuLeft &gt; li:target &gt; a { cursor:default; ... } .myLeft &gt; ul.menuLeft &gt; li:target &gt; div { display:block; } </code></pre> <p>tabs:</p> <pre><code>.tabs { position:relative; left: 0px; text-align:left; /* This is only if you want the tab items at the center */ width: 100%; padding: 0; margin: 0; /*border: 1px solid green;*/ } .tabs ul.menu { list-style-type:none; display:inline; /* Change this to block or inline for non-center alignment */ /* width:570px; /* min-width:570px; max-width:800px; vertical-align: bottom; /*border: 1px solid red;*/ } .tabs ul.menu &gt; li { display:inline; float:none; /* no such thing as float center !!!*/ vertical-align: bottom; /** border: 1px solid yellow; cursor:hand; */ } .tabs &gt; ul.menu &gt; li &gt; a { color: #580000; /* #7a7883; /* tabs titles */ text-decoration:none; display:inline-block; text-align:center; border:1px solid #f1f3f4; /* #3333FF border of the tabs */ padding:5px 10px 5px 10px; /*width: 25%;*/ /* Width of the tabs */ font-size:15px; font-family:"Times New Roman", Times, serif; border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px; -moz-user-select:none; cursor:hand; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#3333FF)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #3333FF, #fff); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #3333FF, #fff); /* IE 10 */ background: -ms-linear-gradient(top, #3333FF, #fff); /* Opera 11.10+ */ background: -o-linear-gradient(top, #3333FF, #fff); } .tabs ul.menu &gt; li &gt; a:hover { color: white; cursor:hand; } .tabs ul.menu li &gt; div { display:none; position:absolute; width:98%; /* max-width:700px; min-height:230px; */ left:0; margin: 0 15px 0 15px; text-align:left; padding:0; } /*.tabs ul.menu &gt; li &gt; div &gt; p { border:1px solid #f1f3f4; background-color: #f5f9fc; width: 99%; padding:10px; margin:0; color: #65636e; font-size:12px; font-family:"Times New Roman", Times, serif; text-decoration: none; min-height:200px; } */ .tabs ul.menu &gt; li &gt; a:focus { color: #f5f9fc; } .tabs ul.menu &gt; li:target &gt; a { cursor:default; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #8A0808, #f1f3f4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #8A0808, #f1f3f4); /* IE 10 */ background: -ms-linear-gradient(top, #8A0808, #f1f3f4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #8A0808, #f1f3f4); } .tabs ul.menu li:target &gt; div { display:block; } </code></pre> <p>the Content:</p> <pre><code>&lt;!-- content --&gt; &lt;div class="content" style="height:350px; width:760px; "&gt; &lt;div class="tabs" style="height:390px;"&gt; &lt;!-- Tabs --&gt; &lt;ul class="menu"&gt; &lt;li id="item-1"&gt; &lt;!-- item-1 --&gt; &lt;a href="#left-1"&gt;Meetings&lt;/a&gt; &lt;!-- #f5f9fc --&gt; &lt;div style="display:block; border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;"&gt; &lt;h3 class="insideh"&gt; Welcome &lt;/h3&gt; &lt;p class="cl" style="font-size:18px; font-style: italic; padding: 5px 20px 5px 20px; "&gt; Welcome welcome welcome &lt;br&gt; Please, enjoy the site and feel free to send us any comments you have.&lt;br&gt;&lt;br&gt; Thank you.. &lt;/p&gt; &lt;/div&gt; &lt;!-- End of Welcome Div --&gt; &lt;div style=" border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-1"&gt; &lt;!-- 222 --&gt; &lt;div class="col" style="width:700px; display:inline; "&gt; &lt;!-- 111 --&gt; &lt;ul&gt; &lt;li&gt; &lt;a class="alLink" href="aec2009.php"&gt;Meetings 2009&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2010.php"&gt;Meetings 2010&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2011.php"&gt;Meetings 2011&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2012.php"&gt;Meetings 2012&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2013.php"&gt;Meetings 2013&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href=""&gt;Miscellaneous&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /111 --&gt; &lt;/div&gt; &lt;!-- end of Content #1 --&gt; &lt;!-- /222 --&gt; &lt;/li&gt; &lt;!-- end of item-1 --&gt; &lt;li id="item-2"&gt; &lt;a href="#left-2"&gt;Educational Materials&lt;/a&gt; &lt;div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-2"&gt; &lt;!-- 222 --&gt; &lt;div class="col" style="width:700px; display:inline;"&gt; &lt;!-- 111 --&gt; &lt;ul&gt; &lt;li&gt; &lt;a class="alLink" href="aec2009.php"&gt;Our Books&lt;/a&gt; &lt;/li&gt; &lt;ul&gt; &lt;li&gt; &lt;a class="alLink" href="aec2009.php"&gt; Books&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2010.php"&gt; Society&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2011.php"&gt;Guidlines&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;li&gt; &lt;a class="alLink" href="aec2010.php"&gt; Society&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="alLink" href="aec2011.php"&gt;Guidlines&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /111 --&gt; &lt;/div&gt; &lt;!-- end of Content #2 --&gt; &lt;!-- /222 --&gt; &lt;/li&gt; &lt;!-- end of item-2 --&gt; &lt;li id="item-3"&gt; &lt;a href="#item-3"&gt;Event Calender 2013&lt;/a&gt; &lt;div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-3"&gt; &lt;!-- 111 --&gt; &lt;div class="col"&gt; &lt;h3 class="insideh"&gt; Date &lt;/h3&gt; &lt;p class="cl" style="font-size:16px;"&gt; Jan 12th, 2013 &lt;br&gt; Apr 30th, 2013 &lt;br&gt; Jul 10th, 2013 &lt;br&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;h3 class="insideh"&gt; Topics &lt;/h3&gt; &lt;p class="cl" style="font-size:16px;"&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- end of Content #3 --&gt; &lt;!-- /111 --&gt; &lt;/li&gt; &lt;!-- end of item-3 --&gt; &lt;li id="item-4"&gt; &lt;a href="#item-4"&gt;AEC Members&lt;/a&gt; &lt;div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-4"&gt; &lt;!-- 111 --&gt; &lt;h3 class="insideh"&gt; Our Speaker Members &lt;/h3&gt; &lt;/div&gt; &lt;!-- end of Content #4 --&gt; &lt;!-- /111 --&gt; &lt;/li&gt; &lt;!-- end of item-4 --&gt; &lt;li id="item-5"&gt; &lt;a href="#item-5"&gt;Gallery&lt;/a&gt; &lt;div style="border:1px solid #f1f3f4; background-color: #3333FF; width: 99%; padding:10px; margin:0; height:310px;" id="#item-5"&gt; &lt;!-- 111 --&gt; &lt;!--&lt;?php /*include("gal1.html"); */?&gt; --&gt; &lt;/div&gt; &lt;!-- end of Content #5 --&gt; &lt;!-- /111 --&gt; &lt;/li&gt; &lt;!-- end of item-5 --&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- end of Tabs --&gt; &lt;/div&gt; &lt;!-- end of content --&gt; </code></pre> <p>the index:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=windows-1250"&gt; &lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt; &lt;meta name="viewport" content="width=device-width, maximum-scale=2.0" /&gt; &lt;link href="css/main.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/text.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/tabs.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/buttons.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/tables.css" rel="stylesheet" type="text/css" /&gt; &lt;?php include 'counter.php' ?&gt; &lt;title&gt;The Echo Club&lt;/title&gt; &lt;LINK REL="SHORTCUT ICON" HREF="/imgs/icon.png" /&gt; &lt;/head&gt; &lt;body style= "overflow: scroll;"&gt; &lt;table class = "myTable"&gt; &lt;tr&gt; &lt;!-- first row ****** Header SECTION ****** --&gt; &lt;?php include("htmls/header.html"); ?&gt; &lt;/tr&gt; &lt;!-- *** End of first row *** --&gt; &lt;tr&gt; &lt;!-- second row ****** Top NAVIGATION ******--&gt; &lt;td colspan = '3'&gt; &lt;!-- 2-first column --&gt; &lt;?php $page = 1; include("htmls/topnav.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 1-first col --&gt; &lt;!--&lt;td&gt; &lt;!-- 2-second col -&gt; &lt;/td&gt; &lt;!-- End of 1-second col -&gt; &lt;td&gt; &lt;!-- 2-third col -&gt; &lt;/td&gt; &lt;!-- End of 2-third col --&gt; &lt;/tr&gt; &lt;!-- *** End of second row *** --&gt; &lt;tr&gt; &lt;!-- third row ****** Search SECTION ******--&gt; &lt;td&gt; &lt;!-- 3-first column --&gt; &lt;div class="myLeft" style="height:300px; width: 150px;"&gt;&lt;ul class="menuLeft"&gt; &lt;li&gt; &amp;nbsp; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/td&gt; &lt;!-- End of 3-first col --&gt; &lt;!--&lt;td&gt; &lt;!-- 3-second col -&gt; &lt;/td&gt; &lt;!-- End of 3-second col --&gt; &lt;td colspan="2"&gt; &lt;!-- 3-third col --&gt; &lt;?php include("htmls/search.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 3-third col --&gt; &lt;/tr&gt; &lt;!-- *** End of second row *** --&gt; &lt;tr&gt; &lt;!-- fourth row ****** Main SECTION ******--&gt; &lt;td&gt; &lt;!-- 4-first column --&gt; &lt;?php include("htmls/leftNav.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 4-first col --&gt; &lt;td class="myCenter"&gt; &lt;!-- 4-second col --&gt; &lt;?php include("htmls/content.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 4-second col --&gt; &lt;td&gt; &lt;!-- 4-third col --&gt; &lt;!-- &lt;iframe style="width:170px; height:300px; margin: 0 1% 0 1%;" frameborder="1" allowfullscreen&gt;&lt;/iframe&gt; --&gt; &lt;img src="imgs/myAD.jpg" /&gt; &lt;?php include("htmls/newsLetters.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 4-third col --&gt; &lt;/tr&gt; &lt;!-- *** End of fourth row *** --&gt; &lt;tr&gt; &lt;!-- fifth row ****** Sociel Network SECTION ******--&gt; &lt;td&gt; &lt;!-- 5-first column --&gt; &lt;/td&gt; &lt;!-- End of 5-first col --&gt; &lt;td&gt; &lt;!-- 5-second col --&gt; &lt;?php include("htmls/social.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 5-second col --&gt; &lt;td&gt; &lt;!-- 5-third col --&gt; &lt;/td&gt; &lt;!-- End of 5-third col --&gt; &lt;/tr&gt; &lt;!-- *** End of fifth row *** --&gt; &lt;tr&gt; &lt;!-- sixth row ****** Footer SECTION ******--&gt; &lt;!--&lt;td&gt; &lt;!-- 6-first column -&gt; &lt;/td&gt; &lt;!-- End of 6-first col --&gt; &lt;td class="myCenter" colspan = '3'&gt; &lt;!-- 6-second col --&gt; &lt;?php include("htmls/footer.html"); ?&gt; &lt;/td&gt; &lt;!-- End of 6-second col --&gt; &lt;!--&lt;td&gt;&lt;!-- 6-third col -&gt; &lt;/td&gt; &lt;!-- End of 6-third col --&gt; &lt;/tr&gt; &lt;!-- *** End of sixth row *** --&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload