homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE7 Footer Problems
Footer won't stay at bottom in IE7...cuts off picture
cmeares




msg:4326887
 2:02 pm on Jun 16, 2011 (gmt 0)

Hi everyone!
I'm new to CSS and seemed to have run into an IE7 snag. I looked at forums all night and tried other people's suggestions(clearing breaks,etc), but nothing seemed to work. I'm sure it's something simple.

My footer won't stay at the bottom with IE7...it floats up and cuts off a picture. I included the css from the right column, though I don't really know if it is relevant. The #welcome div is the one being cut off. It seems to have to do with floats, heights, etc. Please help me!:)

#container {
width: 1024px;
text-align: left;
background-image: url(ourteam_img);
height: 2750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#welcome {

height: 2060px;
padding-top: 45px;
margin-top: 0px;
margin-left: 64px;
width: 600px;
float: left;
}

#rightcolumn {
height: 350px;
float: right;
width: 220px;
margin-top: 54px;
padding-right: 5px;
padding-left: 22px;
background-color: #E6dad2;
margin-right: 40px;
padding-top: 20px;
margin-bottom: 1700px;
margin-left: 72px;
}
#footer {
background-color: #007183;
padding-top: 10px;
height: 20px;
float: left;
width: 964px;
margin-top: 15px;
padding-left: 60px;
}

 

alt131




msg:4327422
 4:18 pm on Jun 17, 2011 (gmt 0)

Hi cmeares, and welcome to WebmasterWorld :)

If you are new to css then it looks like you are doing really well! On the provided code I think you are probably right this has to do with floats and heights, but exactly what is happening will depend on the html structure. I can't reproduce the described behaviour as #footer is remaining at the bottom and not floating up at all, so if the suggestions don't solve this, do post a short html snippet.

First, make sure your code (css and html) validates. Then check out the explanation of floats [w3.org] in the recommendations. Maxdesign has a "floatutorial" [css.maxdesign.com.au] that might help too. Note it is very old, so read with caution, but the illustrations in "General Information" may assist.

Also note that the float:right on #rightcolumn means it will try to float to the right of the element that comes next. If that is #footer it may be that is affecting the lay-out because while floats will "drop" if they are wide enough, they will also float "upwards" if their is enough width for them to fit.

Finally, double check that setting clear:left on #footer does not solve the trouble.

cmeares




msg:4327473
 6:14 pm on Jun 17, 2011 (gmt 0)

Thank you so much for your help! I managed to fix the floating footer by removing the height values for both the #container and the #welcome div, but now the 1 pixel border around the container does not extend to the bottom of the page. This was not a problem when the height was defined.Here are all the divs below, maybe I didn't provide enough information before. Thoughts on how I could correct this, or a work around?

#container {
width: 1024px;
text-align: left;
background-image: url(ourteam_img);
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: no-repeat;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #6F8A91;
border-right-color: #6F8A91;
border-bottom-color: #007183;
border-left-color: #6F8A91;
height: auto;
}
#mainContent {
padding: 0 189px; /
padding-top: 55px;
margin-top: 12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10pt;
}
#welcome {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10pt;
padding-top: 45px;
margin-top: 0px;
margin-left: 64px;
width: 600px;
#rightcolumn {
height: 350px;
float: right;
width: 220px;
margin-top: 54px;
padding-right: 5px;
padding-left: 22px;
background-color: #E6dad2;
margin-right: 40px;
padding-top: 20px;
margin-left: 72px;
}
#navlist li
{
display: inline;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
padding-top: 0px;
float: right;
margin-right: 45px;
border-right-width: -5px
}
#footer
{
background-color: #007183;
padding-top: 10px;
height: 20px;
float: left;
width: 964px;
padding-left: 60px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;

alt131




msg:4327621
 1:49 am on Jun 18, 2011 (gmt 0)

Wahoo! It isn't so much more information - it's the information we've asked for! However, as you're new to coding this is a great opportunity to look at some code basics to make it easier to manage your code before we go back to the issue.

The first code sample really was a great post - simple, short and told us most of what was required. The second one tells me you've been trying lots of things, and it looks like the code (and maybe you?) is getting a little bit tired ;) To help, I suggest consider using shorthand as it makes css smaller, plus easier to read. See Margin [w3.org] in section 8.3.1.

Using the css for #container as an example:
  • First step:
    margin: 0px auto 0px auto; (Top, right, bottom, left - like a clock face 12, 3, 6, 9)
  • That makes it obvious top/bottom, left/right are the same, so:
    margin: 0px auto; (Top/bottom, left/right)
  • Zero is zero regardless of the units of measure, so remove those wherever they appear, which gives us:
    margin: 0 auto
Padding works exactly the same as margin, and there is shorthand for border too (Further down the page in the recommendations linked above). In this case you have a bottom-border-width of 0px so it does not show, but later set a color - which is redundant as there is no border to colour. Again, shorthand makes it easier to notice these things. Something like:
border: 1px solid #6F8A91;
border-style: solid solid none; (Top, left/right, bottom.)

Making those changes reduces the #container css from 21 lines to:
#container {
width: 1024px;
text-align: left;
background-color: #aaa; /* we don't have your image, so give us a colour to illustrate instead */
margin: 0 auto;
border: 1px solid #6F8A91;
border-style: solid solid none; (Top, left/right/bottom)
height: auto;
}
Note we don't need information about fonts etc because the issue is layout, and at this stage they are unlikely to be affecting what is happening.

Back to the issue.
I understand you are trying things, and that's good, of course. Unfortunately the "solution" hasn't dealt with the issue that is stopping the floats from clearing, I suspect removing the heights means the clearing issue nolonger exists. All good in terms of problem-solving, but as that has destroyed the basic layout of your document it isn't an ideal solution because it has just created an a different, but equally fatal issue instead.

Now it should be quite possible to get the floats to clear - and I expect your intiial thought this is about floats and heights is correct. But I'm not convinced the solution is to remove the heights and create a new issue - I think deal with the issue the heights create.

The links I provided in the first post explain why the floats did not expand the full height of the page when you set height:auto so that should answer your last question. But rather than dealing with this new issue, lets go back to the original one: Can you confirm applying clear:left to the footer (with the explicitly set heights as in your original code sample) did not work? If not, as above, can you post a short html sample so we can look at the structure of your document.

cmeares




msg:4328454
 8:36 pm on Jun 20, 2011 (gmt 0)

Thank you so much for your thoughtful answer. I am exhausted and certainly my CSS is getting sloppy. I've spent hours trying to solve the problem, so I appreciate the explanation of shorthand. It's very helpful.

I received what seems to be a working solution to the problem from another forum. I've removed all of the height specifications for all divs, and changed the container code to the

following:#container {
width: 1024px;
margin:0 auto; /**with width, this centers page**/
text-align: left;
background: url(ourteam_img/ourteambackground.png) no-repeat;
overflow: hidden; /**float containment**/
border: 1px solid #6F8A91;
}

This definitely fixes the problem, but I honestly have no idea *how*....what does float containment mean?

lucy24




msg:4328471
 9:34 pm on Jun 20, 2011 (gmt 0)

Would you settle for "what does 'overflow: hidden [w3.org]' mean"? It means (in English) if the contents are too big for their box, send the excess into some other universe instead of (a) stretching the box, (b) letting them spill out or (c) auto-generating a scroll bar.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved