School's Website CSS Positioning

[teckietalkster]

Hello everyone! I am new to this forum, and by the looks of it, I will be staying for a while. Anyways, my first post is a problem I am having with a website. I decided to create a site for my school since their current one sucks. I used CSS instead of tables, (finally I have started CSS!) to position all the elements using absolute positioning. I currently only have the basic layout. The site looks fine in Firefox but the positioning is always JUST off in Internet Explorer. I have tried many diffrent things to fix the problem, and I'm sure its something easy but I can't seem to see it since I am new with CSS. I am just using freewebs to host at the moment, the school board has not handed over full hosting priveleges yet. The url is: http://www.freewebs.com/westparkbeta

I appreciate the Help! :cool:

[Kravvitz]

First of all, I'm glad to see you've made an attempt at using CSS instead of tables to layout a web page. :)

It's off in FF too when I don't have my browser maximized at my 1024x768 screen resolution.

Don't overuse absolute positioning. I suggest you familiarize yourself with other CSS Layout Techniques (http://www.dynamicsitesolutions.com/css/layout_techniques/) in addition to absolute positioning.

You should avoid using deprecated elements like <center>. Four ways to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center_element/)

You should use a complete doctype (one that includes a URL).
http://hsivonen.iki.fi/doctype/
http://www.alistapart.com/articles/doctype/
http://www.juicystudio.com/choosing-doctype/
http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html
http://www.webdevout.net/doctype_switching.php
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

[teckietalkster]

Thank you very much for that detailed reply Kravvitz. Ok, I have looked into other ways of positioning, I have a proper doctype and everything, (not posted in online version of site yet) but I havent been able to get the positioning right. Should I use floats or what? What I'm trying to do is have my whole layout fit together on most browsers at any resolution, so I am assuming I should use percentages instead of static pixels. Does the problem have to do with the fact that I am using images? background-image: url(images/container.gif); should I not be inplementing images within the css for containers etc? This is is all very confusing, I am such a table person, but I would love to understand CSS positioning better.

[Arbitrator]

Okay, first you may want to try a more modern DTD. The one you're currently using mostly defeats the point of using one at all since your page is still displaying in quirks mode in every browser. See Activating the Right Layout Mode Using a DTD (http://hsivonen.iki.fi/doctype/).

I would also recommend that you drop the use of absolute positioning entirely for now. It's a common mistake for newbies to use it for everything in an attempt to create a pixel-perfect layout while ignoring good structure. Your layout should work fine without it as long as you use logical element order. To center your page (in any resolution) you need to use margin: auto on the container element. See this thread for a bit more information on that.

[Kravvitz]

Should I use floats or what?
Generally, it's best to use margins and floats for positioning, but it does depend on the situation.

What I'm trying to do is have my whole layout fit together on most browsers at any resolution, so I am assuming I should use percentages instead of static pixels. [/QUOTE]
I rarely use percentages other than 100%. I suggest you look into liquid width layouts (http://www.google.com/search?q=CSS+liquid+OR+fluid+width+layout).

should I not be inplementing images within the css for containers etc?
If the image is purely presentational (part of the design), then it should probably be a background-image, otherwise you should use an <img> element with proper alt(ernative) text.