|
CSS - Footer Positioned To Far Down Page In Ie
Hey all,
I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. Similar TutorialsI cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help? html, body {height:100%;} #container { width: 900px; position: absolute; top: 0px; left: 50%; margin-left: -450px; } #header { width: 900px; height: 105px; position: absolute; left:0; top: 0; } #main { position: absolute; left:0; top: 105px; } #footer { position:absolute; bottom:0; border: 1px solid yellow; } Hi, I have to managed site looking like this http://www.kuczyn.com/ using css. Now, I have only one problem left that I cant fix by myself - the ^&%$# footer positioning. It seems to work ok in IE (staying always at the bottom of the page, and if the content is stretching the page, then staying at the bottom of it) but it fails to work in Firefox win 1.06 and Opera win 8. Please, help me if you can, because Im going to crash my head on the wall with this bug Thanks for any advice! Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - Hello, I have been working on this for over 2 days and learning plenty in the process. Yet, I have come to a roadblock. I need the footer, which is outside the main container, to extend to the height of the page. The problem is that the page height changes with each page, and will change in the future, as the info for the pages will be pulled from a database. Please have a look at the footer on my site and tell me what might be a good solution. Here's the site: http://www.caillouette.com/FriendsCSS2/index.php thanks -Sean hey all, i have a strange problem... When the page opens the footer appears on top of the page content but if i refresh the page it goes to the bottom as expected?? really wierd can someone please help me with this? here is the page lin to see what i mean page with the problem and here is a link to me css css page Any ideas would be great. I am using firefox Thanks RF Greetings, My example page is located here. As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher. I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements? Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page. Thanks in advance for any assistance! Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me. I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself. Please assist o smart computer gods! Hi I want to make a three column page. I will divide this page into three portions later with php. header, footer and mainbody and will use them as includes in a single page. for now I am making the home page. I want the footer area (div) to push downward automatically according to the contents of the main area. But it is not working. I placed <br> to do it manually but it is not the desired way. here is my CSS code Code: /* CSS Document */
div.head {
width: 1000px;
text-align: center;
}
div.container {
width: 1000px;
border: 0px;
position: absolute;
left: 11%;
}
div.lef {
width: 150px;
float:left;
/* border: 1px solid green;*/
}
div.cen {
width: 500px;
float:left;
/* border: 1px solid red; */
text-align: left;
}
div.rig {
width: 150px;
float:left;
/*border: 1px solid black;*/
}
div.bot {
width: 800px;
height: 30px;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #996633;
color: white;
position: absolute;
left: 10%;
}
p.bodytxt {
font-size: 12px;
font-family: verdana;
color: black;
line-height: 150%;
margin: 2px 2px 2px 2px;
}
and here is the html code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styling.css" />
</head>
<body>
<div class="head"> <img class="head" src="/images/header.gif">
</div>
<div class="container">
<div class="lef">left column text goes here</div>
<div class="cen">
<p class="bodytxt"> center column text goes hereasdasdasd as das d asd as
das d as das d asdasdas d asd as da sd as da sd sad asdasdas dasdasdasd
as das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
</p>
</div>
<div class="rig">right column text goes here</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="bot">footer</div>
</body>
</html>
thank you I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css. I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues. Here is the site(im new, i cant post URLs): http://aeroprepare.com You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS. here is my CSS: Code: /*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: baseline;
}ul {list-style: none;}table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
font-size:12px;
background-color:#fff;
}
#hm_background, #background {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-340px;
}
#hm_background {
background-repeat:repeat-x;
background-position:top;
}
#background {
background-repeat:repeat-x;
background-position:top;
}
.clear {
clear:both;
}
.clear-border {
margin:15px 0 15px 0;
clear:both;
border:1px solid #dbdbdb;
}
#wrapper {
margin:0 auto;
width:960px;
}
#logo {
float:left;
margin:27px 0 0 0;
width:284px;
height:67px;
}
#logo_home {
float:left;
margin:32px 0 0 45px;
width:212px;
height:52px;
}
/*** navigation ***************************************************************/
#nav_wrap {
position:relative;
margin:25px 0 0 460px;
padding:12px 0 0 15px;
background-repeat:no-repeat;
width:464px;
height:52px;
z-index:99;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav li a {
position: relative;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 37px;
text-decoration: none;
color: #fff;
font-size:12px;
z-index: 2;
}
#nav li a span {
display: block;
line-height: 21px;
padding: 3px 0 5px 20px;
color: #fff;
}
#nav_hover {
position: absolute;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 28px;
z-index: 1;
}
#nav_hover span {
display: block;
padding: 3px 0 5px 20px;
line-height: 21px;
height: 28px;
z-index: 1;
}
/*** Dropdown ***/
#nav ul {
position:absolute;
display:none;
padding:0 0 12px 0;
width:142px;
top:48px;
list-style-type:none;
z-index:99;
}
#nav li ul li {
margin:0;
padding:0;
}
#nav li ul a, #nav li ul a:visited {
float:left;
padding:4px 0 0 12px;
width:130px;
height:20px;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:142px;
margin:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*** footer *******************************************************************/
#footer_wrap, .push {
height: 360px;
clear: both;
}
#footer_wrap {
background-color:#e5e5e5; /*e5e5e5*/
border-top:1px solid #B3BCBF;
}
#footer {
margin:0 auto;
padding:12px 0 0 40px;
width:920px;
}
#footer a {
text-decoration:none;
}
.foot_clm_block {
float:left;
margin:25px 15px 15px 0;
width:165px;
}
.foot_clm_heading {
margin:0 0 5px 0;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.foot_clm_block ul {
margin:0;
padding:0;
list-style-type:none;
}
.foot_clm_block ul li {
color:#7F7F7F;
}
.foot_clm_block ul li a {
display:block;
padding:5px 0 0 5px;
height:20px;
color:#fff;
border-bottom:1px solid #CDCDCF;
font-size:12px;
}
.foot_clm_block ul li a:hover {
color:#4E4E4E;
}
#search_form_footer {
margin:5px 0 10px 1px;
height:24px;
border:1px solid #fff;
background-color:#fff;
}
#search_footer {
float:left;
padding:3px;
width:120px;
border:none;
}
#social_icons {
margin:5px 0 0 6px;
}
#social_icons a {
margin:0 4px 0 0;
}
#copyright_wrap {
border-top:1px solid #f1f1f1;
height:40px;
}
#copyright_txt {
margin:0 auto;
margin-top:10px;
width:880px;
color:#fff;
font-size:11px;
}
#copyright_txt a {
color:#fff;
font-size:11px;
}
/*** home page ****************************************************************/
#hm_header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#slider {
margin:0 0 0 23px;
padding:10px 0 0 33px;
background-repeat:no-repeat;
width:881px;
height:298px;
}
#slider_imgs img {
display:none;
}
#news {
margin:15px 0 10px 25px;
background-image:url(../images/news_back.jpg);
background-repeat:no-repeat;
width:911px;
height:65px;
overflow:auto; /* fixes margin collapsing */
}
#news_icon {
float:left;
margin:17px 0 0 17px;
background-image:url(../images/airplaneminilogo.png);
background-repeat:no-repeat;
width:55px;
height:41px;
}
#news_text {
margin:20px 0 0 15px;
float:left;
font-size:20px;
text-align:left;
width:800px;
}
#news_text ul {
margin:0;
padding:0;
list-style-type:none;
}
#news_text a {
text-decoration:none;
}
#three_columns {
margin:0 0 0 25px;
background-image:url(../images/3column_back.jpg);
background-repeat:no-repeat;
width:910px;
}
.three_clm_block {
float:left;
margin:25px 0 45px 0;
padding:0 25px;
width:250px;
height:200px;
background-image:url(../images/3column_border.jpg);
background-repeat:no-repeat;
background-position:top left;
}
.three_clm_circle {
float:left;
padding:6px 0 0 0;
width:32px;
height:26px;
background-repeat:no-repeat;
background-position:top left;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
.three_clm_title a {
float:left;
padding:5px 0 0 8px;
font-size:20px;
text-decoration:none;
}
.three_clm_text {
padding-top:7px;
clear:both;
line-height:19px;
}
/*** portfolio ****************************************************************/
#port_title h1 {
margin:15px 0;
font-size:34px;
font-weight:normal;
}
#port_wrap {
padding:32px 0 0 0;
}
.port_block {
float:left;
margin:0 22px 22px 0;
padding:7px;
background-color:#d6d9da;
border:1px solid #a7a9a9;
width:426px;
height:346px;
}
.port_img {
position: relative;
border:1px solid #fff;
background-color:#fff;
width:425px;
height:324px;
}
.port_txt {
position: absolute;
top: 110px;
left: 0;
padding:2px 0 0 10px;
width:240px;
height:18px;
background-color:#fff;
}
.port_mag_img {
position: absolute;
top: 10px;
left: 81px;
}
.port_txt a {
font-weight:bold;
text-decoration:none;
}
.port_img img {
border:none;
}
/*** blog / static page *******************************************************/
#header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#breadcrumb {
padding:15px 0 0 0;
height:25px;
color:#fff;
font-weight:bold;
}
#breadcrumb a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*** sidebar ***/
#sidebar {
float:left;
margin:25px 0 0 0;
width:220px;
}
.sidebar_block {
margin:0 0 35px 0;
}
.sidebar_heading {
font-size:18px;
border-bottom:5px solid #d6d9da;
color:#23353e;
}
#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}
#sidebar ul li a {
display:block;
padding:4px 0 0 30px;
height:21px;
border-bottom:1px solid #d6d9da;
text-decoration:none;
color:#B3BCBF;
background-image:url(../images/bullet_arrow.jpg);
background-repeat:no-repeat;
}
#sidebar ul li ul li a {
padding:4px 0 0 54px;
background-image:url(../images/bullet_arrow_sub.jpg);
background-repeat:no-repeat;
}
#sidebar a:hover {
color:#959D9F;
}
#search_form {
margin:5px 0 0 1px;
width:216px;
height:24px;
border:1px solid #d6d9da;
background-color:#fff;
}
#search {
float:left;
padding:3px;
width:180px;
border:none;
}
.search_btn {
float:right;
margin:1px 0 0 0;
background-image:url(../images/search_icon.jpg);
background-repeat:no-repeat;
background-position:center;
border:none;
background-color:transparent;
cursor:pointer;
width:25px;
height:22px;
}
/*** content ***/
#content {
float:left;
margin:25px 0 0 55px;
width:645px;
}
#contentblog {
float:left;
margin:25px 0 0 55px;
width:100%;
}
#content_full {
float:left;
margin:25px 0 0 0;
}
.post_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom:1px solid #d6d9da;
}
#page_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
#page_title h1 {
margin:0 0 5px 0;
padding:0;
font-size:34px;
font-weight:normal;
}
#content h1 a {
font-size:34px;
font-weight:normal;
}
.post_meta {
height:20px;
font-weight:bold;
color:#929393;
}
.post_meta a {
text-decoration:none;
font-weight:bold;
color:#929393;
}
.post_img {
padding:7px 0;
margin:10px 0;
border-top:1px solid #d6d9da;
border-bottom:1px solid #d6d9da;
}
.post_txt {
line-height:20px;
color:#23353e;
}
.post_txt img {
padding:3px;
border:1px solid #b3b3b3;
}
.onethird {
padding: 0 0 0 15px;
float:left;
width:30%;
}
.onehalf {
padding: 0 0 0 15px;
float:left;
width:47%;
}
.twothirds {
padding: 0 0 0 15px;
float:left;
width:64%;
}
.post_readmore {
margin:5px 0 0 0;
}
.post_readmore a {
text-decoration:none;
font-weight:bold;
color:#23353e;
}
#pagination {
margin:15px 0;
height:32px;
}
#pagination ul {
margin:0;
padding:0;
list-style-type:none;
}
#pagination ul li { float:left;}
#pagination ul li a {
float:left;
margin:0 5px 0 0;
padding:8px 0;
width:31px;
height:23px;
color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(../images/pagination.jpg);
background-repeat:no-repeat;
}
#pagination ul li a.active, #pagination ul li a:hover {
background-image:url(../images/pagination_active.jpg);
background-repeat:no-repeat;
}
/*** comments *****************************************************************/
#comments {
margin:0 0 40px 0;
}
.comm_block {
padding:25px 0 25px 0;
border-bottom:1px solid #e7e7e7;
}
.comm_avatar {
float:left;
padding:3px;
width:50px;
height:50px;
background-color:#fff;
border:1px solid #e7e7e7;
}
.comm_meta {
float:left;
margin: 0 0 0 20px;
width:550px;
}
.comm_author {
font-size:16px;
}
.comm_text {
float:left;
margin: 0 0 0 20px;
width:564px;
line-height:18px;
}
.comm_even {
background-color:#fff;
}
#comm_form {
margin:20px 0;
}
/*** contact ******************************************************************/
#contact_txt {}
#google_map {
margin:5px 0;
border:1px solid #b3b3b3;
}
#contact_form {
margin:20px 0;
}
.err {
color:#BF2323;
}
/*** forms ********************************************************************/
.form_tb {
padding:3px;
width:400px;
height:18px;
border:1px solid #b3b3b3;
color:#254A59;
}
.form_ta {
padding:3px;
width:639px;
height:150px;
border:1px solid #b3b3b3;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#254A59;
}
.form_btn {
padding:5px 7px;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#fff;
border:none;
background-color:#fff;
cursor:pointer;
background-repeat:no-repeat;
width:114px;
height:33px;
}
/*** global *******************************************************************/
ul {
padding:0 0 0 30px;
list-style-type:square;
}
ol {
padding:0 0 0 30px;
}
a {
color:#03181F;
}
p {
margin:0 0 10px 0;
}
h1 {
margin:0 0 15px 0;
font-size:34px;
font-weight:normal;
}
h1 a {
text-decoration:none;
}
h2 {
margin:0 0 7px 0;
font-size:24px;
font-weight:normal;
}
h3 {
margin:0 0 5px 0;
font-size:18px;
font-weight:normal;
}
h4 {
margin:0 0 5px 0;
font-size:16px;
font-weight:bold;
}
h5 {
margin:0 0 3px 0;
font-size:14px;
font-weight:bold;
}
blockquote {
margin:20px 0 20px 30px;
padding:0 10px;
border-left:5px solid #dbdbdb;
}
strong {
font-weight:bold;
}
.hidden {
display:none;
}
.noborder {
border:none;
}
.noimage {
background-image:none;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
view page source to see the home page. I dont have the footer in an incorrect div (that i can see) Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections... If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer.... PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant. Hi again, i've built an image gallery using an unordered list and php to grab 'em from the database. when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine. same thing happens when you click to enlarge it. Here's the page Here's the CSS; Code:
/* SHOWCASE STYLE - firefox */
html>body ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:760px;
}
html>body li.showcase {
margin-top:5px;
margin-left:10px;
float:left;
width:180px;
}
/* SHOWCASE STYLE - IE */
* html ul.showcase {
margin:5px 1px;
margin:auto;
list-style: none;
width:750px;
}
* html li.showcase {
margin-top:5px;
margin-left:8px;
float:left;
width:179px;
}
img.showcase {
border:1px solid #CCCCCC;
}
i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh. thanks! |
|||||||