I had the same issue at the bottom, but this resolved it White gap at the bottom of web page
I tried doing the same thing for the right but nothing happens.
It seems to only happen at a certain window width.
The Problem is width of your form element(width: 48.821174201%;).
Solutions:
#plans .affiliateSection form
{
background-color: red;
/* Add width:auto;*/
width: auto;
}
OR
#plans .affiliateSection
{
overflow:hidden;
}
Jsfiddle
There is a fair amount of bad HTML markup on this page. I would start by fixing the mismatched tags. View source in FireFox and you'll see that it will light up all of the errors in red text. You can hover over the errors and see what the problem is.
After you've fixed the HTML markup. You can look into what is causing the white gap to the right of your page. It is due to several elements on the page that are too wide, or have too much margin to the right of them. Use your browsers inspector to find and fix these elements one at a time.
Related
There is a gap or blank space at the right side of my web page and I cannot manage to remove it. I don't know why it appears, I have look on all the elements of the page but nothing seems to be occupying that space.
You can go to the page so you can see what I mean, and also you can see all the source code: www.iot3k.com
The following problem can be overcome by doing:-
body {
width: 100%;
overflow-x: hidden;
}
Doing this you will hide the excess content along the x-axis.
Hope this helps you.
In general when ever you have similar problem you just have to click f12 and go to mobile view or what ever view then you just have to click on the mouse within border icon then you just have to hover mouse on your page and it will show you what is making the problem.
in your case :
you have to resize the images .
body{
overflow-x:hidden;
}
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
Whenever I open my website through a mobile device I notice a white area to its right (which can be seen by scrolling horizontally). I've been trying to figure out what's causing it for hours to no avail.
i tried in css setting my body tag like the following, but the white space is always there,
body {
margin:0;
padding:0;
}
How can I remove this white area?
thank you
Well Your header has rule for min-width.
#header{min-width:688px}
Try removing it, or making it 0;
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
Ok, I hope this isn't a simple oversight but I have been working on this for hours!
I have a fairly complex HTML / CSS structure on a page I'm working with. I have text at the very bottom of the page that is in a div with a bottom margin of 10px;. That div is in another div with a bottom margin of 10px;.That div is in other divs on up the chain until <body>.
For some reason the text butts right up against the bottom of the div it is inside. I have created a minimalist repro for people to look at. It does reproduce the problem, I just hope I haven't removed any other issues that are contributory to the issue.
I did get it working in the latest chrome at one point with a height: 100%; somewhere in there (I don't remember where now) but it didn't fix the problem in firefox and ie. Both of those browsers had bizarre behavior with that css, they initially displayed with the correct bottom margin size but instantly jumped back down so that the text had no bottom margin again. It was like a little blip.
Oh, also in my repro html ie isn't displaying anything centered (at least ie9). I'm hoping that won't be a problem. I can certainly fix that issue easily enough myself.
In chrome, if you inspect element it highlights the text div in blue and the blue bounding box shows that the div extends beyond where it is currently being displayed.
Here is the minimalist example: http://www.del337ed.com/repro.html
I appreciate everyone's input / help.
Add overflow: hidden to #SubmissionDetails to fix the margin problem by preventing the behaviour of collapsing margins on that div.
Add a doctype as the very first line to escape Quirks Mode and fix your page in Internet Explorer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(You could also use the much shorter <!DOCTYPE html>, I just stuck with what you had)
Making this change will also improve things in other browsers (that is, it will improve the consistency).
In your example, the div which contains the markup for the thoughts - which currently has no class assiciated with it add the following:
height: auto; overflow: hidden;
Use padding instead. The margin is there, it's just that margin does not fill in the background (which is why it looks like there is no separation.) It's there, it's just not visible.
element.style {
padding-bottom: 10px; /* change the margin property to padding */
font-size: .9em;
font-style: italic;
}