Hey guys, I haven't worked on HTML for a while and getting kinda rusty.

Anyway, I redesigned a home page for this church.
Everything looks fine on my computer, in both FF and IE
However, on other computers, both FF and IE are messing up.

The "right column" is what is getting screwed up.

Can you guys tell me if alignments are looking good on your computers or not?
I did it in CSS but I am couldn't remember a lot, so it might have been done poorly.


Link
CSS

I would like to add a vertical line to the left side of the "right content" or a border of you will. I don't really know how to do that, can anyone help me?
I really don't

Thanks a lot.

Looks fine in Firefox, screwed up in IE.
Remove the position: absolute on the blue right column and go with float:right instead, that should pull it back into the container in IE.

The make sure you CLEAR your floats after you close the content area.

I'm sorry, I provided the wrong links to an older version I was working on.

I updated the links in the first post

First of all, you need to fix the following 16 code warnings:

line 48 column 5 - Warning: missing <li>
line 129 column 92 - Warning: unescaped & or unknown entity "&task"
line 129 column 106 - Warning: unescaped & or unknown entity "&gid"
line 129 column 114 - Warning: unescaped & or unknown entity "&Itemid"
line 135 column 1 - Warning: missing </ul> before </div>
line 220 column 48 - Warning: entity "&nbsp" doesn't end in ';'
line 220 column 55 - Warning: entity "&nbsp" doesn't end in ';'
line 221 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 221 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 223 column 66 - Warning: entity "&nbsp" doesn't end in ';'
line 223 column 73 - Warning: entity "&nbsp" doesn't end in ';'
line 224 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 224 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 229 column 43 - Warning: entity "&nbsp" doesn't end in ';'
line 229 column 50 - Warning: entity "&nbsp" doesn't end in ';'
line 133 column 1 - Warning: <div> anchor "heading" already defined

Originally Posted by travelagent

First of all, you need to fix the following 16 code warnings:

line 48 column 5 - Warning: missing <li>
line 129 column 92 - Warning: unescaped & or unknown entity "&task"
line 129 column 106 - Warning: unescaped & or unknown entity "&gid"
line 129 column 114 - Warning: unescaped & or unknown entity "&Itemid"
line 135 column 1 - Warning: missing </ul> before </div>
line 220 column 48 - Warning: entity "&nbsp" doesn't end in ';'
line 220 column 55 - Warning: entity "&nbsp" doesn't end in ';'
line 221 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 221 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 223 column 66 - Warning: entity "&nbsp" doesn't end in ';'
line 223 column 73 - Warning: entity "&nbsp" doesn't end in ';'
line 224 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 224 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 229 column 43 - Warning: entity "&nbsp" doesn't end in ';'
line 229 column 50 - Warning: entity "&nbsp" doesn't end in ';'
line 133 column 1 - Warning: <div> anchor "heading" already defined

It would be kind of nice if you tell me what page those errors are in. Those errors don't' exist in my index page AT ALL

Ok, I got the left border finished.
Changing the Position:absolute to float:right; fixed the left and right alignment pretty good.
But now, the right column is positioned at the very bottom of the page, instead of under the header and the menu.

Lady, could you tell me about about clearing the floats. Not too sure on what that does/mean.

Thanks again!

Those errors may not exist in your home page (or they may...I'm not sure where TA got that from). Whether they do or don't doesn't matter, though, since you've got a bunch of errors on the homepage anyway:

http://validator.w3.org/check?uri=http%3A%2F%2Fgreenvillecopts.org%2F

PM me this thread link. I'll look at it again when I get home (at my GF's).

LNR: the position of the absolute was to be there in the particular instance in question. The reason I know that is because I recognize bits and pieces of SEFL code when I see it, even when it's been mixed with a whole bunch of other stuff.

(#rightcolumncontent gets dumped into #rightcolumn via Javascript, although I've since developed a better way to do this...I just haven't put it on the SEFL site yet).

Anyway, RNPoo7, your problem appears to be that your content div is 745 pixels wide, whereas the sum total of your contentarea (550 pixels) + rightcolumncontent (200 pixels) + border (1 pixel) = 751pixels. Take at least 6 pixels out of your contentarea div and all should fit (I'd recommend taking 11 out just so you've got a 5-pixel cushion).

That should at least get your two columns to play nicely across the board, although you will need to clear both floats immediately after, and within the #content div itself...ideally, do it just before you close the #content div.

Other than that, well...you just need to fix those code errors. One thing you may want to consider, if it becomes too much, is to rebuild each section a bit at a time. Take one section...create the code for it...validate it...cross-browser check it...and move on to the next one. Repeat as necessary. Sometimes this really is quicker.

I was bored. So i tried this "light weight" version of markup.
http://www.genexint.com/wmt/antest.html

Adm, I changed the content area to 539 + 200 right column + 1 border = 740
but it's still not moving up.

Kirtan's version works good in FF but it moves the entire site to the left on IE.
But the right column is in the correct position. I would have look at his good after work.
Also, there is empty spaces around the border. Haven't figured out why that's happening yet.

I appreciate the help guys. I still don't know what clearing means or does, can someone explain that to me please? Thanks again.

I think you are talking about ie7. Its fixed now.

Originally Posted by RNPoo7

It would be kind of nice if you tell me what page those errors are in. Those errors don't' exist in my index page AT ALL

Ok, I got the left border finished.
Changing the Position:absolute to float:right; fixed the left and right alignment pretty good.
But now, the right column is positioned at the very bottom of the page, instead of under the header and the menu.

Lady, could you tell me about about clearing the floats. Not too sure on what that does/mean.

Thanks again!

Actually, the errors still exist on the "Link" you have in your original post -- in Firefox, the site is still hosed up and these are the existing errors:

line 117 column 92 - Warning: unescaped & or unknown entity "&task"
line 117 column 106 - Warning: unescaped & or unknown entity "&gid"
line 117 column 114 - Warning: unescaped & or unknown entity "&Itemid"
line 123 column 1 - Warning: missing </ul> before </div>
line 208 column 48 - Warning: entity "&nbsp" doesn't end in ';'
line 208 column 55 - Warning: entity "&nbsp" doesn't end in ';'
line 209 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 209 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 211 column 66 - Warning: entity "&nbsp" doesn't end in ';'
line 211 column 73 - Warning: entity "&nbsp" doesn't end in ';'
line 212 column 65 - Warning: entity "&nbsp" doesn't end in ';'
line 212 column 72 - Warning: entity "&nbsp" doesn't end in ';'
line 217 column 43 - Warning: entity "&nbsp" doesn't end in ';'
line 217 column 50 - Warning: entity "&nbsp" doesn't end in ';'
line 121 column 1 - Warning: <div> anchor "heading" already defined

How to clear floats:
http://css-discuss.incutio.com/?page=ClearingSpace

AS for all those warnings -
- remove the non-breaking spaces you have everywhere, but if you have to have them, the correct notation is   - gotta have the ending semi-colon.
- You can only use an ID ONCE per page, you've got <div id="heading"> at least twice. If you want to re-use it, turn it into a CLASS instead.
- You're missing the closing tag for the <ul> - put in in there !

Ok I fixed the ul issue. Working on using a class for the "heading".

Here's what I fail to understand. The rest of the warnings are from LINKS. That's not my code. That's exactly how I copied them from other sites...?

They are links to other pages. I'm suppose to fix that too?

It'd be a good idea if you did. Most code that other sites provide is subpar code at best. 99% of the time, if I want to link to something, I just create my own code...that way I know I did it right. If the site owner is picky and wants it done his/her way with his/her code and his/her code sucks, I just remove the link.