|
CSS - Huge Space At Bottom Of The Page
I can't seem to work out where the huge space at the bottom of the pages are coming from.
This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? Similar TutorialsHello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there? html page: http://www.iainhamp.com/reality/hyborianwar.html css page:http://www.iainhamp.com/reality/reality_hyborian.css Thanks for any help you can provide. - iain Hello, I am new to the css world, however I have followed some tutorials and became familiar with how to use css. However now I am trying to remove the space on top and bottom of an image, so that I bring two images one on top of each other. Here I placed some sample html code: Code: <html> <head> </head> <body> <div> Some text BEFORE the line. </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> Some text AFTER the line. </div> </body> </html> As you can see in the above code, I have a div tag with the text above, a div tag with an image line, another div tag with an image line, and some text below. However there is a space of around 5px from one line to another. I tried to do the css syntax for the image as follows: Code:
img {
border: 1px solid #000000;
margin-top: 0px;
}
However I can see the border on the image, but the space still remains there. I also tryied to use the padding-top, but it still did not work Is there anyone here that can help me out please? thanks & regards, sim085 Hi! I"m wondering how do I prevent the <div> tag from introducing a line break in the web browser immediately after the closing <div> tag, or </div>.... <span> doesn't do that.... Read the article that <div> is a block elements where <span> is a inline element. So, the block element is what introduce a line break before and after the tag, just like the <p> tag for example... I have 2 div .In top div i have menu.In bottom div i have iframe . i want that top div should take about 20 % space and bottom div take rest of the space .iframe refresh every min and it content changes everytime .Currently scrollbar are appear both horizontally and vertically . How can i remove this scrollbar. I give a sample code <body class="body"> <div class="container"> <div class="top"> some contents here </div> <div class="bottom"> <iframe class="iframeclass></iframe> </div> </div> </body> how i design this classes The content of iframe is dynamic its height change everytime page refresh. Thanks for taking the time to read my question. I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why? In IE you can see the container color (the non Orange colors) but in FF you don't. I've tried a bunch of stuff but can't figure it out. http://stuccotech.bravehost.com/ CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}
.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline;
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}
.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}
.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}
.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}
p.MainText {
color: white;
font-size: 14px;
}
p.MainText:first-line {
text-indent: 5px;
}
.ContentText {
color: white;
font-size: 14px;
}
.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}
.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}
.PortfolioPicture {
width: 414px;
height: 318px;
}
.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}
.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}
.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}
.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}
.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}
.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;
}
.BottomNavHolder {
float: right;
}
.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}
.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}
.ListItemHome {
float: left;
width: 76px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}
.ListItemBuilding {
float: left;
width: 110px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}
.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}
.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}
.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}
a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}
a.BottomNav:visited {
text-decoration: none;
color: gray;
}
a.BottomNav:hover {
text-decoration: underline;
color: white;
}
a.BottomNav:active {
text-decoration: none;
color: white;
}
a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}
a.ContentText:visited {
text-decoration: none;
color: gray;
}
a.ContentText:hover {
text-decoration: underline;
color: white;
}
a.ContentText:active {
text-decoration: none;
color: white;
}
a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:hover {
text-decoration: underline;
color: white;
}
a.ListItemHome:active {
text-decoration: none;
color: white;
}
a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}
a.ListItemBuilding:active {
text-decoration: none;
color: white;
}
Thanks, Brad i have a page where i float a block of text to the right. at the bottom of that text, there is a graphic that creates a footer for that block. in ie, it looks fine. but in firefox it's got 12px of space below the text (as opposed to ABOVE the graphic.) because it looks incorrect in ff and ok in ie, my hunch is that i've done something wrong - since ff is so much more reliable than ie. two last things. when i place a 1px border at the bottom of the text, the bottom margin disappears. but if i use a 0px border, the space remains. also, if i remove the <p> tags from within the text, the problem resolves itself. i do not address p formatting within the css document. this is my html: Code: <div id=outerwrapper> <div class=sidebar> <div id=sidebartext style="background: #acba6e url(images/sidebarbg.gif) 0px 0px repeat-y;"> <img src="images/image1.jpg" align=right> Some text. <p> <em>Some text</em> </div> <div class=sidebarbottom> <img src="images/image2.png"> </div> </div> <div class="maincontent"> <h1 style="text-align: right; line-height:120%; border-right: 30px solid #ffffff;">Some text</h1> More text <p> 123 Main Street, Your City, USA 512.555.1212 </div> </div> and this is my css: Code: html, body{
margin:0;
padding:0;
border:0;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 210%;
color: #847c69;
letter-spacing: .05em;
}
body {
text-align: center;
}
#outerwrapper {
position: relative;
top: 192px;
left: 0px;
margin-left: 45px;
margin-right: 45px;
display: block;
overflow: visible;
zoom: 1;
z-index: 1;
}
.sidebar {
margin-right: -27px;
float: right;
width: 305px;
display: block;
z-index: 1;
}
#sidebartext {
width: 265px;
padding: 0px 20px 0 20px;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 130%;
color: #ffffff;
text-align: left;
letter-spacing: .05em;
z-index: 1;
margin-bottom: 0;
}
.sidebarbottom {
margin-top: 0;
width: 305px;
z-index: 1;
}
.maincontent {
padding: 10px 30px 30px 30px;
background: #ffffff;
text-align: left;
border-right: solid 1px #666688;
border-bottom: solid 1px #666688;
z-index: 1;
color: #6c6b5e;
}
i would appreciate any help you can provide. this has stolen hours from my day. The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout. At the top, I could create the space I want. Margin-bottom: 30px doesn't do the trick. I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful! You can check out the site and css he I can't post the url because I'm a new user Can a mod post my url? EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site. Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often.... ---------- Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve. So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening. Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome: Screenshot The page is just the index page at: GuyMerritt.net The CSS files looks like this: Code: body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial;
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
width: 100%;
max-width: 250px;
height: auto;
}
div#slides {
width: 500px;
height: 280px;
overflow: hidden;
}
div#slides div {
height: 280px;
width: 500px;
font-size: 100px;
line-height: 200px;
text-align: center;
color: #fff;
}
ul#ticker {
height: 1.4em;
overflow: hidden;
border: solid 1px #aaa;
background: #ccc;
}
ul#ticker li {
padding: 0.2em 0;
}
/* @group global */
p#links {
padding-top: 50px;
clear: both;
}
a#avatar {
position: absolute;
bottom: 10px;
right: 10px;
}
a#avatar img {
border: none;
}
h1 {
color: #0094d5;
}
a {
color: #0094d5;
}
a:visited, a:hover {
color: #00577e;
}
.red {
background: #e40053;
}
.blue {
background: #0094d5;
}
.green {
background: #43aa38;
}
/* @end */
At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)? Thanks again, Guy Merritt, Flint, MI Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote: <div id="footer">Data...</div> The declaration of style is Quote: <style type="text/css"> #footer { position: fixed; width: 100%; height: 180px; top: auto; right: 0; bottom: 0; left: 0; } </style> The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page. Help! Is there a way to align something from the bottom of the page? Hi all, I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div. Here is the code I have used: html, body { padding: 0; margin: 0; background-color: #D3D3D3; font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 14px; color: #000000; } #page-container { margin-top: 0; margin-left: auto; margin-right: auto; padding: 0; background-image:url('back.jpg'); background-repeat:repeat-y; text-align: center; width: 800px; } I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?) Any help would be greatly appreciated! Rich I'm using CSS to create a gradient, and all is well except for the bottom of the page: http://www.area51entertainment.co/gradient_problem.png For some reason it's placing a red bar at the bottom of the gradient. Any ideas why? http://www.area51entertainment.co/index.php EDIT: Fixed using the following: Code: background-repeat: no-repeat; background-attachment: fixed; |
|||||||