Posted June 5, 2011 So I recently started learning HTML and CSS from a book I got. And I decided to take what I learnt and put it into action for a website, and my friend gave me the task of creating a website for our alliance in Ogame. After a while it was finished but I seem to have run into a problem that I can't understand why it is happening. The website is: galacticfederation.netii.net/default.html If you need to look at the CSS file or anything else, it's in the directory, galacticfederation.netii.net. Well if you go on the homepage, everything is great and as I want it to be. But if you go to the members area or the ranks area, the footer is not at the bottom of the page. If you inspect element with Chrome, the gap at the bottom is not even in the <html> tag. I don't know why it's there. It disappears if the content goes about 550px below the sidebar, but I still don't understand why it happens. I can fix it somewhat by making the content as big as the gap but I just want to get rid of the gap. Can anyone help? Share this post Link to post Share on other sites
Posted June 5, 2011 I just checked. It seems your host has temporally blocked access to the website while they check what is there. Share this post Link to post Share on other sites
Posted June 5, 2011 Yeah, I saw that. Some sort of maintenance that is inconveniently happening now that I need help. Should be back soon. It's back up now. I've realised it's a Chrome specific problem as it appears perfectly on Firefox 4 and IE9. Share this post Link to post Share on other sites
Posted June 6, 2011 OK. You need some extra css. In it add the following: .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; .footer, .push { height: 4em; } Then put the following in <div class="wrapper"> --- <div class="push"></div> </div> The --- is all the content in the <body></body> tags except the footer (which goes below the </div>). Share this post Link to post Share on other sites
Posted June 6, 2011 (edited) OK. You need some extra css. In it add the following: .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; .footer, .push { height: 4em; } Then put the following in <div class="wrapper"> --- <div class="push"></div> </div> The --- is all the content in the <body></body> tags except the footer (which goes below the </div>). The first </div> or the second </div>? I put it below the second </div> yet the problem persists. Edited June 6, 2011 by Diageo Share this post Link to post Share on other sites
Posted June 6, 2011 I know I'm perhaps not being helpful enough but meh: http://www.cssstickyfooter.com/ Share this post Link to post Share on other sites
Posted June 6, 2011 I tried that one, but there must be some conflicting code I'm not able to understand that made 2 scrollbars on the right. Share this post Link to post Share on other sites
Posted June 6, 2011 (edited) It's happens on Firefox 4 as well btw. It happens because the members page is shorter so it's not hitting the max height of your browser (also keep in mind not everyone has the same size monitor) which is why it's not sitting at the bottom of the page. You can probably cheat a bit and use min-height on your content divs, it won't work with IE6 mind, otherwise you'll want to find a sticky footer solution that you can get to work. I'm sure there's a javascript solution that might work better. Also, your code doesn't quite validate. Move the a tag inside the div and set the a tag to display: block; and set the height to same as your navigation image. Not sure if you have control over that script. Not massively important but thought you might like to know. Edited June 6, 2011 by Ike Share this post Link to post Share on other sites
Posted June 6, 2011 I might just get rid of the footer altogether, would be easier. :p I'll change the <a> into the <div>. Thanks for your help. I don't know why the page goes longer than the footer for me, especially since my screen isn't bigger than the page. But thanks everybody. Looks like everything is a lot more complicated than I thought it would be. Share this post Link to post Share on other sites
Posted June 6, 2011 I have been thinking on it but I will make sure my answer is correct first then try to help again :p But the answer lies in setting its position to be absolute, or fixed(maybe) Share this post Link to post Share on other sites
Posted June 6, 2011 Set it's position to be absolute and however many pixels you want then? Since absolute is relative to the parent(which would be the body). Doesn't work, it's fixed at the same position all the time so if the content's height is greater than whatever you set the footers top value then the footer will be floating in front of it, if you get what I mean. In other words it won't always be below the content. Also again, it won't be the same for everyone since other people's monitors are different sizes. Welcome to the land of web developers Share this post Link to post Share on other sites
Posted June 6, 2011 (edited) Doesn't work, it's fixed at the same position all the time so if the content's height is greater than whatever you set the footers top value then the footer will be floating in front of it, if you get what I mean. In other words it won't always be below the content. Also again, it won't be the same for everyone since other people's monitors are different sizes. Welcome to the land of web developers Yeah The page will just scroll further down though, depending on the amount of content. You could have it 50 px below the content if there is a lot, then with others it might be 200 below, which would requite more scrolling but would make each page the same size regardless of content and it doesn't look too off. Still, javascript might suit it better as you said, and I am no expert in web development :p ie it would be the same distance below the list of links on the right on all pages. Ok so my suggestion is to go into the footer in the css and add position: relative; bottom: -200px; Edited June 6, 2011 by heroicjanitor Automerged Doublepost Share this post Link to post Share on other sites
Posted June 10, 2011 (edited) Damn. Finally.. I think I nailed it. Sorry for the late response, I was at it all night the day before yesterday, but I couldn't figure it out (I even went hardcore and referenced the W3 technical specification.. Box models, yay!). Then E3 happened, and yesterday I had other stuff on my mind. I was back at it this night though, and I think I got it. The thing is, the sticky footer Cube and Ten10 posted works fine, but it isn't catered to your code. It's hard implementing stuff in existing code like that. You can't simply copy/paste. Also, you probably used a template and/or IDE did you? This isn't the best way to learn.. Notepad is far more useful in the beginning. Anyway, your problems: 1] The major gap. It is gone. Did you do anything major to your code? I believe you didn't. You already mentioned it was Chrome specific.. And I tested this, and indeed, the gap didn't show up in every major other browser, including future versions of Chrome. So I think yesterday's update actually removed the bug, and the gap with it. 2] However, this bug accidentally led to a problem which wasn't technically visible to you, you also use the 1920*1080 resolution right? You want your footer at the bottom of the screen at all times, but in this resolution, this is always the case, because of that ridiculously huge picture at the top. But for those people with bigger screens, and when you don't have enough content on your screen, the footer won't be at the very bottom, but just at the end of your content. It is so strange that this is a huge problem in CSS, where it would be so easy to solve in a humble table layout. Anyway.. I hope I have the right code now (I've tried various stuff), but you need to follow these steps exactly. Anything you need to add or change is in red or orange, the rest is for reference, so you know where to add it. In your CSS file: html, body { margin: 0; padding: 0; background: url(windows.jpg); background-color: #010f3c; background-repeat: repeat-y; background-attachment: fixed; font-family: corbel, calibri, arial, verdana, sans-serif; [color="Red"]height: 100% ;[/color] [color="RoyalBlue"]/* This is a bit too technical to explain in a comment, but basically, you specify here that the body needs to occupy 100% of the screen. Seems a strange thing to specify, but it's technically needed because some other elements need this as a frame of reference later on. */[/color] } #main { margin: 0 auto [color="Orange"]-16px[/color]; width: 1220px; text-align: center; [color="RoyalBlue"]/* the negative margin is too make space for the footer (or the push to be precise), otherwise it will drop just below the screen */[/color] } #banner { width: 1000px; height: 564px; [color="Plum"]/* height: 50px ; */[/color] [color="RoyalBlue"]/* You already figured it out, but this is just for testing purposes, you can comment out the real height, and delete the comment marks on the 50px height, to see if the sticky footer works for you */[/color] float: center; [color="RoyalBlue"]/* By the way, this doesn't do anything. */[/color] } [color="Red"].wrapper { min-height: 100%; [color="RoyalBlue"]/* This tells the browser that the element with this class, your main div in this case, is at least as high as the (available!) screen. */[/color] height: auto !important; [color="RoyalBlue"]/* I dunno, what I did was copy the sticky footer Cube and Ten10 linked, and adjusted it to your code, but I dunno what this does exactly, except that it's there for compatibility reasons. */[/color] height: 100%; [color="RoyalBlue"]/* Same as above. These 2 can be deleted, and you shouldn't notice a difference in up-to-date browsers. */[/color] margin: 0 auto -16px; [color="RoyalBlue"]/* This is one of the things that had to be adjusted for your code.. Copied from the sticky footer, it places the negative margin here, but you already specified a margin within the #main selector, which overrides what's specified here. So I moved the negative margin to there. This last bit doesn't have a function anymore because it's specified above, so you can actually delete this. */[/color] }[/color] [color="Red"].push { height: [color="Orange"]16px[/color]; [color="RoyalBlue"]/* This is a bit of hidden space that makes sure the footer doesn't overlap with your content. Sort of like a placeoholder.*/[/color] }[/color] #footer { [color="Red"]height: [color="Orange"]16px[/color] ;[/color] [color="RoyalBlue"]/* Simply your preferred height for the footer. */[/color] width: 100%; clear: both; background-color: #262626; text-align: center; color: #808080; font-size: 0.7em ; [color="Red"]white-space: nowrap ;[/color] [color="RoyalBlue"]/* I added this bit to make sure the height stays the same even when someone resizes the window or views your site on small screens.. Variable heights will mess your footer up. */[/color] } The 3 values I marked in orange all 3 need to be the same. This is why I don't particularly like this solution, I would like the height to be variable, but you need to specify it for this solution, and in 3 places at the same time. I chose 16px, but you can change it, but if you do do it in pixel units. I came across another problem while trying to find the solution, and it took a while before I figured out it was something not directly related to it.. It seems that for some reason, if you specify the font-size in em units, this will affect the height of the element containing the text, if you have specified this in em units as well (and I assume with a different value). This is currently the case on your site. I'll have to research this, but for now it seems to work. I'll come back to the pinkish addition. In your HTML file: <div id="main" [color="Red"]class="wrapper"[/color]> [color="RoyalBlue"]<!-- Simply connecting your wrapper CSS to the main div -->[/color] [..] <div id="bodybottom"></div> [color="Red"]<div class="push"></div>[/color] [color="RoyalBlue"]<!-- This actually makes the hidden div that will “push†your footer -->[/color] </div> You can use the pink addition in the CSS file to test your site. Again, I thought you also used the full HD resolution (like me), so you won't be able to see it function, if you do use a larger screen, it should be visible right away. If not, you can comment out the real height of your banner, and use the 50px height to test if your footer sticks at the (exact) bottom. Let me know if it works. I assume it does.. I mean, I'm no expert myself, so this proved to be a good exercise, but I really, really don't want to see your footer again . Edited June 10, 2011 by Sméagol Share this post Link to post Share on other sites
Posted June 10, 2011 Damn, thank you so much. As you have said, it does appear to be gone. I don't know why, I guess Chrome fixed it. My screen is actually 1366x768, which is a weird one, but I guess it doesn't matter. I learnt my code from a book, it was one of those for dummies ones, so I thought it would be good for a beginner like me. I'm eager to test out this code, but I'm not sure what you mean by the pink height, I thought it was a stab at what you thought a banner height should be. This is all just test and educational work, so I'm not too bothered about having the most amazing site out there, just to learn how to code. Also, could you explain a bit what your entries mean and what they do, I like to understand exactly what my code does before using it. Don't feel you have to though. I will put it in and test it later today as right now it is very late and I don't want to get caught up in bug solving, etc. But once again, thank you very much. EDIT: Oh I realise what you mean, with a banner of 50 height, I can check if it sticks to the bottom even though the page doesn't reach that far. I'll make sure to do that, thanks. Share this post Link to post Share on other sites
Posted June 10, 2011 Yup, I was ready to expain everything if necessary, but at the time, I just wanted to get the code and the post done, and be done with it . I've added some explanation in comments in the original post. If you need to know more, just ask. Share this post Link to post Share on other sites
Posted June 10, 2011 Trying it out now. Why do you really not want to see my footer again? And thank you so much for the explanations. Share this post Link to post Share on other sites
Posted June 10, 2011 I've seen it enough for a while . Share this post Link to post Share on other sites
Posted June 10, 2011 Oh my god, it works. You are a wonderful person you. Share this post Link to post Share on other sites
