Surefire Mechanical Posted April 3, 2014 Share Posted April 3, 2014 Hello, I thought I was doing a simple thing, reformatting my website slightly and cleaning it up a bit but I'm running into problems. When I resize the browser window, some of the content shifts its position on me. I have tried various different methods of postioining- relative, absolute etc., and have tried asigning widths and even min-widths to elements to no avail. Unfortunately, a thorough search on the web leads me to a lot of other people having this problem and answers that aren't solving it. I am beginning to think it relates to the fact that my particular page uses a non-repeating, centered background image (especially as this is one of the changes I made to the layout) you can see an example of what's happening at Even worse, when I try to view the above page in firefox, the positioning is out of whack even when the browser is maximized....is this due to differences in the way the browsers handle tables? Of course, I need this website to display properly in all major browsers and not act up if the window is resized. Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 I guess we remove links now. ok then. surefireny.com/resize_problem.html http://surefireny.com/resize_problem.html Link to comment Share on other sites More sharing options...
davej Posted April 3, 2014 Share Posted April 3, 2014 Click the little icon that looks like a chain link with a drip of green blood. You seem to have an interesting comedy situation that looks like a bad mix of various types of positioning. Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 http://www.surefireny.com/resize_problem.html Thanks. It worked without doing that the other day lol Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 (edited) lol, yea probably not the best way for me to illustrate the problem. I can't say anything for the state of that style sheet currently....I had been trying so many different things...that's an abandoned page, included just to illustrate as the actual page isn't uploaded-the new page in its current state is without any kind of positioning at all, and an <h1> tage is the only element. The stylesheet in it's entirety is: * { margin: 0; padding: 0; }body { font-family: tahoma; color: #FFFFFF; background-color: #4B4B4B; background-repeat: no-repeat; background-position: center 0; } the html then calls up the relevant background image and I've also tried making it the background of a <div> and including the content (in this case just an h1 heading) inside the div And I'm still experiencing the same issue: the <h1> is not staying snapped to the background image when the window is resized. Again, it is the background image that is moving to keep a common distance from the left and right of the windows, and this is making the content appear to shift. So, however battered that stylesheet may be, it's not the issue. Edited April 3, 2014 by Surefire Mechanical Link to comment Share on other sites More sharing options...
davej Posted April 3, 2014 Share Posted April 3, 2014 The only problem is that the table needs to be centered. I'm not sure why is isn't centering. Try adding... table{margin:0 auto;} Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 hmmmm...nope. As soon as the window is resized to a width that's smaller than the BG, the content still displaces Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2014 Share Posted April 3, 2014 Remove the background image from body this will always cause the image to move depending on screen width, place a div around table of same width, place the background image to this, and center this div with margin: 0 auto; this width will be constant so bg image wo't reposition itself anymore. Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 You nailed it. I had tried every thing you said already except setting the div margin to 0 auto.....maybe for my own sanity you can explain how that made the difference. Either way, thanks man! You rock! Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2014 Share Posted April 3, 2014 (edited) also your doctype should be <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> its showing as being in Quirks mode and not Standards Compliant Mode, which means IE browser version lower than 10 will fail to display correctly. Edited April 3, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2014 Share Posted April 3, 2014 The body is always the total width of browser screen available to it, so the image adjusts and centres itself as the body becomes smaller or larger, by placing it in a fixed width container the resizing of body/browser window will no longer affect the position of background image in its fixed width container. Link to comment Share on other sites More sharing options...
Surefire Mechanical Posted April 3, 2014 Author Share Posted April 3, 2014 I will change the doctype as well.....I had just gotten that information off a website today and copied and pasted it in...must've been old info You've been a huge help! Thanks again! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now