My Mind is Blown - or Just Dumb (Debugging)

HTML:


<div id="Footer">
		 <ul id="LegalInfo">
			 <li class="bodytext">Privacy Policy</li>
			 <li class="bodytext">Terms &amp; Conditions</li>
			 <li class="bodytext">&copy; 2012 Wheaton Chinese Alliance Church</li>
		 </ul>
		
		 <div id="ContactForm">
		
		 <!--ContactForm--></div>
		
		 <ul id="SiteInfo">
			 <li class="bodytext">Site Map</li>
			 <li class="bodytext">Old News Archive</li>
			 <li class="bodytext">Designed and Developed by Zach Wong</li>
		 </ul>
<!--footer--></div>

CSS:


#Footer
{
 margin-top:4em;
 background-color:rgb(100,100,100); /*WHY WONT BG COLOR WORK*/
}
#LegalInfo
{
 float:left;
 width:19.5em;
 margin-right:0.25em;
 text-align:left;
}

#ContactForm
{
 float:right;
 width:19.5em;
 margin:0 .25em 0 .25em;
}

#SiteInfo
{
 float:right;
 width:19.5em;
 margin-left:.25em;
 text-align:right;
}

And the result is here:
http://dl.dropbox.com/u/65437865/TehYoyo/WCACYG/index.html

I honestly can’t figure it out.

~TehYoyo

Explain what’s wrong please :).

Oh, it’s in the CSS comments. You need to read this article. The #Footer element is suffering from it. Read spoiler if you can’t figure it out.

Add overflow:hidden; to footer

It’s because of the contents of your footer :).

Ah herp derp. Forgot about that. Thanks lots.

[ot]Hey nice site! Big improvement, to be sure…about the Rubik’s Cube thing…are you the 2nd guy (LTR)? Also, you should add a slight transparent-to-black gradient to fix up the edge of your bg image. (Or don’t - not my site)

About the article…did Paul really “invent” that? Ten bucks says he didn’t. Let’s all worship at his altar if he did.[/ot]

~TehYoyo

[ot]

He’s widely credited for first pointing out its usefulness in this context. (The first reference to using overflow for clearing seems to be here.)[/ot]

I’m the white guy who isn’t young. The only obvious choice.

And I’ll keep things the way they are. Paul O’B first noticed it could be used. He did invent it. Give me the money.

Wow. So this was only invented maybe 6 months ago? What did people do before that? It’s amazing that it hadn’t been discovered in 10 years…did someone at the W3C confirm that this was how it’s supposed to be done?

~TehYoyo

Absolutely no. Years, years ago. People used a clearing div or one of the other methods I listed.

W3C made it how it’s supposed to be. They didn’t have to confirm anything.

Wait…it was invented years and years ago, but people used other methods?

Anyways, I have another question. Not really CSS, but I didn’t want to start a new thread (to be honest, I try to limit my threads to a max of 1 per day).

Take a look at this page.

I was never taught anything about forms, so this is my very first try. I looked at a bit of the Sitepoint Reference and Fancy Form Design (book).

I’m sure there are problems. Mind finding them (and explaining, if you please)?

~TehYoyo

Note: Please move this thread if you feel the need to. Sorry.

People still use other methods. Both because of it not being known AND / OR they don’t want to use it.

But I was saying that people used other methods before overflow was konwn about.

Anyways, I have another question. Not really CSS, but I didn’t want to start a new thread (to be honest, I try to limit my threads to a max of 1 per day).

Take a look at this page.

I was never taught anything about forms, so this is my very first try. I looked at a bit of the Sitepoint Reference and Fancy Form Design (book).

I’m sure there are problems. Mind finding them (and explaining, if you please)?

~TehYoyo

Note: Please move this thread if you feel the need to. Sorry.

The label needs a for=“” attribute eto go with the <input> it’s matching with. You shouldn’t need those <br>'s but it’s not a dealbreaker. If you have an input with ID=“city” the label needs to be <label for=“city”>

You shouldn’t need those <br>'s but it’s not a dealbreaker.
I just wanted it on a new line. Should I be using CSS?

If you have an input with ID=“city” the label needs to be <label for=“city”>

OK. Thanks.

It’s a simple contact me form. Aside from the missing PHP, can you see anything else I might be missing?

~TehYoyo

I would.

OK. Thanks.

It’s a simple contact me form. Aside from the missing PHP, can you see anything else I might be missing?

~TehYoyo

Nope. Said everything I saw. But I’m not a form expert.

The article I linked to was from 2005—when the overflow method was first aired.

Make sure to include the for=“” attributes on the labels that Ryan mentioned. Breaks are OK to use if you want to on something like this. You have more control with CSS, but it makes some sense to use breaks, as they work even if CSS is off.

You are better off using a <textarea> element for the message field. Text inputs are really for small amounts of text, like a name etc. If you stick with what you have, you can’t re-use this code on the message input:

name=“Email” id=“Email”

I think Paul’s innovation dates back to 2003, if I’m not completely mistaken. :slight_smile:

Maybe I’m just stupid, but how do I do that?

Yeah, that’s what I was thinking - I’ve used textareas before, but I couldn’t find any examples of it being properly used. I want my textarea to be multiple rows and columns. I presume that the “rows” and “cols” attributes haven’t been deprecated?

~TehYoyo

Combination of float/clear. But as Ralph said <br>'s aren’t terrible…they do at least work with CSS off. It may not be worth the trouble to you to do it.

No, they are fine. Put them in, for sure, but in this case, give your textarea a width via CSS, as that’s a preferable way to size it visually, IMHO. I guess I should say the same for the text inputs.

Is there any way to align the inputs on the right?

Yuss, with CSS. But clarify: are you talking about placing each label inline with the input field?

Exactly. Like:

Default:


label--|inputbox|
longerlabel--|inputbox|

What I want:


label--------|inputbox|
longerlabel--|inputbox|

~TehYoyo