SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone explain this glitch to me?

    I'm working on my site, and most everything is coming along fine. There are a select few pages that when I view them or preview them my footer (which is suppose to stay put at the bottom of the page) will somehow or another be up in the middle of the page where the content (text) is. All I do is go up and click refresh and everything is fine....? Anyone explain this to me if you can?


    XHTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style6.css" type="text/css" />
    </head>
    
    <body>
    <div id="outer"> 
      <div id="header"> 
        <div id="leftheader"> <img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" /> 
        </div>
        <div id="rightheader"> <a href="index.php">Home</a> | <a href="resume.php">Resume</a> 
          | <a href="portfolio.php">Portfolio</a> | <a href="services.php">Services</a> 
          | <a href="contact.php">Contact</a> </div>
    
      </div>
      <div id="picheader"> <img src="images/watersplash.jpg" alt="water splash" title="water splash" /> 
      </div>
      <div id="content"> 
        <p><strong>GRAPHICS</strong></p>
        <div class="wrap"> 
          <div class="title"><strong>September 11th</strong></div>
          <div class="top"><span class="topleft"><a href="sept11.php" target="_blank">Enlarge</a></span></div>
    
          <img src="images/sept11.jpg" alt="September 11" title="September 11" class="pic1" /><br />
          <div class="clearer"></div>
        </div>
        <div class="wrap"> 
          <div class="title"><strong>Kentucky.gov</strong></div>
          <div class="top"><span class="topleft"><a href="kentuckygov.php" target="_blank">Enlarge</a></span></div>
          <img src="images/kgov1.jpg" alt="Kentucky.gov Logo" title="Kentucky.gov" class="pic2" /><br />
          <div class="clearer"></div>
    
        </div>
        <div class="wrap"> 
          <div class="title"><strong>Morehead State University Bookstore</strong></div>
          <div class="top"><span class="topleft"><a href="bookstorehead.php" target="_blank">Enlarge</a></span></div>
          <img src="images/bookstorehead.jpg" alt="Universty Bookstore Header" title="University Bookstore Header" class="pic2" /><br />
          <div class="clearer"></div>
        </div>
        <div class="wrap"> 
          <div class="title"><strong>DMS Web Design </strong></div>
    
          <div class="top"><span class="topleft"><a href="dmsdesignbanner.php" target="_blank">Enlarge</a></span></div>
          <img src="images/dmsdesignsbanner.jpg" alt="DMS Designs Banner" title="DMS Designs Banner" class="pic2" /><br />
          <div class="clearer"></div>
        </div>
      </div>
      <div id="clearfooter"></div>
      <div id="footer">
        Valid <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML Transitional">XHTML 
        1.0</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">CSS</a> 
      </div>
    
    </div>
    </body>
    </html>

    CSS:

    Code:
    body, html {height: 100%;}
    body {
    margin: 0;
    padding: 0;
    color: #000000;
    background: url(images/bg2.gif);
    text-align: center;
    }
    #outer {
    width: 700px;
    background: url(images/bg.gif) repeat-y left top;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    min-height: 100%;
    margin: auto;
    clear: both;
    position: relative;
    text-align: left;
    }
    * html #outer {
    width:704px;
    w\idth:700px;
    height:100%;
    }
    * html #picheader img {margin-left:-3px}
    html>#outer {height:auto;}
    #header {
    border-bottom: 1px solid #000000;
    background: #ffffff;
    height: 30px;
    width: 700px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding-top: 2px
    }
    #leftheader {
    float: left;
    margin-right: 200px;
    }
    #rightheader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    padding-top: 8px;
    }
    #rightheader a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #rightheader a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #picheader {
    height: 150px;
    background: url(images/blueback4.gif);
    border-bottom: 1px solid #000000;
    }
    #picheader img {
    border-right: 1px solid #000000;
    float: left;
    }
    #content {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    width: 500px;
    margin-left: 99px;
    margin-top: 2px;
    clear: both;
    }
    #content a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:hover {
    color: #6666ff; 
    text-decoration: none; 
    background: #cccccc;
    }
    #content a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:visited:hover {
    color: #6666ff; 
    text-decoration: none;
    background: #cccccc;
    }
    #content p {
    padding-left: 10px;
    padding-right: 10px;
    }
    .wrap {
    font-size: 11px;
    margin-bottom: 20px;
    }
    .wrap img {
    width: 460px;
    }
    .title {
    font-size: 16px;
    color: #999999;
    padding-left: 10px;
    }
    .top {
    font-size: 10px; 
    height: 15px; 
    border-bottom: 1px solid #F0F1EF; 
    margin-bottom: 10px;
    }
    .topleft {
    padding-left: 10px;
    }
    .pic {
    margin-left: 10px;
    margin-right: 10px; 
    float: left;
    }
    .pic1 {
    margin-left: 20px;
    }
    .pic2 {
    margin-left: 20px;
    }
    .text {
    font-size: 11px;
    padding-right: 10px;
    }
    .natchoicesthumb {
    float: left;
    display: inline;
    margin-right: 4px;
    }
    .clearer {
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    #footer {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    width: 501px;
    margin-left: 98px;
    border-top: 1px solid #9999ff;
    text-align: center;
    margin-top: 15px;
    height: 17px;
    position: absolute;
    bottom: 0;
    padding-top: 2px;
    }
    #footer a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:hover {
    color: #6666ff; 
    text-decoration: none;
    background: #cccccc;
    }
    #footer a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:visited:hover {
    color: #6666ff; 
    text-decoration: none;
    background: #cccccc;
    }
    #clearfooter {
    height: 35px;
    }
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    I would need to see the page that is causing the problem to see whats wrong. Have you got a link?

    It may be that as you haven't specified image sizes in the html that the page gets drawn before the images have been fully uploaded. If you specify image sizes then apparently the browsers allocates the space while it gets on with the rest of the page. (Although I can't confirm if this is true or not is sounds quite logical ).

    If you have a link to the page in action then we can try and see why only certain pages do it. I know opera has a problem with re-drawing and doesn't redraw the page like other browsers.

    You didn't say what browser or whether it was all browsers. (I'm assuming ie )

    The usual approach to problem solving is to take onj element at a time out of the page until the problem disappears and then you can identify the cause and then find a possible solution. This is how I find most problems rather than trying to look at the code and second guess what everything is doing

    Paul

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    http://www.geocities.com/deronsizemore/websites.htm

    That is one of the pages that is doing it. I don't know how the geocities host will affect it if any. It doesn't seem to be doing it every time. I've previewed the page from Dreamweaver today, just as I did last night and today its fine, the footer isn't riding up. In the process of finding a host, but till then geocites has to do.

    I don't have the heights and widths specified in my html...so that does sound logical for why its doing it.
    -Deron
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's probably something to do with the host adding their banner thats causing the problems. They are also adding code to your page which triggers quirksmode in ie.

    If you are changing hosts then the problem will probably go away.

    paul

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the only thing with that is, its never done it when I've checked the site online with Geocities....its been doing it when I preview in browser out of Dreamweaver. Its just doing it in Firefox too. But like I said, today its not doing it. So I don't know.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So I don't know
    When it does it next time view source and grab the code and you might see that some code is being inserted incorrectly. I have seen similar problems when people insert google adds via js into their pages.

    Paul


Bookmarks

Posting Permissions

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