Can anybody tell me why am i getting empty space on left and right of html body in this link click here. I am using mozilla firefox. I have even tried reducing width of html tag to 980px. I am getting horizontal scroll bar because of that extra space on left and right. Please help.
The first div under your header div (under <div id="header">) has this inline style
width: 100px;
margin: auto;
height: auto;
border: 0px solid rgb(51, 51, 51);
padding-right: 1160px;
padding-left: 95px;
Look at padding-right. Is that meant to be like that? Removing that gets rid of your horizontal scroll bar. It does nudge your header around a bit, but that may be your culprit. Or you could just do what Spring said, but that's not really clearing the issue as your jus hiding the overflowing elements and not stopping it from overflowing in the first place.
Its quite hard to do much more using Firebug on your site because there is so much going on (you have over 40 scripts loaded!) that the DOM keeps changing. You might wanna clean up some of those scripts and get rid of stuff you don't need, you're adding a lot of unnecessary bloat which will slow down your site, but that's a whole other subject.
you can add to body element this style
body
{
overflow-x: hidden;
}
I tried this style using fierbug and it worked for your page
Related
I have been getting an unknown white-space at the bottom of my Service pages. I'm using column-count: 2; to break the images up between two columns.
Update: This is a Webkit browser problem
The problem is the extra space at the bottom of mainCont, left side column.
If the images all line up flush then there is about a 30px of unneeded white-space. Although if the images do not line up flush then there is about a 50-70px of extra white-space. I have a 10px padding on the main containers but I can't find what is creating the extra spacing.
Here is a JSFIDDLE (remove/show in url to view code) to see what the problem is. Also here is the Live Site so you can see how it affects each one of the service pages.
CSS for main container:
.mainCont {
width: 100%;
background: #f7f7f7;
padding: 10px;
position: relative;
margin-top: 2.5%;
}
Edit
There is about 160px of extra space at the bottom minus 20px(mainCont and gridbox img equals 20px in padding).
I have been making research since ysterday.
If image sizes are equal, no problem on all browsers
If image sizes are different, extra space occurs at the bottom of
the page.
This is the bug of chrome browser. There is something wrong with balancing algorithm. They haven't resolved this issue yet. You can see here
I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?
This is the site:
http://ec2-23-23-22-128.compute-1.amazonaws.com/
And this is what I'm trying to accomplish:
How do I get rid of the extra white space at the bottom of the page?
NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/
It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:
* {
margin: 0px;
}
I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.
Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:
#b-container {
background-color: #F1EFE6;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; // originally this was 0 auto -150px
}
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.
Preface: Sorry if this question should have been posted on a sister-site. There's so many now it's hard to tell what still falls under SO's jurisdiction.
Problem: I'm having a problem with consecutive <div> elements. Sometimes there's a magic padding/margin between them and I cannot figure out why.
IE7 Magic Padding Bug http://img689.imageshack.us/img689/6239/ie7bug.png
As you can see there's a space between my container's header div and the body div. Let me explain how my DOM/CSS is set up:
HTML
<div class="Product-IconView">
<div class="PIV_TopCap"></div>
<div class="PIV_Body">
...
</div>
</div>
A simple container/child div setup, nothing fancy.
CSS
Top Cap:
.PIV_TopCap
{
margin: 0px;
padding: 0px;
height: 10px;
line-height: 1px; /* For IE so the text doesn't make the div higher */
overflow: hidden;
background-repeat: no-repeat;
background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}
Body:
.PIV_Body
{
height: 266px;
padding-left: 10px;
padding-right: 10px;
background-repeat: repeat-y;
background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}
As you can see, pretty simple CSS too, nothing overly fancy. Inside the body is another series of <div> items following the same principle as this div (container div, stacked children). That do not exhibit strange padding like this.
I've used the developer tooling in IE9 (with IE7 standards enabled) to inspect the DOM and see what might be causing this (like a margin pushing up through the top or something)
As you can see here:
Body Highlighted http://img844.imageshack.us/img844/3448/ie7bug01.png
Top Highlighted http://img192.imageshack.us/img192/46/ie7bug02.png
The bounds of the divs are intact and correct.
Conclusion This is a very strange bug, I saw it in an earlier design of mine and wasn't able to figure it out there either. It's really the only IE7 migration issue I've encountered with this project so far. To the best of my knowledge I'm following HTML Standards really close (I know IE tends not to respect them in some cases, but the plan is to do this as right as I can).
Questions for you:
What should I look for that might cause this?
Am I doing something wrong? If so, how can I fix it?
Is there a simpler / better way of going about this?
Is there something obvious I am missing?
Also
If you need clarifications or more information please feel free to leave them in the comments, I will answer them when I see them. (Posting this kinda late on a friday :o).
Found the answer so I will post it here for anyone that lands here looking for help with IE7.
The problem was the font-size of the top div. While I had line-height: 1px; set, the rendering engine still allocated 14px for the 12px font, this invisible allocation/padding/margin/whatever bleeds out through the div even with overflow: hidden or strict size constraints.
Simply making sure both these lines were in my top div (smaller than a line of text):
font-size: 1px;
line-height: 1px;
...will fix the issue.
It seems IE7 does not obey line-height very well.