For some odd reason, when I make the height of my #content div 80%, or even define the div's height, the links inside move the the left and right when you hover over them, and when you click on them. I think it might have something to do with a varient of the peekaboo hack(the whole float clear:both weird thing where links dissapere).
I have tried making the padding and margin set to zero, but that doesn't change anything!
The place is here (<!-- m --><a class="postlink" href="http://www.subsilvernet.com/stargate/index.php">http://www.subsilvernet.com/stargate/index.php</a><!-- m -->).
Help!Woops, I forgot to add that the problem only appears when your logged in. Heres the code for when I'm logged in as Administrator:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Stargate Command</title>
<!--Meta Tags-->
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="cache-control" content="proxy-revalidate" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<meta http-equiv="content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="copyright" content="Zachary Adam Blume" />
<meta name="author" content="Zach Blume" />
<meta name="robots" content="all" />
<meta name="doc-class" content="living document" />
<meta name="revisit" content="2 days" />
<meta name="distribution" content="global" />
<style type="text/css">
body, html { padding:0; background: #B9682D; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Lucida Grande, Verdana, Arial, Helvetica, sans-serif; margin-left:0; margin-right:0; margin-top:0; margin-bottom:25px }
/*--Image styles--*/
img { border:0px none; margin:0; padding:0; }
img.header { }
img.footer { }
/*--Link styles--*/
a:link { text-align:left; padding:0; margin:0; color:#c30; text-decoration:none; font-weight:bold }
a:visited { text-align:left; padding:0; margin:0; color:#cf6c4a; text-decoration:none; font-weight:bold }
a:active, a:hover { text-align:left; padding:0; margin:0; color:#c30; font-weight:bold; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#c30 }
/*--Content, header/footer styles Styles--*/
div#footer { text-align: center; border-left:1px solid #867663; border-right:1px solid #867663; border-bottom:1px solid #867663; border-top:0px none; margin-left: 10%; margin-right: 10%; margin-top: 0; margin-bottom: 2%; background: #345655; padding-top:0; padding-left:1%; padding-right:1%; padding-bottom:1% }
div#content { height:550px; border-left:1px solid #867663; border-right:1px solid #867663; border-top:1px solid #867663; border-bottom:0px none; margin-left: 10%; margin-right: 10%; margin-top: 1%; margin-bottom: 0; background: #FFF; padding-top:0; padding-left:1%; padding-right:1%; padding-bottom:1% }
div.box { border:1px solid #000; padding:5px; padding-top:3px }
div.box p { padding-bottom:3px; }
div.box p.allowMargin { padding:0px; }
/*--Text styles--*/
/*Header styles*/
h1, h2, h3 { color: #867663; margin:6px; margin-left:0; }
h1 a, h2 a, h3 a { margin:6px; margin-left:0; padding:0 }
h1 { font-size:2em }
h1 a { font-weight:normal }
h2 { font-size:1.5em; font-weight: 550; }
h2 a { font-weight:normal }
h3, h3 a { font-size:1.3em }
h4, h4 a { font-size:small }
h5, h5 a { font-size:x-small; }
h6, h6 a { font-size:xx-small; }
/*P styles*/
p { margin:0; padding:0; }
p.allowMargin { margin:7px; left-margin:20px; margin-bottom:5px; }
/*Other text styles*/
em { }
strong { }
span.quote { font-weight:bold; display:inline; }
span.quote:after { content:"'"; }
span.quote:before { content:"'"; }
span.capatalize { text-transform:capatalize; }
span.allcaps { text-transform:uppercase; }
form span.note { font-weight:bold; color:darkorange; font-size: xx-small }
/*--Table Styles--*/
.teaminfo_table { width: 95%; border:1px solid #000; background:#ECF2F3; text-align:center; }
.teaminfo_table thead, tbody, tfoot { width:100%; }
.teaminfo_table thead th, .teaminfo_table tbody tr td { width:33%; }
.teaminfo_table tbody tr { padding:0; margin:0; border:1px solid #000; }
.teaminfo_table tbody tr td { padding:0; margin:0; }
.notes_table { width: 95%;border-collapse: collapse; border:1px solid #000; background:#ECF2F3; text-align:center; }
.notes_table thead, tbody, tfoot { width:100%; }
.notes_table thead th, .notes_table tbody tr td { width:25%; }
.notes_table tbody tr.green { background: #D7FFC4; }
.notes_table tbody tr.blue { background: #C4CFFF; }
.notes_table tbody tr.purple { background: #E7D3E7; }
</style>
<script type="text/javascript">
function close_box(idthing) {
if(document.getElementById(idthing).style.display=="") {
document.getElementById(idthing).style.display="none"
}else{
document.getElementById(idthing).style.display=""
}
}
</script>
</head>
<body>
<div id="content">
<h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/index.php?sid=a14ec42550df0fe4ac541bb0e60b18b3">Stargate Command</a></h1>
<div class="box">
<p class="allowMargin">You are now logged in, <span class="capatalize"><span class="">Colonel Jack O'Neill</span></span>. You can find all your information here, or links to other pages with that information on them. Enjoy your self, and remember, you never want to be <span class="quote">One zat gun short of acually <em>having</em> a zat gun</span>!</p>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('notes')">Current Notes:</a></h2>
<div class="box" id="notes">
<h3>Notes</h3>
<p>The green is inter-unit notes, and the blue are notes inside your unit, and the purple are notes from special people, like General Hammon or the medical staff.</p>
<table class="notes_table">
<thead>
<th>From</th>
<th>To</th>
<th>Important?</th>
<th>Note text</th>
</thead>
<tbody>
<tr style="background: #FEE2BC;"><td colspan="4"><strong>No notes yet</strong></td></tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('mission')">Current Mission:</a></h2>
<div class="box" id="mission">
<h3>Info</h3>
<table class="teaminfo_table">
<thead>
<th>Progress</th>
<th>Planet Designation</th>
<th>Link to on-going roleplay</th>
</thead>
<tbody>
<tr style="background: #FEE2BC;"><td colspan="3"><strong>You are not currently in / your team is not undertaking a mission!</strong></td></tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('teaminfo')">Team Info</a></h2>
<div class="box" id="teaminfo">
<h3>Team Leader</h3>
<p>Since you are the leader of the team, Colonel, you have more control over the unit, and can do many more things. All (most) of those actions can be accessed here.</p>
<h3>Team Users</h3>
<table class="teaminfo_table">
<thead>
<th>Name</th>
<th>Title</th>
<th>Bio</th>
</thead>
<tbody>
<tr>
<td>Jack O'Neill</td><td>Colonel</td><td></td>
</tr>
<tr>
<td>Tilk</td><td></td><td></td>
</tr>
<tr>
<td>ReptiX</td><td></td><td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/unit.php?mode=resignfromunit">Resign from SG 1</a></p>
</div>
</div>
<div id="footer"><p><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/login.php?logout&sid=a14ec42550df0fe4ac541bb0e60b18b3">Logout</a></p></div>
</body>
</html>
I have tried making the padding and margin set to zero, but that doesn't change anything!
The place is here (<!-- m --><a class="postlink" href="http://www.subsilvernet.com/stargate/index.php">http://www.subsilvernet.com/stargate/index.php</a><!-- m -->).
Help!Woops, I forgot to add that the problem only appears when your logged in. Heres the code for when I'm logged in as Administrator:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Stargate Command</title>
<!--Meta Tags-->
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="cache-control" content="proxy-revalidate" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<meta http-equiv="content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="copyright" content="Zachary Adam Blume" />
<meta name="author" content="Zach Blume" />
<meta name="robots" content="all" />
<meta name="doc-class" content="living document" />
<meta name="revisit" content="2 days" />
<meta name="distribution" content="global" />
<style type="text/css">
body, html { padding:0; background: #B9682D; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Lucida Grande, Verdana, Arial, Helvetica, sans-serif; margin-left:0; margin-right:0; margin-top:0; margin-bottom:25px }
/*--Image styles--*/
img { border:0px none; margin:0; padding:0; }
img.header { }
img.footer { }
/*--Link styles--*/
a:link { text-align:left; padding:0; margin:0; color:#c30; text-decoration:none; font-weight:bold }
a:visited { text-align:left; padding:0; margin:0; color:#cf6c4a; text-decoration:none; font-weight:bold }
a:active, a:hover { text-align:left; padding:0; margin:0; color:#c30; font-weight:bold; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#c30 }
/*--Content, header/footer styles Styles--*/
div#footer { text-align: center; border-left:1px solid #867663; border-right:1px solid #867663; border-bottom:1px solid #867663; border-top:0px none; margin-left: 10%; margin-right: 10%; margin-top: 0; margin-bottom: 2%; background: #345655; padding-top:0; padding-left:1%; padding-right:1%; padding-bottom:1% }
div#content { height:550px; border-left:1px solid #867663; border-right:1px solid #867663; border-top:1px solid #867663; border-bottom:0px none; margin-left: 10%; margin-right: 10%; margin-top: 1%; margin-bottom: 0; background: #FFF; padding-top:0; padding-left:1%; padding-right:1%; padding-bottom:1% }
div.box { border:1px solid #000; padding:5px; padding-top:3px }
div.box p { padding-bottom:3px; }
div.box p.allowMargin { padding:0px; }
/*--Text styles--*/
/*Header styles*/
h1, h2, h3 { color: #867663; margin:6px; margin-left:0; }
h1 a, h2 a, h3 a { margin:6px; margin-left:0; padding:0 }
h1 { font-size:2em }
h1 a { font-weight:normal }
h2 { font-size:1.5em; font-weight: 550; }
h2 a { font-weight:normal }
h3, h3 a { font-size:1.3em }
h4, h4 a { font-size:small }
h5, h5 a { font-size:x-small; }
h6, h6 a { font-size:xx-small; }
/*P styles*/
p { margin:0; padding:0; }
p.allowMargin { margin:7px; left-margin:20px; margin-bottom:5px; }
/*Other text styles*/
em { }
strong { }
span.quote { font-weight:bold; display:inline; }
span.quote:after { content:"'"; }
span.quote:before { content:"'"; }
span.capatalize { text-transform:capatalize; }
span.allcaps { text-transform:uppercase; }
form span.note { font-weight:bold; color:darkorange; font-size: xx-small }
/*--Table Styles--*/
.teaminfo_table { width: 95%; border:1px solid #000; background:#ECF2F3; text-align:center; }
.teaminfo_table thead, tbody, tfoot { width:100%; }
.teaminfo_table thead th, .teaminfo_table tbody tr td { width:33%; }
.teaminfo_table tbody tr { padding:0; margin:0; border:1px solid #000; }
.teaminfo_table tbody tr td { padding:0; margin:0; }
.notes_table { width: 95%;border-collapse: collapse; border:1px solid #000; background:#ECF2F3; text-align:center; }
.notes_table thead, tbody, tfoot { width:100%; }
.notes_table thead th, .notes_table tbody tr td { width:25%; }
.notes_table tbody tr.green { background: #D7FFC4; }
.notes_table tbody tr.blue { background: #C4CFFF; }
.notes_table tbody tr.purple { background: #E7D3E7; }
</style>
<script type="text/javascript">
function close_box(idthing) {
if(document.getElementById(idthing).style.display=="") {
document.getElementById(idthing).style.display="none"
}else{
document.getElementById(idthing).style.display=""
}
}
</script>
</head>
<body>
<div id="content">
<h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/index.php?sid=a14ec42550df0fe4ac541bb0e60b18b3">Stargate Command</a></h1>
<div class="box">
<p class="allowMargin">You are now logged in, <span class="capatalize"><span class="">Colonel Jack O'Neill</span></span>. You can find all your information here, or links to other pages with that information on them. Enjoy your self, and remember, you never want to be <span class="quote">One zat gun short of acually <em>having</em> a zat gun</span>!</p>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('notes')">Current Notes:</a></h2>
<div class="box" id="notes">
<h3>Notes</h3>
<p>The green is inter-unit notes, and the blue are notes inside your unit, and the purple are notes from special people, like General Hammon or the medical staff.</p>
<table class="notes_table">
<thead>
<th>From</th>
<th>To</th>
<th>Important?</th>
<th>Note text</th>
</thead>
<tbody>
<tr style="background: #FEE2BC;"><td colspan="4"><strong>No notes yet</strong></td></tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('mission')">Current Mission:</a></h2>
<div class="box" id="mission">
<h3>Info</h3>
<table class="teaminfo_table">
<thead>
<th>Progress</th>
<th>Planet Designation</th>
<th>Link to on-going roleplay</th>
</thead>
<tbody>
<tr style="background: #FEE2BC;"><td colspan="3"><strong>You are not currently in / your team is not undertaking a mission!</strong></td></tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<h2><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:close_box('teaminfo')">Team Info</a></h2>
<div class="box" id="teaminfo">
<h3>Team Leader</h3>
<p>Since you are the leader of the team, Colonel, you have more control over the unit, and can do many more things. All (most) of those actions can be accessed here.</p>
<h3>Team Users</h3>
<table class="teaminfo_table">
<thead>
<th>Name</th>
<th>Title</th>
<th>Bio</th>
</thead>
<tbody>
<tr>
<td>Jack O'Neill</td><td>Colonel</td><td></td>
</tr>
<tr>
<td>Tilk</td><td></td><td></td>
</tr>
<tr>
<td>ReptiX</td><td></td><td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/unit.php?mode=resignfromunit">Resign from SG 1</a></p>
</div>
</div>
<div id="footer"><p><a href=http://www.webdeveloper.com/forum/archive/index.php/"/stargate/login.php?logout&sid=a14ec42550df0fe4ac541bb0e60b18b3">Logout</a></p></div>
</body>
</html>