Web Analytics Made Easy -
StatCounter So many bugs... but nearing the end. - CodingForum

Announcement

Collapse
No announcement yet.

So many bugs... but nearing the end.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • So many bugs... but nearing the end.

    Ok...
    This is the site.
    This is the CSS for the main page:
    Code:
    html {
    margin: 0px;
    padding: 0px;
    overflow: auto;
    }
    
    body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    color: #000000;
    background: rgb(82, 132, 178) url('template.gif') no-repeat center;
    }
    
    a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    
    a:hover {
    text-decoration: underline;
    color: #FFFFFF;
    }
    
    a:visited {
    text-decoration: none;
    color: #FFFFFF;
    }
    
    #contentframe {
    margin: 200px auto 0px auto;
    padding: 0px;
    width: 694px;
    height: 350px;
    }
    
    #footer {
    margin: 0px auto;
    padding: 0px;
    width: 694px;
    }
    
    p.foot {
    padding-top: 3px;
    text-align: center;
    line-height: 90%;
    font-size: 9pt;
    border-top: 1px dotted black;
    }
    This is the HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="index.css" rel="stylesheet" type="text/css">
    <title>Welcome to the Joggins Fossil Cliffs 2005
    </title>
    </head>
    <body>
    <script type='text/javascript'>
    function Go(){return}
    </script>
    <script type='text/javascript' src='exmplmenu_var.js'></script>
    <script type='text/javascript' src='menu_com.js'></script>
    <noscript>Please enable JavaScript in your browser</noscript>
    <div id="contentframe">
    <iframe src="home.html" width="694" height="350" frameborder="0" scrolling="auto">
    </iframe>
    </div>
    <div id="footer">
    <p class="foot">
    This website was developed by CREDA. The rights to all information, designs, and images belong to their respective owners and may not be duplicated or utilized without their consent. Please visit our <a href="disclaimer.html">disclaimer</a> &copy2005.
    </p>
    </body>
    </html>
    Basically here are the known issues.
    1. Resolutions... 1280x960+ or whatever makes the whole thing go nuts. 800x600 has a tiny bit of horizontal scroll which is ugly.
    2. FireFox versus IE... Everything is vertically shifted down about 10pixels in FF.
    3. Background image for headers renders differently in FireFox than in IE.
    4. Probably more... point out anything you can.

    I have thought about wrapping the java nav menu in a div and then instead of using the menu's config to adjust by so many pixels giving the div a % from top to make it stay put. Same goes for the iframe, % from top instead of pixels.

    I need to put this project to bed, so please any help is greatly appreciated. And it's good karma.
    Once I thought I was wrong but I was mistaken.

  • #2
    I think you should use some type of container, that should clear up a lot of things. That little horizontal scroll is coming from this
    Code:
    html {
    margin: 0px;
    padding: 0px;
    overflow: auto;
    }
    IE will add the horizontal scroll even if there is nothing to scroll once it gets the vertical scrollbar. There is no horizontal scroll in FF. Not sure why its misaligned, but I think the container will help you. You are also missing your closing div in your footer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      The header problem in Firefox is due a typo here, it should be no-repeat:

      Code:
      h4 {
      margin-top: 10px;
      text-indent: 125px;
      background-image: url(headerback.gif);
      background-position: center;
      background-repeat: [B]no repeat[/B];
      color: #3E3E3E;
      }
      Have you tested at higher resolutions? The layout seems to be breaking...
      Edit: Sorry, I guess you have
      Last edited by mcdougals4all; Aug 3, 2005, 04:29 PM.
      Computer, kill Flanders... Did I hear my name? My ears are burning...
      Good start. Now finish the job.

      Comment


      • #4
        k, thanks guys... So you think I should put the nav bar in a div right? Well I tried placing the code:

        <script type='text/javascript'>
        function Go(){return}
        </script>
        <script type='text/javascript' src='exmplmenu_var.js'></script>
        <script type='text/javascript' src='menu_com.js'></script>
        <noscript>Please enable JavaScript in your browser</noscript>

        Within a div because then I could use percentages to position it so the layout wouldn't break in really high resolutions... but when I tried to wrap it in a div it float on top instead for some reason. I will try again but am 99% sure it will do this.

        menu sits on top of this new div.
        ______________________________________________
        |_____________________________________________|


        There is an option to adjust the positioning of the menu in the config file for the javascript but without it it just defaults to the top of the page.
        Once I thought I was wrong but I was mistaken.

        Comment


        • #5
          Well I was wrong, if I set the javamenu to not start any distance from the top and wrap it in a middle aligned div... It just doesn't work and instead it aligns to the very top of the page.

          Is this just this particular javamenu or I am guessing that rather this will be the case for all because if it didn't render over top of everything its little tabs would get cut off.

          I've tried reading around and it seems like I'll have to add stuff to detect the browser resolution and then add or substract pixels to the value being passed in the config file. Ugh.
          Once I thought I was wrong but I was mistaken.

          Comment


          • #6
            So... I finally got the thing inside a div and positioned using percentages... and then I realized it doesn't matter. The resolution is not always the same ratio so there is no magical percentage that will always keep it in the same place.

            The only way to do this is to have javascript detect the resolution and then add the correct number of pixels to the top adjustment.

            If someone can do this or knows a better alternative please.
            Once I thought I was wrong but I was mistaken.

            Comment


            • #7
              Ok... so I got it now... it is because I was using margins to position the elements. I need a way to get the same positioning using position things instead.
              Once I thought I was wrong but I was mistaken.

              Comment

              Working...
              X