Multiple Coding Problems

[Theros]

Hey all!

On an upcoming project I'm working on, I've run into two dead ends that I can't figure out... One involves a stick footer and the other involves a formatting issue that I'll try to explain. The site I'm working on is here.

1) I cannot get the sticky footer to stick to the bottom...there's a slight gap at the bottom
2) I don't how know to get the 3 bottom <ul>s in my footer to behave like my mockup here

So yeah..I'm kinda stumped. Thanks if you all could take the time to show me how to fix this issue.

Thanks,
Eric Huang

[markbrown4]

Hello,

The 2px gap at the bottom is caused by

#menu {
   	position: absolute; 
   	width: 160px;
	left: 220px;
	top: 13px;
	bottom: -2px !important; /*IE Hack to bring menu down*/
}

If it's an IE hack IE should be the only browser to see it. If it needs to stay just give the #footer a margin-bottom: -2px;

To achieve the design in your mockup just give each column fixed widths and put the paragraph below the lists - not within another ul element - Remember to validate.

[Theros]

Okay, I fixed the sticky footer problem thanks to you. However, I still cannot understand how I should arrange the footer elements? I tried playing around with it using floats but I can't figure it out still.. Can you give me any hints?

Thanks,
Eric Huang

[markbrown4]

Hi,

You've got some spelling issues..
This section of the layout isn't too difficult - Something like this should work

<div id="footer">
  <div class="first">Put Heading and list</div>
  <div class="second">Put Heading and list</div>
  <div class="third">Put Heading and Paragraphs</div>
  <div class="bottom">Put Paragraph</div>
</div>

#footer .first{ width: 300px; float: left }
#footer .second { width: 200px; float: left }
#footer .third { width: 400px; float: left }
#footer .bottom{ clear: left }

Float everything, give them widths(fixed as your layout is fixed) and clear the last element. Of course the width's will have to account for the padding/margin on the elements also.

Hope it helps

[Paul O'B]

Just use three floats of the correct width.

The first float would contain another three floats for those 3 little columns.

There's not really much more to it than that. Just make sure everything has the correct dimensions and that they fit in the space you allocate.

The copyright message could be a paragraph with text-align:center and clear:both added.

[Theros]

Okay, thanks to you two I've gotten that fixed. However, in IE 7 for some reason the links are double spaced and are messing up the sticky footer? How can i fix that?

Thanks,
Eric Huang

[Paul O'B]

Hi,

It's probably a white space bug so try floating the list.

#footer li {
font-size: 11px;
color: #444444;
list-style-type:none;
float:left;
clear:left;
}