page screwed up -- weird problem...HELP!!

[althera]

just had a friend check my new page and she says everythiing is screwed up-- but in my browser-- firefox-- all is well...page looks fine..

xhtml validator says code is ok
css is validated ok--

so i cant figure out what the heck is wrong

this is sooooooooo frustrating - have been working on this page for days and nights - am new to css so its been a real ordeal-- i sure hope someone here can solve my problems as i am simply so tired and drained i cant even think anymore

many thanks in advance

here is link to page--
http://www.creativedistortion.com/linklist.html




here is css code
body {
background-color: #8548BE;
color: purple;
font-family: "Lucida Grande",Verdana, Arial, Sans-Serif;
font-size: 12pt;
text-align: center;
margin-top: 0;
scrollbar-face-color: purple;
scrollbar-3dlight-color: #aaa;
scrollbar-arrow-color: yellow;
scrollbar-base-color: black;
scrollbar-darkshadow-color: lime;
scrollbar-highlight-color: black;
}


#container {
background-color: #C2A4DE ;
border-bottom: 3px solid #DE11FF;
border-left: 3px solid #DE11FF;
border-right: 3px solid #DE11FF;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0;
text-align: left;
width: 755px;
}

#pageHeader {
background-color: #000000;
background-image: url(IMAGES/creativedistortion2a.jpg);
background-position: center;
background-repeat: repeat;
border-color: #9E64A7;
border-style: inset;
border-width: 6px;
height: 296px;
text-align: right;/*creative distortion*/
width: 751px

}


/*this is quick summary*/
#welcome {
background-color: #C2A4DE;
border-bottom: #9E64A7 1px solid;
border-left: #9E64A7 1px solid;
border-right: #9E64A7 1px solid;
border-top: #9E64A7 1px solid;
border-style: inset;
margin-bottom: 24px;
margin-left: 290px;
margin-top: 10px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
width: 430px;
}


/*this is intro*/
#preamble {
background-color: #C2A4DE;
border-bottom: #9E64A7 1px solid;
border-color: #9E64A7 ;
border-left: #9E64A7 1px solid;
border-right: #9E64A7 1px solid;
border-top: #9E64A7 1px solid;
border-style: inset;
margin-bottom: 24px;
margin-left: 290px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
width: 430px;
}

/*this is whats it about ,participation, benefits*/
#supportingText {
background-color: #C2A4DE;
border-bottom: #9E64A7 1px solid;
border-left: #9E64A7 1px solid;
border-right: #9E64A7 1px solid;
border-top: #9E64A7 1px solid;
border-style: inset;
margin-bottom: 24px;
margin-left: 290px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
width: 430px;
}


h2 {
font-size: 12pt;
text-decoration: none;
color: lime;
}

p {
font-family: Verdana, Arial, Sans-Serif;
font-size: 10pt;
line-height: 100%;
text-align: center;
color: #764B7D;
padding: 0px;
}

p.footer {
font-family: Verdana, Arial, Sans-Serif;
font-size: 6pt;
font-weight: bold;
text-align: center;
margin-top: 40px;
}

ul {
font-family: Verdana, Arial, Sans-serif;
font-size: 10pt;
font-weight: bold;
margin: 0px;
padding: 5px;
}

ol {
font-family: Verdana, Arial, Sans-serif;
font-size: 70%;
font-weight: bold;
margin: 0px;
padding: 5px;
}

a:active {
color: yellow;
text-decoration: underline;
font-weight: bold;
}


a:hover {
background-color: fuchsia;
color: yellow;
text-decoration: underline;
}

a:link {

color: red;
font-weight: bold;
text-decoration: none;
}

a:visited {
font-weight: bold;
color: white;
text-decoration: underline;
}

/*this uses the descendent selector display to give form to the nav bar elements */


#linkList {
float: left;
margin-top: 20px; /*sets distance between each conter */
margin-left: 248px;
position: absolute;
top: 280px;
width: 280px; /*sets size of list container */

}

#linkList div {
margin-left: 5px;
margin-top: 40px;

}


/* sets linklist properties */
ul {
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica, Verdana, Arial, Sans-serif;
font-size: 70%;
margin: 0px;
padding: 5px; /* sets list how far from left edge */
}





li {
color: lime;
font-weight: bold;
line-height: 22px;
list-style-type: none;
padding-right: 20px

}







#lselect { /* this is artwork*/
background-color: transparent;
background-image: url(IMAGES/creativedistortion2a.jpg);
background-position: top;
background-repeat: repeat-y;
border-color: #D286DF;
border-style: inset;
border-width: 2px;
font-family: Comic Sans MS, Sans-Serif;
font-weight: bold;
color: lime;

}
#larchives {
background-color: transparent;
background-image: url(IMAGES/creativedistortion2a.jpg );
background-position: bottom left;
background-repeat: repeat-y;
border-color: #D286DF;
border-width: 2px;
border-style: inset;
font-family: Comic Sans MS, Sans-Serif;
color: lime;
}



#lresources {
background-color: transparent;
background-image: url(IMAGES/creativedistortion2a.jpg);
background-position: bottom rightr;
background-repeat: repeat-y;
border-color: #D286DF;
border-style: inset;
border-width: 2px;
}




/* artwork header */
h3.select {
color: lime;
font-family: Comic Sans MS, Sans-Serif;
font-size: 12pt;
font-weight: bold;
margin-bottom: 5px;
margin-left: 10px;

}
h3.arhives {
color: lime;
font-family: Comic Sans MS, Sans-Serif;
font-size: 12pt;
font-weight: bold;
margin-bottom: 5px;
margin-left: 10px;
}

h3.resources {
color: lime;
font-family: Comic Sans MS, Sans-Serif;
font-size: 12pt;
font-weight: bold;
margin-bottom: 5px;
margin-left: 10px;
}



#linkList li a:link {
background-color: transparent;
color: lime;
}

#linkList li a:visited {
background-color: transparent;
color: white;
}


#linkList li a:hover, #linkList a:active {
background-color: fuchsia;
color: yellow;
}

[chilipie]

It's fine in Mozilla, but in IE the menu has been pushed over to the right. Stupid Microsoft...

[althera]

yeah i know the problem - but WHAT DO I DO ABOUT IT????????????????

i love firefox -- its so much better than IE-- i just downloaded fox a few days ago-- am telling all my friends about it --

[tsguitar2004]

First off, welcome to the forums! Always glad to see a new poster!

Second, work on consolidating your CSS. Instead of:

#welcome {   
  background-color:        #C2A4DE;
  border-bottom:           #9E64A7 1px solid;
  border-left:             #9E64A7  1px solid;
  border-right:            #9E64A7  1px solid;
  border-top:              #9E64A7  1px solid;
  border-style:           inset;
  margin-bottom:          24px;
  margin-left:            290px;
  margin-top:             10px;
  padding-bottom:         12px;
  padding-left:           12px;
  padding-right:          12px;
  padding-top:            12px;
  width:                  430px;
  }

can be:

#welcome {   
background-color: #C2A4DE;
border: #9E64A7 1px inset;
margin: 10px 0px 24px 290px;
padding: 12px;
width: 430px;
}

See how that works? Elements can be combined. This makes it much simpler code to wade through? in times like these!!

I haven't given it my all, but you have some issues with using position: absolute; and making specific pixel declarations where that menu should go. You will want to eventually move to a system more like this layout:
http://bluerobot.com/web/layouts/layout1.html
or like this one:
http://glish.com/css/7.asp
Just get rid of the far right menu on that last one and you have something similar to your current layout.

That being said, here's a suggestion. Change your "#linkList" CSS to the following:

#linkList  
{
margin-top: -1000px; /*sets distance between each  container  */
margin-left: 10px;
width: 280px; /*sets size of list container  */
}

Post back with questions and welcome, again!
-ts

[gohankid77]

-1000px? Wow! Never seen that in my entire life!

[tsguitar2004]

Yeah; something's up with that code, but the CSS is too layered and I don't feel like sorting through it all. The -1000px worked on IE6 and NS7.1/pc!!

For some reason, the linksList is below the body content and needs to be raised above it. I tried it another way (using floats), but I got something wrong because the list appeared *behind* the main body content. I added z-index to that and it still didn't work. But that wasn't the issue. I shouldn't have to use z-index with a floated layout. Something else is going on there.
<shrug>
-ts

[althera]

thanks for your help... i do really appreciate it --

i went to change code and something weird happened with my host file manager--POWWEB-- my code disappeared TOTALLY--

and of course i didnt have a back up copy- DUH DUH--- of all the years i have been on the net and doing pages-- i ALWAYS BACK UP but this time i guess i was so intent on trying to learn everything i forgot- hard lesson learned for sure--


its not almost 1am and i have been working trying to reestablish at least some of code but again when i went to save it - it disappeared-- so now i am really frustrated and tired --

i just realized i can copy code from the message board- AHHHHHHHHHHHHHH

i did move the margins to -1000px but it didnt do anything but move the containers WAY over to the left side of the page-- and way down the bottom of the page--

so once again i am at a loss--

i think the god of css is totally against me--

tomorrow i will reconstruct code-- AFTER i leave a message on the board of my host--

thanks again for you warm welcome and help with this problem-- i hve posted on other boards and either gotten no help or help that made things wors .....

needless to say i am about to simply throw in the towel and go back to html at least i KNOW that ---

ok -- i am off to bed -- will start fresh in the morning and have a better attitude-- and hopefully things will go much better for me .....

[tsguitar2004]

Well, the code you had posted here and the code you had on your site were not the same. Here's a ZIP file of the HTML and CSS that I had when I made those changes. See how that looks in Firefox.

And if you're rebuilding your site from scratch, look at some layout demos:
http://www.bluerobot.com/web/layouts/
http://www.glish.com/css/
http://annevankesteren.nl/archives/2...ed-positioning
http://www.positioniseverything.net/
There's a few to get you started. Just find a layout that is similar to what you want, copy the code, and play with the CSS and XHTML!! Post back with questions.
-ts

[althera]

i have had so much trouble lately-- my web host ftp screwed up and erased ALL MY CODE-- both last nite , this afternoon, AND tonite-- so i am extremely frustrated and over it all

i decided since my page was so messed up -- i found an online browser cam that takes pics of page and displays in ALL kinds of browsers and my page was bascially screwed in everyone so i decided to chuck it all and start from scratch with a faster and easier layout-

so have been working on it all day-- and then with all the ftp problems that turned into a nitemare too--

so that is probably why the code is different-- sorry about that

i will download ur zip file and check it out -- gosh it sure would be great if u found an answer for me--

its late - i am exhausted and can hardly type-- almost 2am-- ENOUGH COMPUTER FOR ONE DAY!!!!!!!

thanks so much for your help- will let ya know how it all turns out

[tsguitar2004]

I suggest that you start from scratch. The design has potential, but the code was waaaaaaaay convoluted! Take a look around and find something you like, then tweak it!
-ts

[althera]

that is EXACTLY what i am doing -- found an easier, faster, and simple layout so am going with that

thanks so much for your help-- i do appreciate it -- will let ya know when things are up and running--

[]|V|[agnus]

What kind of host touches your code? That doesn't make any sense.

I don't have the time or patience to walk you through this either, but I can offer more coding practice tips: make things easier on the server, your user, and yourself by trimming even more excess fat from your CSS by not declaring default values for properties.

background-color: transparent; is not necessary as many places as you have it since it will default to that. Check out the CSS spec for more on default property values.

http://www.w3.org/TR/REC-CSS2/colors...ckground-color

[althera]

sorry i havent gotten back to post here but i have just gone thru hurricane francis and jeanne-- thankfully little damage but EXTREMELY STRESSFULL all the same

i have taken advice here and gone to a two column template and trashed the other -- it was just too much to deal with --

so things are easier now and i am working on the new layout--

MANY THANKS for help here -- i do appreciate the time and effort made by those who responded--

i am sure i will have other questions and problems as things develop so will be back to post again when things come up!!!