[mattbl34]

I am having a bit of trouble. I cannot convince a certain div to line up properly. It works on many pages, but on this page and another, its a no go. Look down where the footer hits the main content. You'll see it.

vewd.org/photo/register_form.php


Any ideas are welcome.

[haku]

I see some problems, but I don't know which two divs you are talking about. What exactly are you trying to line up/bring together?

[farrellj]

try putting <br style="clear:left" /> right above the div.

[karmedic]

Are you talking about:

<div class="useragree">
Read the user agreement, if you understand and agree to it, check the box to the left to continue. If you have questions or concerns, contact us. info [at] vewd [dot] org
</div>

?

If so have you tried putting the input, em, agree copy and the explaination text inside a single div and going from there? As it stands now you'll likely run into trouble trying to align multiple content elements that are not contained in some manner and have it work across all browsers.

Even something like the following might be more workable:

<div class="ctrlHolder">
<label for="i_agree"> Agree to terms</label>
<div class="useragree">
<input type="checkbox" value="1" id="i_agree" name="i_agree"/>
<em>*</em> I have read and agree to the terms.<br>
<i>Read the user agreement, if you understand and agree to it, check the box to the left to continue. If you have questions or concerns, contact us. info [at] vewd [dot] org</i>
</div>
</div>

hth

[mattbl34]

I'm sorry I should have been more specific. The main content area, with the black left and right borders, never makes it down to the footer, or at least it doesn't on my computer, with Firefox 3, how does it look to you?

[haku]

If you are developing for ff3, you are somewhat jumping the gun. It's still in beta release, so the general population isn't using it yet. Develop for FF2, and prepare afterwards for FF3. If you are developing first for ff3, you are developing for an incomplete browser that the public doesn't use.

[mattbl34]

I should add that it also breaks in FF2, which I am developing for, I just meant to say, even with FF3, it breaks. Sorry about that.

On another page now, the border never begins, but the top portion of the border is there. I am so confused on this.

[mattbl34]

Okay, so I am still working on this. It seems the div called "content" that works on many other pages, is not working on this page or a couple others. It comes to the very next </div> and ends. It goes only as far as it wants, why have I lost control of this?

[karmedic]

I'm still not sure I understand fully but your form (class uniForm) has margin:30px; and your fieldset has margin:1em 0pt; --- setting both to margin-bottom: 0; pulls the footer snug to the container above.

Is that the issue?

[haku]

The first thing you should do is fix the errors in your code. Problems like unclosed tags (which you have a few) can cause weird, unpredictable results, such as the ones you are having. After you have done that, lets look at your problems again. They may go away with that.

[mattbl34]

Every single error on that validation isn't true. Whats the deal? All those things don't exist, the tags are there if you compare to source code. What would make validation fail like that?

[mattbl34]

I am so stupid though, the problem was in the margin. I never noticed it. Thanks karmedic for the help!

[mattbl34]

Alright, so now the page works fine in anything but IE. Any ideas? The subnavigation loses its place, the main area here that changes to a pink color if there is an error with jQuery becomes instantly pink, and entire areas lose formatting.

The CSS effecting the subnavigation is this:

#navigation ul#secondary {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 60px;
	right: 2px;
	width: 400px; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#navigation ul#secondary li a,#navigation ul#secondary li span {
	width: auto;
	display: block;
	float: left;
	padding: 0 10px;
	margin: 0;
	border: none;
	border-right: 1px dotted #AAA;
	background: none;

}

#navigation ul#secondary li a {
	color: #cc3300;
	text-decoration: none;
}

#navigation ul#secondary li a:hover {
	color: #000;
	background: transparent;
	padding: 0 10px;
	border: none;
	border-right: 1px dotted #AAA;
}
#navigation ul#secondary li a:active {
	color: #000;
	background: transparent;
}

#navigation ul#secondary li:last-child a { border: none; } 

I don't know a thing about IE.

Attached are two screenshots, one in IE and another in FF.

[haku]

Every single error on that validation isn't true. Whats the deal? All those things don't exist, the tags are there if you compare to source code. What would make validation fail like that?

They are all correct - I can see the errors for myself in your source code.

You have:
* two link opening tags with no closing tags (although you can self-close them)
* an image tag with no closing tag (again you can self-close it)
* an input tag with no closing tag (self close ok)
* a br tag with no closing tag (self close ok)

You also have some other errors (missing alt tag, use of capital letters for onSubmit), but they are not likely to cause your problems. The items I listed can cause problems like you are having though.

The problem is that you are using an XHTML doctype, but your coding isn't matching the XHTML standard. So the browser is looking for closing tags, and not finding them, so it has to guess what to do. Different browsers guess in different ways, and this causes discrepancies between browsers, and/or strange results within a browser.

[mattbl34]

Haku, I pmed you, to anyone else, I offer employment to make this website IE compliant. I have no idea how to do it, and not the time to learn.

If anyone wants to offer advice, I will gladly take it.

I have to finish this project in time for a conference we are supposed to launch at. Anyone interested? ...probably not after seeing that mess.