The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

type placement @ different res

I inherited this site and the owner demands it be done in css. I'm a person who designed in table for years and I'm not making the transition to css well at all. I've read several faqs here and elsewhere, but I'm still unsure as to how to fix this issue. Let me say that I know the markup isn't 100% semantic, so you don't have to list that per say. The client has people using IE, FF and the AOL browser at different resolutions and all of them are complaining about jogged content etc. If someone can look at the site in IE 6.0 @ 1024 x 768 and then a higher or lower resolution and at least give me hints or link to direction(s) to go in to fix this site wide issue, I'd be greatful, as I really don't want to go back to designing in tables or re-designing this site in tables.

The main problem is that your absolutely placed elements are replaced in respect of the viewport and not #container, which means that as you open the browsers window the page centers but your absolute content still sits at the left of the viewport.

You would need to add position:relative to #container to create a local stacking context for further positioned elements..

e.g.

Code:

#container {
position:relative;
}

You also need to take care of the default margins and padding on the elements you are using or your positioning will be different from browser to browser. This can be done by using the following code:

Code:

* {margin:0;padding:0}

That will remove all padding and margins from all elements which means that you have to set those explicitly for every element you use.

e.g.

Code:

body{margin:0;padding:15px 0}

This means that when you use p tag or heading tag then you need to set the exact margin you want.

There are form element issues when using the universal selector in that manner so you could use as an alternative a reset css such as this:

Your positions will need to be adjusted as follows and you will need to change the text size and line-height to fit in the space you have allocated.

There was no real need to wrap them all in a div as styles could have been applied to the ul directly.

That should get you back on track but I should warn you that this approach of absolutely placing elements over the time of an image is not very professional and creates a very fragile layout. If the user resizes the text the layout will break because it is separate from the content.

The page should really be created using elements in the flow and not absolutely positioned and the background should be made to expand with content. Of course this would mean a complete re-design and is a lot more involved than what you have done.

The page should really be created using elements in the flow and not absolutely positioned and the background should be made to expand with content. Of course this would mean a complete re-design and is a lot more involved than what you have done.

Paul,

Thank you very much for answering this post. I will implement the fixes you've listed here on the existing site.

When you mention the flow and background expanding (above), are you talking about floats or positioning things using some other method? I've read so much on css over the last 4 days that I've become confused as to the best way to organize content in css. Do you have a link that identifies with what you use as a solid base or can you reference a FAQ or a book that is a good place to start learning about the proper way to do the flow and background expansion?

or a book that is a good place to start learning about the proper way to do the flow and background expansion?

Hey Brian,

Bulletproof Web Design is an excellent book looking at how to implement XHTML and CSS with web standards in mind.

The basic idea is you want to make your designs flexible, that is flexible with browser settings. People should be able to access your content with CSS disabled / images disabled / Increased font size etc..

So because absolute positioning sets things ... absolutely it's bad for this reason because the elements will no longer effect anything else in the page. You want to keep as many things as possible in the normal flow of the document. Favour floats over absolute positioning always because you can keep things clear of them if you choose to.