8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Anyone Know How To Fix This?

by Steve Wells
7 replies
  • WEB DESIGN
    • |
If I view this site Here Goes The Title of Your Page on IE8, at the bottom of the footer you'll see a small sliver of white background showing, BUT in Firefox, Google Chrome, Safari and Opera, its not there.... what can I do to fix this?.....

Also while viewing this page on Google Chrome only there seems to be a split in the graphics in two places, the top header to the right and the footer area?

Any ideas on what is causing this and can be done to fix it...?

I have validated the css and the html with W3C and have only 3 minor errors in the xhtml that wouldn't cause this for sure... the css code validates perfect

Any suggestions would be greatly appreciated....

All the best,
Steve
#fix
  • Profile picture of the author esmconcepts
    images/footer.jpg could be adding a little push in IE. Maybe try setting the margin-bottom to -1 instead of 0.
    Just an idea...
    Signature
    ESM Concepts
    {{ DiscussionBoard.errors[2919751].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by esmconcepts View Post

      images/footer.jpg could be adding a little push in IE. Maybe try setting the margin-bottom to -1 instead of 0.
      Just an idea...
      Thanks, tried it, it didn't change anything....
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[2919796].message }}
  • Profile picture of the author Steve Wells
    $5.00 to the first person who can fix these issues, to your paypal account...
    Signature
    Need Custom Graphics Work? - Message Me For A Design Quote!
    {{ DiscussionBoard.errors[2920571].message }}
  • Profile picture of the author LADWebDesign
    In the css file in the #body command: padding-bottom: 168px;

    change that to 167, 166, or 165 px. I would try reducing the size of the bottom padding on the #body, and increase the #footer height.
    {{ DiscussionBoard.errors[2920843].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by LADWebDesign View Post

      In the css file in the #body command: padding-bottom: 168px;

      change that to 167, 166, or 165 px. I would try reducing the size of the bottom padding on the #body, and increase the #footer height.
      Thanks for trying, but it did not work....... Any idea about why its messing up in google chrome also?
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[2921028].message }}
  • Profile picture of the author LADWebDesign
    I would then switch around the ending divs for the html:

    Currently:
    <div id="footer">
    <img src="http://www.warriorforum.com/images/footer.jpg" alt="" />
    </div> <!-- end footer -->
    </div> <!-- container -->
    </div> <!-- end wrapper -->

    Try:

    </div> <!-- container -->
    </div> <!-- end wrapper -->
    <div id="footer">
    <img src="http://www.warriorforum.com/images/footer.jpg" alt="" />
    </div> <!-- end footer -->

    Put this before the </body> tag.

    I ran the code through the html validator at The W3C Markup Validation Service and there are some important codes that have not been closed out. Try the html tidy and see how that works.

    Also... I just saw that not only are you specifying the /images/footer.jpg in the html, you are specifying it in the #footer div in the css as well. Choose one or the other file.
    {{ DiscussionBoard.errors[2924700].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by LADWebDesign View Post

      I would then switch around the ending divs for the html:

      Currently:
      <div id="footer">
      <img src="http://www.warriorforum.com/images/footer.jpg" alt="" />
      </div> <!-- end footer -->
      </div> <!-- container -->
      </div> <!-- end wrapper -->

      Try:

      </div> <!-- container -->
      </div> <!-- end wrapper -->
      <div id="footer">
      <img src="http://www.warriorforum.com/images/footer.jpg" alt="" />
      </div> <!-- end footer -->

      Put this before the </body> tag.

      I ran the code through the html validator at The W3C Markup Validation Service and there are some important codes that have not been closed out. Try the html tidy and see how that works.

      Also... I just saw that not only are you specifying the /images/footer.jpg in the html, you are specifying it in the #footer div in the css as well. Choose one or the other file.
      The html seems to have only 3 errors and 1 warning in the validator once I take the Youtube Video out. The Youtube Video for some reason produces about 40 errors and many warnings.

      The css styles validate perfectly.

      The footer.jpg is only called up in the html, the css calls up a footer-bg.jpg image, as seen below...
      ------------------
      #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:168px;
      background-image: url(./images/footer-bg.jpg);
      background-repeat: repeat-x;
      background-position: top;
      text-align: center;
      }
      ------------------
      I flipped the divs around as you said they didn't match up correctly?

      Is it possible for you to copy and paste the whole html document from the source code in your browser, and then flip the divs as you think they should work, and send them to me, via my email? I will p.m. you my email, then I will test them....

      As for the html validator, the only errors after the you tube video code is taken out are these 3 and 1 warning:

      -------------------------------------------------------------
      Line 71, Column 85: there is no attribute "background"
      …"0" cellspacing="0" cellpadding="20" background="http://www.warriorforum.com/images/testimonialBoxMid.jpg">

      Line 228, Column 122: there is no attribute "bordercolor"
      …order: 3px dashed #ff0000" bordercolor="#111111" width="80%" bgcolor="#ffffcc">

      Line 147, Column 110: there is no attribute "height"
      …cellspacing="0" cellpadding="0" background="http://www.warriorforum.com/images/guarantee.png" height="321">
      ------------------------------------------------------------------------

      Thanks for your help,

      All the best,
      Steve
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[2924944].message }}

Trending Topics