CSS Footer problem

I am new in designing using css for layout, and I'm having a
problem getting the page content to push the footer down.
Here's the page:
http://wmsgroup.com/client_temp/osps/vsc.html
I have attached the style sheet.
Thanks!

OlDirty wrote:
> I am new in designing using css for layout, and I'm
having a problem getting
> the page content to push the footer down.
> Here's the page:
http://wmsgroup.com/client_temp/osps/vsc.html
> I have attached the style sheet.
>
> Thanks!
I had a quick look - remove the height from your #content_
rule.
HTH
chin chin
Sinclair

Similar Messages

CSS Float Problem

Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
    <div id="toporange_bg">login</div>
</div>
   <div id="wrapperfix_top_grey">
    <div id="top_grey_content_wrapper">
      <div id="big_logo"></div>
      <div id="welcome_user">Welcome "username here"</div>
    </div>
</div>
</div>
    <div id="main_content">
      <p>
        
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
    <div id="footer_container">
      <div id="footer">
        <div id="footer_left">Footer Left</div>
        <div id="footer_centre">Footer Centre</div>
      <div id="footer_right">Footer Right</div></div>
    </div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;

I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm

Footer problem - sanity threatened

I am trying to get the footer to centre on the page. In dreamweaver and in the previews it appears as it should, but as soon as it goes live, it appears squished to the left of the screen in both Chrome and IE.
HTML code:
<div id="footer">
<hr>
© Permanent Delegation of Japan to the OECD | 11, Avenue Hoche 75008 Paris France
</div>
</body>
</html>
CSS:
#footer {
font-family: Arial, Helvetica, sans-serif;
color: #012e8b;
font-size: 12px;
min-height: 100%;
width: 100%;
position: fixed;
margin: 0px auto;
text-align: center;
I have been searching on the internet - tried changing the margins, changing the height, position. Nothing helps!!!
Does anyone have any ideas about what the problem could be???

CSS:
#StickyFooter {
color:#FFF;
border: 2px solid orange;
position:fixed;
/**adjust location**/
right: 0px;
bottom: 0px;
padding: 10px;
margin: 0;
width: 100%;
background: green;
text-align:center;
HTML:

<div id="StickyFooter">
<p>Here is a Sticky Footer</p>
</div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Problems with CSS Footer Div

Problems with CSS
I am building a new page for my company. I am trying to place the Div Footer at the bottom of the screen. I have placed (i believe) the appropriate information for the CSS.
The problem is when i minimize the browser the Footer section never leaves the screen and hovers over the other div tags. When I shrink the browser to its maximum the divs fall on top of each other.
What I would like to know is how to make the Footer div below hide like the other divs but remain at the bottom of the page instead of hovering over the other divs. I have read that I should not apply fixed divs.... is that correct?
I have applied to the current CSS to the below web page: http://trbla.com/sample.html
#rhythm {
width: 607px;
margin-top: 300px;
margin-right: auto;
margin-left: auto;
*img {
border: 0;
#rhythm #goldr {
width: 215px;
float: left;
border: 0;
#rhythm #trbnew {
float: left;
width: 181px;
border: 0;
#rhythm #greyr {
width: 211px;
float: left;
border: 0;
#nav {
margin-top: 200px;
width: 607px;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
clear: both;
#nav #navonewrap {
float: left;
clear: both;
#nav #navwraptwo {
float: left;
width: 175px;
height: 22px;
#nav #navwrapthree {
float: right;
width: 215px;
margin-right: -75px;
#footer {
bottom: 0px;
clear: both;
position: fixed;
width: 100%;
#footer #left_footer {
float: left;
clear: left;
overflow: hidden;
#footer #r_footer {
float: right;
Thanks for anyones help thus far,
Rhythm

I think it's the way I'm doing the conditional statement.
'Went through another knowledge-base article that basically had me
incorporate the conditional attribute into the <xsl:for-each
select= . . .> statement and it appears to be a better way. I
also created a xslt fragment and inserted it into a php page rather
than making the whole thing xslt. I think this helps as well, but
can't absolutely close the book on this until the server is
properly configured to transform xslt in php pages.
Here's the latest
http://cals.arizona.edu/arizonawet/workshops/current_workshops-trial2.php

CSS footer in IE will not go to footer area

I have a 2 column, header, and footer template and am trying
to do CSS
correctly in CS3 & php. Problem is the footer will not to
below the
longer sidebard when viewed in IE. It works just fine in FF
in tht
respect. below is the page. Can someone point me to where I
have goen
wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

<title>Simply Wings Hand Crafted Jewelry and
Gifts</title>


<style type="text/css">

</style>

<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/MainTempVMenu.css"
rel="stylesheet"
type="text/css" />
</head>
<body>
<img src="../Images/logo1s.gif" alt="Simply Wings Logo"
width="100"
height="71" />
<div id="headerRight"><a href="#">About Us
</a>          <a
href="#">Shopping Cart</a></div>
<div id="HeaderTitle"></div>
<div align="center" class="FontWhite"
id="HeaderBottom">What kind of
wings do you like to wear?<br />
Is there someone special in your life that deserves a pair
of wings?
</div>

<div id="SideBarLeft">
<div id="SideBarHeaders">Gifts For</div>
<br />
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Her</a> </li>
<li><a href="#">Him</a></li>
<li><a href="#">Pets</a></li>
</ul><br />
<div id="SideBarHeaders">Gallery of Wings</div>
<br />
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#">Butterflies</a>
</li>
<li><a href="#">Dragon
Flies</a></li>
<li><a href="#">Bees</a> </li>
<li><a href="#">Birds</a></li>
<li><a href="#">Angels</a></li>
<li><a href="#">Faries</a></li>
<li><a href="#">Lady Bugs</a></li>
<li><a href="#">Feathers</a></li>
<li><a href="#">Dragons</a></li>
</ul><br />
<div id="SideBarHeaders">Shop by Type</div>
<br />
<ul id="MenuBar3" class="MenuBarVertical">
<li><a href="#">Earings</a> </li>
<li><a href="#">Necklaces</a></li>
<li><a class="MenuBarItemSubmenu"
href="#">Sets</a>
<ul>
<li><a href="#">Earings &
Necklaces</a> </li>
<li><a href="#">Earrings &
Pendants</a></li>
</ul>
</li>
<li><a href="#">Bracelets</a></li>
<li><a href="#">Pins</a></li>
<li><a href="#">Rings</a></li>
<li><a href="#">Pendants</a></li>
<li><a href="#">Book Marks</a></li>
<li><a href="#">Book Thongs</a></li>
<li><a href="#">Lariats</a></li>
<li><a href="#">Fan Pull</a></li>
<li><a href="#">Purse Pull</a></li>
</ul>
</div>

<div id="EditableContent">
<p>main section</p>
<p> </p>
<p>another line of content that can go on for a long
long long long
loing time until, it reaches the edge and does a soft
return</p>
<br class="clearfloat" />
</div>
<p>

<div id="footer">
<p class="FooterUpper"><a href="#">Gift
Cards</a>      <a
href="#">Customer
Service</a>      <a
href="#">Jewelry
Definitions </a></p>
<p align="center" class="FooterLower"><a
href="#">Privacy
Policy</a>      <a
href="#">Legal
Notices</a>      <a
href="#">Contact
Us</a></p>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Got up this morning fresh and I figured it out. Do a clear
left on the
footer and it does what one would think it would do. A
special thanks
to David Powers for his new book Essential Guide CS3 for the
solution
was there that I had read a few days ago.
www.simplywings.com

CSS Float Problems

I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:

To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>

> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>© Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
>

CSS padding problems

Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}

Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]...
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
>

Help with CSS footer

I am working on a site that is done with CSS. I have a couple
of pages posted but am having a problem with the footer. I have
made a wrapper at 100% hoping that the wrapper would always be at
100% of the screen in height. On one page the footer is at the
bottom, but on another page (index) the content is not all the way
to the bottom so the footer won't go all the way to the bottom. The
pages that I have up are located at:
http://www.mts.net/~vmendell/
This is the index and the second page is the Company
Information page. Also if anyone would like to critique the pages I
would gladly accept any and all criticism. One thing, the Flash
animation is just a place holder, the real animation is being
worked on at the moment.
Thank you all in advance for taking the time to look at my
pages and giving any help.
Thank You
Vince Mendella MGDC
graymatter studios
p. 471.4676
e. [email protected]
w. www.graymatterstudios.ca
* Professional Member of the Society of Graphic Designers of
Canada
http://www.gdc.net

>
http://www.mts.net/~vmendell/
>
</div>
<div id="bear"></div>
</div>
At the first closing div above, your outerwrapper closes.
Then comes the Bear and finally an extraneous closing div .

IE7 Footer Problems

I'm having a problem with a floating footer in IE7. It will not stay at the bottom of the page in IE7, but sits in the middle of my last photo. It does exactly what it should in all other browsers I've tested it on, on both Mac and PC. I'm new to CSS, and I've spent all day trying solutions on various forums, but with no luck. I'm sure it's an easy fix, probably having to do with clearing floats (maybe?), but I have no idea what else to try and I'm losing my patience! I have a test page up here: http://www.mearesdentistry.com/test/ourteam. If anyone could help it would be greatly appreciated. Thank you in advance!

HTML errors:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mearesdentistry.com%2Ftest%2F ourteam
CSS errors:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. mearesdentistry.com%2Ftest%2Fourteam
98% of browser rendering issues are code related. Clean code = fewer things to rule out.
Remove the CSS height property from your #container and #welcome divisions.
Explicit height values on containers restricts how much content they can hold. Page height must remain flexible.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Is this Cf or CSS causing problem?

I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
Look at the radio buttons underneath "Step One: Individual Registration"
I cannot get these suckers to line up in a single line. Here is the code:
<div class="box2">
<table>
<tr>
<td width="100%">
    Are you a returning Reno Bowls league player?
</td>
<td width="50%">
<strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
</td>
<td>
    <strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
</td>
</tr>
</table>
</div>
Here is the CSS:
/*box2*/
.box2{ background:#e8e8e7; width:100%;}
.box2 .indent-box-1{ padding:35px 0 0 0; }
Inherited CSS: (going backwards)
div.container { overflow:hidden; width: 100%}
then:
/*box*/
.box{ background:#fdfdfd; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:35px 35px 17px 35px; }
then:
/*T-Reg*/
#tReg { font-size:0.75em; width:100%; text-align:left;}
#tReg .indent-main{padding:0 67px 0 67px}
#tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
#tReg .title h2{ margin-bottom:5px}
#tReg .img-left{ float:left; margin:0 20px 16px 0}
#tReg .img-left1{ float:left; margin:0 20px 0 0}
#tReg .img-indent{ margin:0 0 16px 0}
#tReg .img-indent1{ margin:0 12px 6px 0}
#tReg p{ margin:0 0 17px 0}
#tReg .p{ margin:0}
#tReg .p1{ margin:0 0 17px 0; width:100%}
#tReg .p2{ margin:0 0 7px 0}
#tReg h4{color:#6d6d6d; font-size:1em; }
#tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
#tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
#tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
#tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
#tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
#tReg ul{margin:0; padding:0; list-style:none;}
#tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
#tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
#tReg ul li a:hover { text-decoration:underline; }
#tReg .indent{padding:28px 0 0 0}
#tReg .indent-1{padding:0 0 0 128px}
.txt1{ color:#6d6d6d; font-weight:bold}
.txt2{ color:#b72723; font-weight:bold}
finally:
body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}

try this:
<div class="box2">
<table>
<tr>
<td width="100%">
    <table style="width:100%">
      <tr>
        <td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
        <td><strong>NO</strong></td>
        <td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
        <td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
     </tr>
    </table>
</td>
</tr>
</table>
</div>

CSS Layout problems

I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.

When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div>
<br style="clear: both;" />
</div>
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
>

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

CSS layout problems in Explorer (fine in Firefox and Safari)

Firstly apologies to the mods, I had mistakenly posted this
in the dynamic section also...
My problem - I am working on a CSS site (my first!) here
http://www.benfrain.com
It appears fine in Firefox (PC and Mac) and Safari (mac) but
when I view it in Explorer for Mac (5.2.3) I get a over long page
and I get no auto margin on the left.
Another small curiosity - I have noticed that my background
image on my div id "header" seems to start off again on the right.
Again, Explorer 5.2 for mac only...
My html and css both validate.
Anybody know why this is happening?

quote:
Originally posted by:
bregent
>It appears fine in Firefox (PC and Mac)
Have you tried increasing the text size?
Do you mean in the browser? I just tried it in Firefox and
after two increases the layout/style of the page kind of 'falls
apart' - how would this be rectified?

DW CS3 CSS template problems in EI6

I'm new to CSS and DW, so I tried starting with DW's new CSS
layouts. After working on this off and on for about a year, I
finally got the design to look okay in both FF 2 and IE 7. Wouldn't
you know my client has IE 6 and the layout breaks in 6. In 6 the
middle section, including the banner image, float drop down to the
bottom. If I make the width on #container2 to be 956 pixels instead
of 950, then 6 lets the middle section float up, but all browsers
have a background colored gap between the banner images and one or
more of the sidebar images. I'm ready to pull my hair out!
Here's the link to the page set to work for IE 7 and FF and
to break in 6. The entire site, of course, has many more pages but
this just has the index because I'm experimenting.
http://www.montanahorsesales.com/shf2/
and here's the style sheet that has the problem.
http://www.montanahorsesales.com/shf2/styles/thrColFix.css
The reason I added the #container2 is to get the cream
colored background to show in both IE7 and FF. One or the other was
giving me the dark green background in the main content and the
other was giving me the cream colored main content background like
it was supposed to.
Any suggestions? Is there a quick and easy way to fix this so
it works in all browsers? Or a hack to fix it for IE 6? I can live
without it working in any IE before 6, but I need 6 to work.
In general, it is a mistake to start with DW's included CSS
layouts? I thought it would be such a smart thing to do but now I'm
not so sure!

Cleo3 wrote:
> Any suggestions? Is there a quick and easy way to fix
this so it works in all
> browsers? Or a hack to fix it for IE 6? I can live
without it working in any
> IE before 6, but I need 6 to work.
Hi,
you could try replacing yours for mine...
.leftMargin198 {
margin: 0px;
padding: 0px;
height: 175px;
width: 554px;
float: left;
HTH
chin chin
Sinclair

ADF column footer problem

hi all,
im using Jdev 11.1.1.0.0. I have an inline table on my jspx page. I calculate the sum of one column in a managed bean. I want to display this value in table's footer section. So I added an input text to the column's footer and set the value from the managed bean. I have set the inline style of the table to width:100%;height:100%. But when the page renders, there is a big gap between the footer section and the last record. My table has only two records. Can anyone advice me on how to remove this gap?
Thanks in advance,
Nad

Hi Frank,
Thanks for replying. I tried your solution. It works fine. The gap between the last column and the column footer is now removed.
But still there is a problem. Since it's an inline table, when the detail node (in detail stamp facet) is clicked, the detail table appears, but the full table is not adjusted to show the content. So in order to have a look at the detail table, we have to scroll inside. It is better if the table can be adjusted to view the detail table without much effort. I hope my problem is clear. Can this be done? Pls help....
Thanks,
Nad.

CSS Footer problem

Similar Messages

Maybe you are looking for