Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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;
    }

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's fine in Mozilla, but in IE the menu has been pushed over to the right. Stupid Microsoft...
    Last edited by chilipie; 09-20-2004 at 09:12 PM.

  • #3
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 --

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First off, welcome to the forums! Always glad to see a new poster!

    Second, work on consolidating your CSS. Instead of:
    Code:
    #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:
    Code:
    #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:
    Code:
    #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
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    -1000px? Wow! Never seen that in my entire life!

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by tsguitar2004; 09-21-2004 at 05:26 AM.
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #7
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 .....

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Attached Files Attached Files
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #9
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #11
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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--


  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    New Coder
    Join Date
    Sep 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!!



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •