html and css help

Well, I guess you could say I'm a beginner web site designer. I've designed and written(by hand, I can't afford any software at this point) a couple of websites. I guess you could say I've designed/written more then that, but only two that I'd claim. lol.. Anyway, I've been having a bit of trouble with the first one that I started. When I had originally designed and written it I knew close to nothing about CSS and therefore completely left it out of the process and code and everything. I also used tables exclusively for the layout. Since then I've learned the basics of CSS and have tried to "update" the site to get rid of the table based layout and switch most of the "presentation" coding to CSS. I've run into some problems that I, to put it simply, just don't understand. I guess I just haven't learned enough about it to do what I'm wanting to do.

One of my biggest goals in these two websites that I've done is that I want both of them to be "correct." I doubt that I've made them really completely "correct," but I at least want them and their CSS to validate in the W3 online validator.

Now, all of that being said, I'll tell you what I'm using browser wise and try to explain the problem. I'm using IE 7.. Now, if any more of my system specs are relavent, like the operating system or whatever, I can mention that as well, but I didn't think that it would be all that relavent.

So now, here are the things that are confusing me.

First, I'll give you the basic layout of the page...
I've divided the different sections of the page into three groups, the banner, the menu, and the content. The banner consists of a div with an image in it. Pretty simple.. It has a margin-bottom. The menu is an UL that is absolutely positioned and it has margins on the left(the body margins are set to 0) and top. Now, I had read somewhere on this forum that IE does not handle absolute positioning correctly. Could this be part of the problem? Also, could my coding possible be very non-cross compatible because of the way that I've coded it using absolute positioning based on the way it displays in IE? Anways, back to the structure. I then have a table for the content, which as of now is also absolutely positioned. It has it's margin-left set so that it's pushed out from under the UL, of course. Most of the content is centered using align="center" attributes in the td tags, I believe(right now I'm not able to check it, it's on a different computer). Now, as of right now everything displays fine like it is, at least, in IE it does. BUT, I'm wanting to change it up a bit.

I was trying to test the compatability of it on different systems. Since the only browsers I have access to right now is IE, obviously I'm not able to do that much checking as far as browser compatability goes, but I am able to test screen size compatability since I have access to this computer which has a much smaller screen then the computer that the website is currently on. I can't even remember exactly how it was, but for some reason or another I decided that it needed to be changed. Before, the widths were set to percentages. I changed that to absolute values and moved it to the CSS. Now, obviously, it looks a bit different on the big screen. It seems... left heavy, like the right is just some empty void, since the content doesn't fill it up anymore due to the percentage widths. What I was thinking about doing, is just centering the content, so that it would be in the middle of the page instead of just to the right of the menu. How.. in the world.. would I do this.. I've tried several things, but all of them just confuse me.

It's not just the fact that it doesn't work, it's the fact that it does something I totally would not expect. I've tried things like setting the left-margin and right-margins to auto, which I thought was supposed to make them equal, which was supposed to center the object. But for some reason, that isn't working. When I try to wrap the content in div tags and apply the margin auto thing to the div, it centers both the menu and the content, and the menu is then on top of the content. I just don't know what I'm doing wrong here. Maybe if someone just looked at my source code it would help. So, anyone that is interested in helping, say so and I'll get you the source for the home page and the css. All of the pages, except a couple, use the exact same layout.. it's mainly just the content that is different, which is basically just text.

Also, if anyone wants to help out and look at the html and css files, I'll try to explain what all I've done and what all I've tried a little better.

Since I've already started this thread, there were a few other questions that I would like some help with. I'm sure most of them are pretty simple, and I've probably forgotten a few of them after writting that massive post that's probably way too long, but here are the ones that I can remember:
First, :hover on selectors other then a. How widely is this supported? I read that it isn't supported in IE unless you use some JS, but I've found that when I use an XHTML DTD :hover works on my paragraphs... Like, p:hover {color: red;} works fine.. Why is this? Am I missing something here? Does this actually work for some reason, or is this just a glitch on my computer for some reason?
Another question.. Since I'm not really able to test compatability very well I was wondering if some of you could just check out the second website that I made and tell me what you think. Tell me if you think it displays correctly, if it's coded correctly, what I probably should have done a different way, etc. The website is www.hartconstructionjch.com. Now, I do have a slightly updated version of it that I haven't uploaded yet, but the only change that I can remember having made right now is fixing the error in the description meta tag.. there is a space after the description=. I've fixed that, so no need to worry about that one. Somehow, it still passed validation, but whatever.
Third question: what else do I "need" to add other then the encoding decleration or whatever it is.. And what is the way I should go about adding that.. I believe I've seen it in the form of a meta tag, in a body attribute, and something else, but I haven't seen anything about which you should use for what.. so any help with that would be appriciated.

I know, I know.. It's probably way too long of a post.. but I just really don't know anyone that knows a whole lot about html, so everything that I learn is pretty much from the internet, and when I can't find the answer through google I just have to ask on a forum. I know that no one is probably going to answer all of the questions I've asked, or be able to help with all of the problems I've come across, but any help at all is appriciated.

Also.. as an ending note, it's 1 in the morning, and I've had a long day, so there may very well be some misspellings and some sentences that just don't make sense.. Sorry if there are.

 

i would recommend that you have a look at some of the xhtml/css designs on this site. there is loads of very clean & valid code to study there.
also, browse around css play to see what amazing things you can do without mucking up your site with dhtml/javascript
attached is a screenshot of your page in firefox.

 

Thanks, I'll check those out right now.

As a side note.. I changed around the position values so that the content and menu are not both absolutely positioned, and I'm able to center the content just fine, unless I have the margin set, which offsets it from it's centered position whatever the margin is set to. If I don't have the margin set, then the content will go back under the menu in smaller browsers. If I try to make a spacer div, I have a hard time getting that to align. I'll mess with that later after I look at those sites and see what I can do.

Edit: wow. I just looked at the screen shot. That looks horrible. I guess I'll have to restructure it...

 

TO: 8ilxli8
RE: html and css help

Thank you! for the link to oswd.org - very useful site! I was helping a recently laid-off friend get their resume updated, and found a template there that was perfect for the application, and very easy to use.
That, for me, was a *very* helpful link!

 

check out www.learnexpression.com for some free videos on css and design with the added value of learning Expression web at the same time.