Hi this is my first time on this page.
Lets get straight to it, I have a website http://harrimanpcrepair.com/index.php and when you look at the footer with something like firebug you can see the div footer itself not the children doesn't show up specifically cause it has no height. Also the entire footer area including it's three children aren't part of my page div. Is there a way to fix this without hacks or anything please. last time I used overflow to fix this it caused some issues on my contact page. I've been looking and see all hacks to fix this I'm really not into hacking to get what I want but rather doing it how it's meant to be done with no hidden drawbacks that sneak up on you.
<div id="footer">
<div id="footerLeft"> </div>
<div id="footerMiddle">Designed by Shawn Harriman</div>
<div id="footerRight"> </div>
</div>
I have though now decided to just force a height not realizing that it works if I do that though I hate knowing that the size doesn't affect the parent but I dont' really need it to due to the fact I don't like double lined footers. it's rare I'll ever have one so the way I have it now should work for now. Would like to hear things people have to say though and other solutions please I am still looking to fix this with better means
EDIT: I didn't feel CSS in this was very neccessary but they are floating divs within footer. They all float left while they footer itself is clear: both. Having 3 does serve a later purpose.
Try the below css for your footer in main.css
#footer {
position:fixed;
text-align:center;
width:100%;
height:20px;
padding:5px;
bottom:0px;
}
Hope this helps
Related
I have been struggling with this problem for a long time now, and although I have found a number of good solutions to parts of my problem, none of them seem to work combined, so I have decided to ask you.
Here is a scrn shot of the website:
http://i.stack.imgur.com/6C0k1.jpg
What I'm hoping to achieve is to have a scroll bar appear on the far right of the page when content overflows the blue container, the div that has all my content in it, not the far right of the div itself, like it would if I set the div to overflow: auto or overflow: scroll.
In other words, I would like the page to scroll, not my div.
The site essentially consist of a body background, a div for the menu and a div for the content. The code is pretty messy, so I have left it out, but if you need it, just leave a comment and I will add it right away.
Everything is supposed to be fixed as in remain like it is on the scrn shot, except for the content in the blue container to the right. I initially figured that setting everything except the container to position:fixed would work and trigger a scroll bar to appear for the page that could be used to scroll through the div, but it didn't. This doesn't work though, as any visible overflow in the container just 'leaves' the page; it doesn't trigger a scroll bar.
As I've also pointed out in the scrn shot, the container-div has padding on the top and bottom and is also slightly transparent.
These two features seem to make things even more difficult. The padding, because setting overflow: visual makes content overflow, and thereby be visible, even through padding.
The transparency is an issue, since I can't just cut out the padding and give it a z-index that's higher than the content itself, in order to hide it; it will still be visible through it. The background image is set at a percentage or set to 'cover' (still figuring out which one works best), so cutting out the padding with the segment of the background image it covers, will not work either.
I hope I presented my problem and the issues clearly enough. If you have any questions or any feedback, please leave a comment.
Thank you in advance for any replies,
Magnus
NOTE: This is a repost of an early question that was trashed by someone who didn't bother reading through it properly before rating it down. The question essentially died afterwards. I have tried to make things even more clear this time, so I'm sorry if I repeat myself. This is also the reason why my post is so long this time.
Something like this?
Demo: http://jsfiddle.net/6R7c2/
HTML:
<div id="top">Top</div>
<div id="middle">
<div>Content
</div>
</div>
<div id="bottom">Bottom</div>
CSS:
html,body{
width:100%;
height:100%;
margin:0;
}
#top,#bottom{
height:10%;
background:blue;
color:white;
}
#middle{
height:80%;
overflow:auto;
}
#middle>div{
height:10000px;
border:25px solid red;
}
It can be something like this
see http://jsfiddle.net/QfsvB/
CSS
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
HTML
<div class="scroll">You can use the overflow property when you want to have better control of the layout, the overflow property specifies what to do if the content of an element exceeds the size of the element's box.</div>
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.
The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.
The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.
Every browser shows the same problem, do you have any explanations?
This is the site in question: http://compressmycode.com/
remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px
if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.
EDIT
Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.
The problem comes form your JS. if you disable it, it works perfectly.
More precisely with the facebook button:
div#body-wrapper > div#site-title > div.right > div.fb-root > div
setting this to overflow: hidden, fixes the problem
I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.
My structure of page was:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.
Although i'll share how the problem got fixed.
I gave the
<div class='page'></div>
css:
.page{
overflow: hidden;
}
This fixed the scroll issue for me.
Although the fix was just to find the right parent and give it the above CSS
I still would like to know the root cause for the scroll. Kindly share that knowledge if you have it.
I keep staring with firebug at this page:
http://www.comehike.com/outdoors/parks/park.php?park_id=54603
and I can't figure out why the right side is overlapping with the bottom div. It might be because it is past midnight for me, but could anyone tell what is going wrong there?
Thanks,
Alex
Remove the
height:325px;
in the containing div, that comes after <!-- End of photos from this park -->. Note that it's always a bad idea to manually add style information to HTML, you should rather use classes for that.
Also, some of the syntax looks garbled:
<div width:400px;">
should be:
<div style="width:400px;">
You have a DIV with a height set of 325px;
<div style="height:325px; width:400px;">
<p></p><h2>Hikes Coming Up In The Area</h2><p></p>
.....
Removing the height or setting overflow:hide/scroll in CSS will fix this.
I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:
Go to this site (spanish).
On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.
I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!
I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:
#prevparties_middlerow
{
float:left;
width:150px;
}
one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:
<div id="prevparties_left"/>
<div id="prevparties_contentBox">
content
</div>
<div id="prevparties_right" class="boxmiddle"/>
you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:
<div id="prevparties_contentWrap">
<div id="prevparties_contentBox">
content
</div>
</div>
the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D
anyways, hope this helps.
Compare these 3 URLs (look at the top navigation bar in each case):
http://fast.kirkdesigns.co.uk/blog
as above but with the url fragment #navigation
as above but with the url fragment #node-2655
Note, that the only difference is the URL fragment on the end.
The first two pages display absolutely fine (in Firefox at least). It's the third one where the problem lies. The fragment #node-2655 pushes the top navbar off the top of the screen. When you then scroll back up to the top of the page, the navbar has been cut in half. This happens when using any URL fragment that causes the navbar to be out of the initial viewport when the page is first loaded.
So, how can using a url fragment affect the css layout like this?!
THE SOLUTION:
as suggested below, removing the overflow: hidden on the container element that held the navbar fixed the problem. I'd love to understand why though!
Remove the overflow:hidden on #main in css_75afd7072eaf4096aaebf60674218e31.css
I'd say it's a rendering bug in FireFox as it's fine in Opera. There shouldn't be anyway an anchor would change the CSS like you say (unless you are using jQuery or something).
I am having this problem too, and think I can see what is happening.
The "column" block with the massive (5678 pixel) margin and padding makes that block very tall. In browsers other than Firefox, the positive and negative values cancel each other out, but FF really does make it that tall - kind of.
FF also knows the two cancel each other out, but seems to look at the 5678px padding and decides the column block is poking out the bottom of the #wrapper block. This is overflow - and with overflow set to auto on #wrapper, you see the true size of #wrapper with a scroll-bar down the side.
With overflow set to hidden, FF takes away the scrollbar, but still seems to scroll the contents of #wrapper so that the item the fragment points to is at the top of the page. This is normal behaviour for fragment links in scrollable blocks, but since there is no scrollbar, you cannot scroll the content back down again, hence it looks like the layout has been effected by the fragment.
So in short, I suspect that FF is operating an invisible scrollbar in this example. That could be considered a bug, but it is probably correct behaviour. Being able to scroll the content up and down inside a non-overflowed fixed-sized block using URL fragments, is a technique that can be used effectively to implement image "sliders" that work even in the absence of JavaScript.
Hope that helps. This has been puzzling me for years, and this explanation suddenly struck me out the blue. My current workaround for this is to use jQuery "scroll to" plugin to scroll the whole page down to the fragment, as this seems to prevent the contents of #wrapper from scrolling internally.
You can also take "display: hidden" off #wrapper, but your page then ends up half a mile long.
I'll just point out that there may be some weird inheritance from the 30+ stylesheets linked to in the head. There may not, either, and it's probably a rendering bug (possibly related to :target styling) that Dan suggested. I just felt it worth pointing out that if you've got more than thirty stylesheets, you likely to start seeing some weirdness, whatever else might happens.
The reason is the column with the large padding has expanded it's container, but the expansion is then hidden but overflow:hidden; but with the use of the fragment it is being scrolled into the position of the fragment, effectively chopping off anything above that. You can use javascript and set scrollTop to 0 and it scroll it back to the normal position.
Basically a wierd edge case which browsers do not seem to handle very well.
Sorry this isn't an "answer," tho it is a response to the other comments here. This problem is just flabbergasting. It is very easy to isolate (i.e., has nothing to do with number of stylesheets), and doesn't have a proper "solution," as there is no way to achieve the desired rendering.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
margin: 1em auto;
width: 40em;
}
#wrapper {
overflow: hidden;
position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
float: left;
margin-bottom: -5678px;
padding-bottom: 5678px;
width: 50%;
}
#footer {
background-color: #eee;
padding: 1px;
text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li>Jump to P1</li>
<li>Jump to P2</li>
<li>Jump to P3</li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>
Just as a side-note, the above technique is generally used to provide flexible-width mulit-column layouts. This is probably becoming less important these days as fixed-width layouts are becoming a lot more comment - browsers are able to magnify the web page to see small text, and fixed-width makes it a lot easier to control the typography of a page, e.g. set the width (in ems) to display the ideal nine words per line regardless of what font size and magnification the user chooses.
Sorry if that does not sound like an answer, but it is basically suggesting to discard this old model and consider moving to fixed-width columns (which is a whole new subject).
I was able to solve this with some javascript to scroll the body to the position the overflow hidden element was scrolled to.
setTimeout(() => {
let intendedScroll = document.getElementById("fragmentfix").scrollTop;
document.getElementById("fragmentfix").scrollTop = 0;
window.scrollTo(0, intendedScroll);
}, 0)