Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Jan 2016
    Posts
    1
    Member #
    53052

    Image tiling causes some browsers to overflow horizontal axis

    I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
    PHP Code:
    left:650px
    This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
    PHP Code:
    width100%;
                    
    overflow-xhidden
    This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
    FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
    I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website to see the problem (unless you're using IE):

    http://www.cybergolem.com/indexWIP.php

    BTW, my div nesting looks like this:

    HTML Code:
    <body>
    				  <div id="container">
    				    <a class="homebutton" href="index.php">Home Page</a>
    				    <div id="header"></div>
    				  </div>
    
    				  <div id="footer">
                                         <div id="footNote">  Thar Be Dragons Here  </div>
                                      </div>
    				</body>
    Thanks Much.

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com