...

View Full Version : page screwed up -- weird problem...HELP!!



althera
09-20-2004, 08:02 PM
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
09-20-2004, 08:09 PM
It's fine in Mozilla, but in IE the menu has been pushed over to the right. Stupid Microsoft... :mad:

althera
09-20-2004, 08:30 PM
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
09-21-2004, 04:12 AM
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
09-21-2004, 04:22 AM
-1000px? Wow! Never seen that in my entire life!

tsguitar2004
09-21-2004, 04:24 AM
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
09-21-2004, 06:07 AM
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
09-22-2004, 04:13 AM
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/2004/07/fixed-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
09-22-2004, 06:39 AM
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
09-22-2004, 07:39 AM
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
09-22-2004, 12:08 PM
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
09-22-2004, 03:25 PM
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.html#propdef-background-color

althera
09-30-2004, 01:15 PM
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!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum