Need Continuity Help - Frankenstein Stylesheet Not Aligning

hello,

so i've been 'teaching' myself html/css for a while now that my webmaster is unavailable to finish what she started. in general things have been going well but i am having some alignment issues.

*** WARNING: my stylesheet is very unattractive because i borrow bits and pieces from various sources. ***

the test site i am working on is: New Design (http://fracturedminds.net/website/)

the main issues i have as you'll see if you look are:

- the site "blinks" as you go from page to page, load issue?
- the alignment is off from page to page which is weird because isn't the stylesheet supposed to hold it together?
-the "contact" page also seems to have a broken menu, meaning if you look at the other links and then at the contact link, you'll notice the end two links aren't blue?
- the "contact" page isn't syncing at all, which is driving me nuts because i grabbed the information from my old webpage found here: Old Design (http://fracturedminds.net/contact.html)

i will link the sources/codes below. please if anyone has a solution or a link to a solution please let me know. i just don't know how to think code from scratch. thanks in advance.

FRANKENSTEIN STYLESHEET (what i tried to put together)
body {
margin: 0px;
padding: 0px;
padding-top: 15px;
padding-bottom: 15px;
background: #928367;
color: #bebebe;
font-size: 11pt;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
}

td {
font-size: 10pt;
}

a {
color: #266a7b;
}

a.menu{
color: #41261b;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}

a.menu2{
color: #126189;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}


a.menu:hover, a.menu2:hover{
color: #fbfdfd;
}

span.menu{
color: #fbfdfd;
font-size: 10pt;
}

span.menuItem{
padding-right: 50px;
}

td.blogitem{
width: 312px;
vertical-align: top;
}

.blogdate {
color: #5a5959;
font-size: 8pt;
padding-bottom: 17px;
font-weight: bold;
}

.blogtext {
font-size: 8pt;
padding-right: 40px;
}

.blogTitle {
font-size: 13pt;
font-family: 'Helvetica, Arial, Tahoma, Verdana, Sans-serif';
color: #ffffff;
padding-bottom: 10px;
}

.quickOpen{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: none;
z-index: 100;
}

.quickBg{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
visibility: hidden;
z-index: 90;
background: #000000;
opacity: 0.7;
filter:Alpha(Opacity='70');
}

.rIcon {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-radius-topright: 8px;
}

.imgFull{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-radius-topright: 8px;
}



input.photoPost{
width: 500px;
}
textarea.photoPost{
width: 500px;
height: 120px;
}

.title, h1,h2{
font-size: 16pt;
color: #848484;
padding-bottom: 15px;
font-weight: normal;
font-family: 'Helvetica, Arial, Tahoma, Verdana, Sans-serif';
}

.admTable{
width: 600px;
background: #343434;
}

.admSmall{
font-size: 8pt;
}

.ghost {
opacity: 0.3;
filter:Alpha(Opacity='30');
}

.titleField {
width: 600px;
}

.docText{
width: 940px;
height: 350px;
background: #ffffff;
font-size: 10pt;
font-family: 'Helvetica, Arial, Tahoma, Verdana, Sans-serif';
}

textarea.aboutField{
width: 600px;
height: 100px;
}

textarea.titleField{
height: 200px;
}


input.addDay{
width: 30px;
border: solid 0px;
font-size: 18pt;
}

textarea.addDay{
width: 250px;
height: 80px;
}

div.dialogBox{
background: #282828 url("../img/bg.jpg") repeat-x;
border: solid 1px #353535;
}

.dayCell {
position: absolute;
top: 25px;
left: 60px;
font-size: 45pt;
color: #545454;
}

.dayItem {
position: absolute;
top: 0px;
left: 5px;
font-size: 7pt;
}

.dayMax {
position: relative;
width: 100%;
height: 100%;
}

.blogLink {
text-decoration: none;
color: #d2d2d2;
}
.linkUpload{
width: 700px;
height: 300px;
}

.jScrollPaneContainer {
position: relative;
overflow: hidden;
height: 17px;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
left: 0;
bottom: 0;
width: 100%;
height: 17px;
background: #126189;
}

.jScrollIntervalTrack {
position: absolute;

}

.jScrollPaneDrag {
position: absolute;
background: #e2e2e2;
cursor: pointer;
overflow: hidden;
height: 17px;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-radius-topright: 5px;


}
.jScrollPaneDragLeft {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragRight {
position: absolute;
bottom: 0;
right: 5;
overflow: hidden;
}
a.jScrollArrowLeft {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
text-indent: -2000px !important;
overflow: hidden;
background: url("../img/left.gif") no-repeat 0 0;
height: 17px;
width: 14px;
}
a.jScrollArrowLeft:hover {
/*background-position: 0 -15px;*/
background: url("../img/left.gif") no-repeat 0 0;
}

a.jScrollArrowRight {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px !important;
overflow: hidden;
background: url("../img/right.gif") no-repeat 0 0;
height: 17px;
width: 14px;
}
a.jScrollArrowRight:hover {
/*background-position: 0 -15px;*/
background: url("../img/right.gif") no-repeat 0 0;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-position: 0 -30px;*/
}


.scroll-pane {
width: 200px;
height: 250px;
background: #282b2c;
float: left;
padding: 0;
}
#pane1 {
height: 250px;
width: 250px;
padding: 0;
display: block;
_overflow: hidden;
}
div.address {
float: left;
height: 400px;
width: 320px;
margin: 0px;
padding: 0px 10px 10px 10px;
background: #434344 url(../img/backDirect.gif) no-repeat 0 bottom;
border-bottom: 1px solid #343435;
border-left: 1px solid #343435;
border-right: 1px solid #343435;

table.contactT {
padding: 0px;
margin: 65px 0px 0px 0px;
border: 0px none;

border-collapse: collapse;
}
table.contactT td {
padding: 0px;
margin: 0px;
height: 50px !important; height /**/: 400px;
border-top: 0px solid #666666;
border-right: 0px solid #666666;
border-bottom: 0px solid #666666;
border-collapse: collapse;


OLD STYLESHEET (made by my old webmaster)
body {
margin: 0px;
padding: 0px 0px 30px 0px;
background: #928367 url(../img/backNavbar.gif) repeat-x 0 top;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
font-size: 11px;
}

body#home {
text-align: center;
background: #928367 url(../img/back_Home.gif) repeat-x fixed 0 0;
padding: 20px 0px 0px 0px;
}

body#home div#content {
width: 970px;
margin: 0px auto;
text-align: left;
padding: 0px;
}

body#home div#headerHome {
width: 970px;
position: absolute;
margin: 570px 0px 0px 0px;
background: #000000 url(../img/backNavbar.gif) repeat-x;
}

body#home .menu {
margin: 0px 10px 0px 0px;
top: 0px;
display: block;
}

body#home .portfolio {
margin: 0px;
padding: 0px;
}

body#home .portfolio img {
border: 0px;
padding: 0px;
margin: 0px;
}

.tooltipHome-tip {
background: url(../img/baloonHome.png) no-repeat;
padding: 10px 10px 0px 12px;
color: #ffffff;
width: 200px;
height: 142px;
text-align: left;
z-index: 13000;
}
.tooltipHome-tip img {
margin: 0px 0px 4px 0px;
}
.tooltipHome-title {
font-weight: bold;
font-size: 12px;
}

.tooltipHome-text {
font-size: 11px;
color: #a4a4a4;
}
div#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 51px;
background: #000000 url(../img/backNavbar.gif) repeat-x;
padding: 0px 0px 0px 10px;
margin: 0px;
}

div#logo {
width: 337px;
position: absolute;
margin: 0px;
padding: 0px;
left: 10px;
}

div#bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
background: #6c6c6c url(../img/backBottom.gif) repeat-x;
padding: 7px 0px 0px 30px;
margin: 0px;
color: #ffffff;
border-top: 1px solid #393939;
}

div#content {
width: 100%;
padding: 0px;
margin: 0px;
}
body#contact div#content {

padding: 0px;
margin: 0px;
}
@media screen {

body > div#header {
position: fixed;
}

body > div#bottom {
position: fixed;
}

}

div#logo img {
border: 0px;
}

div#scroll {
width: 200px;
}

.menu {
position: absolute;
width: auto;
right: 0px;
margin: 0px 20px 0px 0px;
}

.menu ul {
font-weight: lighter;
font-size: 11px;
list-style: none;
margin: 0px 0px 0px 2px;
padding: 0px;
}

.menu ul li {
float: left;
height: 33px;
padding: 18px 7px 1px 8px;
font-size: 11px;
text-align: center;
}

.menu ul li a {
display: block;
padding: 0px 7px 0px 8px;
margin: 0px;
color: #ffffff;
background: url(blank.gif) repeat;
}

.menu ul li a:hover {
display: block;
color: #839fe3;
padding: 0px 7px 0px 8px;
margin: 0px;
text-decoration: none;
background: #2d2d2d;

}

body#commercial .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#travel .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#personal .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#aboutMe .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

body#contact .menu ul li.linked {
display: block;
background: #48494a url(../img/linkedComm.gif) no-repeat;
padding: 18px 15px 0px 15px;
margin: 0px;
color: #272727;
}

.contact {
bottom: 20px;
position: absolute;
padding: 0px 0px 0px 17px;
}

.contact a:hover {
text-decoration: underline;
}

.portfolio {
padding: 65px 10px 0px 0px;
}

.portfolio table {
padding: 0px;
margin: 0px 0px 0px 0px;
border: 0px;
}

.portfolio td.back {
background: none;
vertical-align: top;
padding: 0px;
}

.portfolio img {
margin: 0px 10px 0px 30px;
padding: 5px;
background: #fff;
border: 1px solid #353535;
}

.left {
float: left;
display: block;
margin: 0px 10px 10px 0px;
}

/* My Comment */

/************** GENERAL CONTENT ****************/
a img , a:visited img {
border: 0px;
}
a {
color: #546ee5;
text-decoration: none;
}
img a:hover {
background: none;
}
a:hover {
color: #85c7e4;
text-decoration: underline;
}
p a:hover {
background: #2d2d2d;
}
.credits {
color: #f2f2f2;
font-size: 10px;
}

.credits a:hover {
text-decoration: underline;
}

div.about {
width: 750px;
margin: 65px 750px 0px 0px;
height: 498px !important; height /**/: 500px;
border: 1px solid #666666;
background: #434344 url(../img/backDirect.gif) repeat-x 0 bottom;
}
.about img {
padding: 0px 0px 19px 0px;
border-right: 0px solid #4a4a4a;
background: #928367;
margin: 0px 10px 0px 0px;
}
div.mention {
width: 380px;
height: 498px !important; height /**/: 500px;
margin: -500px 0px 0px 750px;
background: #353636 url(../img/backBlog.gif) repeat-x 0 bottom;
padding: 0px;
border: 1px solid #666666;
}
h1 {
font-size: 14px;
font-weight: normal;
color: #cbcbcb;
padding: 20px 10px 0px 10px;
margin: 0px;
letter-spacing: 1px;
}
h2 {
font-size: 13px;
font-weight: normal;
color: #cbcbcb;
padding: 20px 10px 0px 10px;
margin: 0px;
letter-spacing: 1px;
}
p {
color: #b8b8b8;
padding: 0px 10px;
font-size: 12px;
line-height: 1.5em;
margin: 0px;
}

p.content {
color: #b8b8b8;
font-size: 1.1em;
line-height: 1.3em;
padding: 4px 4px 4px 10px;
font-weight: normal;
}

p.intro {
color: #b8b8b8;
width: 250px;
font-size: 1.1em;
line-height: 1.5em;
padding: 0px 70px 10px 10px;
font-weight: normal;
}

table td {
vertical-align: top;
}

#logo {
border: none;
padding: 0px;
margin: 0px;
}

/************* HIDDEN CONTENTS *****************/

.hidden_contents {
position: absolute;
margin-top: -1000px;
}

/************* SLIDER MOOTOOLS *****************/

#button {
list-style: none;
margin: 3px 0px 0px 0px;
padding: 0px;
color: #ffffff;
height: 15px;
text-align: center;
}

#button li {
float: left;
display: block;
width: 22px;
padding: 0px;
margin: 0px;
background: url(../img/bottoneImg.gif) 1px 1px;
}

#button li a, #button li a:visited {
display: block;
color: #24566e;
padding: 5px 4px 3px 4px;
background: url(../img/bottoneImg.gif) 1px -19px;
}

#button li a:hover {
color: #ffffff;
text-decoration: none;
margin: 0px;
background: url(../img/bottoneImg.gif) 1px 1px;
}

/*************** TOOL TIP MOOTOOLS ******************/

.tool-tip {
background: url(../img/backTooltip.gif) no-repeat 0 0;
padding: 13px;
color: #ffffff;
width: 300px;
height: 50px;
}

.tool-title {
font-weight: bold;
font-size: 12px;
}

.tool-text {
font-size: 11px;
}

.toolNav-tip {
background: url(../img/ballonTooltip.png);
padding: 0px;
color: #ffffff;
width: 100px;
height: 100px;
}

.toolNav-title {
font-weight: bold;
font-size: 11px;
}

.toolNav-text {
font-size: 11px;
}

.FirstFoto {
position: relative;
margin: 200px 0px 0px 0px;
}

.FirstFoto a {
display: block;
width: 70px;
height: 60px;
text-indent: -90000%;
background: url(../img/firstPhoto.gif) no-repeat 0px -60px;
}

.FirstFoto a:hover {
background: url(../img/firstPhoto.gif) no-repeat 0px 1px;
}

/****************** FORMMAIL *******************/
table.contactT {
padding: 0px;
margin: 65px 0px 0px 0px;
border: 0px none;

border-collapse: collapse;
}
table.contactT td {
padding: 0px;
margin: 0px;
height: 50px !important; height /**/: 500px;
border-top: 0px solid #666666;
border-right: 0px solid #666666;
border-bottom: 0px solid #666666;
border-collapse: collapse;
}
div.formMail {
float: left;
width: 350px;

margin: 0px 0px 0px 10px;
}

form#myForm {
width: 320px !important; width /**/: 350px;
height: 275px !important; height /**/: 300px;
margin: 0;
padding: 15px 15px 10px;
}

label {
float: left;
width: 90px;
height: 30px;
font: 12px/30px Arial,sans-serif;
margin-right: 5px;
text-align: right;
color: #8b8b8b;
}

input,textarea {
border: 1px solid #252525;
color: #475078;
font: 12px Arial,sans-serif;
}

div.input-cont {
float: left;
width: 200px;
height: 30px;
margin-bottom: 3px;
}

input {
display: block;
width: 175px;
background: #FFF;
margin: 5px 0 0 10px
}

div.textarea-cont {
float: left;
width: 200px;
height: 170px;
padding: 1px;
}

textarea {
width: 170px;
height: 140px;
margin: 10px;
}

button#go {
float: left;
width: 130px;
text-align: center;
height: 27px !important; height /**/: 32px;
line-height: 25px;
display: inline;
margin-left: 102px;
padding: 1px 0 6px;
background: #D5D8E1 url(../img/submitBk.gif) no-repeat 0 -1px;
color: #000;
cursor: pointer;
border: 0px;
}
#log {
width: 320px;
margin: 10px 0px 0px 10px;
color: #e9ab1b;
}

#log_res {
overflow: auto;
}

#log_res.ajax-loading {
padding: 20px 0;
background: url(../img/spinner.gif) no-repeat center;
}

/*************** PAGINA CONTACT ******************/
div.address {
float: left;
height: 500px;
width: 320px;
margin: 0px;
padding: 0px;
background: #434344 url(../img/backDirect.gif) no-repeat 0 bottom;
border-bottom: 1px solid #343435;
border-left: 1px solid #343435;
border-right: 1px solid #343435;
}
div.myBlog {
float: left;
width: 320px;
height: 500px;
margin: 0px;
background: #353636 url(../img/backBlog.gif) no-repeat 0 bottom;
padding: 0px;
border-bottom: 1px solid #252526;
border-left: 1px solid #252526;
border-right: 1px solid #252526;

}
.voiceCont {
display: block;
width: 95px;
float: left;
background: #606060;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 2px;
}

I am having the most trouble on the contact page: NEW CONTACT PAGE (http://fracturedminds.net/website/contacts.html)

but there are alignment issues throughout. Any and all help is appreciated. I'm literally pulling my hair out over this.

I always recommend that people validate their HTML markup before trying to diagnose or fine-tune their CSS. Your linked page currently has 22 errors:

http://validator.w3.org/check?uri=http%3A%2F%2Ffracturedminds.net%2Fwebsite%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

These are all fairly minor and very easy to fix. Most of them are image tags missing the "alt" attribute and a self-closing tag (using <img src="..." alt="..." /> for the image tags). Note the forward slash just before the ">" character at the end of the image tag - this needs to be there in XHTML documents such as yours.

Patch up those 22 errors (and any appearing on the rest of your pages) and we can dig in full tilt.

As for your contacts page, look at this highlighted bit of code:
<div id="content">
<table class="contactT" >
<tr>
<td>&nbsp;</td>
<td>
<div class="address">
<h2>METHODS OF CONTACT<br />
<br />
</h2>
<style type="text/css">
a:link {color: black}
a:visited {color: black}
a:hover {color: red}
a:active {color: red}
</style>

Remove that entire highlighted portion and this should sort out the issue with link color differing on the contact page.

Also, from this same page, you need to match the height of the highlighted div to that of the photo scroller pages' counterparts:

<div style="padding-right: 15%">

<div style="height:400px">

<!-- THIS IS WHERE I AM CUTTING IN THE CODE FROM THE OLD PAGE -->



<div id="content">
<table class="contactT" >
<tr>
<td>&nbsp;</td>
<td>
<div class="address">
<h2>METHODS OF CONTACT<br />
<br />
</h2>
<style type="text/css">
a:link {color: black}
a:visited {color: black}
a:hover {color: red}
a:active {color: red}
</style>

Give it a height of 421px and things will start to look more familiar.


We can discuss your non-semantic use of tables next... :D

@ rowdower: thank you so much for that link. i went through and validated each page. was a bit tedious but i have to admit the code seems nicer. i'd add spaces just for reading ease, but that's just me.

i uploaded to the server and while your fix for the menu bar was perfect, the page alignment is now a bit wonky.

both the main page and the contact page are flushed to the top of the page: Main Page (http://fracturedminds.net/website/) and Contact Page (http://fracturedminds.net/website/contacts.html)

while all the other pages are really far to the right. (the exception is the "models" link, this one seems to still be following the intended format)

i wasn't sure if you wanted me to repost code or not. still getting used to the logistics here. but... for neatness sake:

1. The Stylesheet (http://fracturedminds.net/website/css/style.css)

@ rowdower: thank you so much for that link. i went through and validated each page. was a bit tedious but i have to admit the code seems nicer. i'd add spaces just for reading ease, but that's just me.

i uploaded to the server and while your fix for the menu bar was perfect, the page alignment is now a bit wonky.

both the main page and the contact page are flushed to the top of the page: Main Page (http://fracturedminds.net/website/) and Contact Page (http://fracturedminds.net/website/contacts.html)

while all the other pages are really far to the right. (the exception is the "models" link, this one seems to still be following the intended format)

i wasn't sure if you wanted me to repost code or not. still getting used to the logistics here. but... for neatness sake:

1. The Stylesheet (http://fracturedminds.net/website/css/style.css)

Removing the width:4422px; from jScrollPaneContainer seems to resolve this issue, although I agree with Rows about the use of tables for this. You should read his link about why tables are bad for layouts in his signature.

Removing the width:4422px; from jScrollPaneContainer seems to resolve this issue, although I agree with Rows about the use of tables for this. You should read his link about why tables are bad for layouts in his signature.


thank you for the response. i have no idea where to find the above information to make the adjustment. its possible that the information changed after the validation website rewrote previous information, i'm not sure. checked the stylesheet, the page itself and even peeked at the javascript (i didn't change anything) but i cannot find a container with those numbers or even a width value beyond 100%.

also, what is the alternative to tables? personally the simpler and cleaner the better it would be for me. thanks in advane!

thank you for the response. i have no idea where to find the above information to make the adjustment. its possible that the information changed after the validation website rewrote previous information, i'm not sure. checked the stylesheet, the page itself and even peeked at the javascript (i didn't change anything) but i cannot find a container with those numbers or even a width value beyond 100%.

also, what is the alternative to tables? personally the simpler and cleaner the better it would be for me. thanks in advane!

its an inline style for the div with a class jScrollPaneContainer. should be right there in your html markup.

its an inline style for the div with a class jScrollPaneContainer. should be right there in your html markup.

Alright, so i fixed it. I found on one of the lines it said, "relative" for position and I changed that to absolute and that fixed it back tot he left.

Now i'm going to experiment to see how to get it lower... as it wasn't meant to be that far upward. it was supposed to rest in the center of the screen. an example of how its supposed to look is found here: Properly Aligned Page (http://fracturedminds.net/website/portfolio/10.html)

Well it looks like you've gone and added a top menu bar that wasn't there before. I can't account for that when I don't know it's coming! :D

What you can do (generally speaking) to vertically center an element of fixed height (as your layout seems to be getting toward) you just need to give it style something like this:

#content{height:500px;position:absolute;top:50%;margin-top:-250px;left:50%;margin-left:-420px;width:auto;}
table.contactT{margin-top:0;}

Give that a shot at the very BOTTOM of your CSS file and see if it helps to fix your contact page.