HELP!!! Im quite experienced in css, but i cannot get this site to work!!

I think you may need a "position: relative" on the whatever is containing the fixed width container. which browser isn't it working on?

Would help if the link worked!

It's the outer wrapper generally that would be centred but assuming that it is full width then the inner should centre, however the text-align trick for IE5 should be outer or usually body text-align:center first child text-align:left to re-set things, also your padding declarations are a bit odd.

Hugo.

its not working on safari or IE 6, i havent tried it on firefox windows. yet. But it looks like when i preview the site in IE on my computer, but when i upload it to the net, its all shifted over to the right!!

so how come i need position:relative then?

Sort the link out please or post all the html/css

ah i appologise the link is
http://www.free-rich-guide.com/template1

It is working in safari, but not IE 6

I'm afraid you've got quite a serious case of divitis there

haha yer, i love divs theyre so cool, but i hate IE

I think you are going to have to run things through the validator before going further.

text-align:center needs to go on body re-aligned left on wrapper, but sort out the markup errors first.

hey could you please show me what u mean in the css:
p.s the div.window and #wrapper are the two containers

http://www.free-rich-guide.com/basic.css

thanks

I don't see where div.window figures in things?

As I said text-align:center goes on the body selector then re-align on #wrapper.

I suspect the problems you are having are due to positioning the #nav absolutely, not sure though, but there is no reason to be positioning it at all just let it flow and then we'll see how things stack up.

the div.window i think is the same as setting the text as center in the body! i have just created 2 wrappers instead of 1.

This is what you need:

body {
margin: 0 auto 0 auto;
width: 775px;
text-align: center;
}

#Wrapper {
width: 775px;
text-align: left;
}

The 'margin: auto' centers your content on CSS2 compliant browsers and the 'text-align: center' does it in IE.

Then you set the text alignment back to left in your wrapper DIV, and that is inherited by your other elements.

Littlecharva

mod edit/code tags added - tph

dude, cheers for that, it works for safari, which is css2 and sorta works in IE6, it just doesnt expand as you resize the page. hmmm. well i assume that IE7 has css2 capabilities. would i be right with that?

thanks again
Ash

Get rid of your padding-right: 40px; and left:0px in your body, and most importantly, get rid of your position:relative in your wrapper; that seems to be causing the problem.

I get the feeling you've stuck lots of CSS in your CSS file in the process of trying to figure this out (such as left:0px), I think if you were to clear all of the erroneous CSS code out, it would make debugging it much easier.

Try spending twenty minutes removing things and testing the result to see what you can safely remove. You'll thank yourself for it later on when you hit another problem.

Littlechar

hey i have done all that and it doesnt seem to be working. it works in safari but not IE and its a bit odd in FF

#Wrapper {
width: 775px;
text-align: left;
}

Hugo, is this code correct? because it seems to screw thing up! I was testing centering the wrapper and this is the code i came up with:

body { font-family: Times; font-size: 14px; color: #000000; background-color: #000000; margin: 0px; padding: 0px; }

#main
{
width: 930px;
background-color: #000000;
height: 750px;
margin: 0 auto;
padding: 1px;
}

Isn't that the correct code. Im interested into which 1 is better practice!!

thanks

The second example is the normal method of achieving this requirement and to which you can add text-align:center to the body ruleset and text-align:left to the #main ruleset which will then center a block that is within body but for IE only as it's only meant to center inline elements. IE gets this wrong but it suits IE5+ which can't auto center.

So both would work but the second is more usual, adjusting body works in standards mode and can be a useful technique for layouts but in this instance I dont see the need to treat body as a wrapper element as such.

You should have a centred layout by now? or are there still specific problems?

yeh i think i have it centered now, you can check if you would like, i havent tested it in IE yet but works fine in safari and FF! If you see any problems could u please let me know
anyway thanks

#main
{
width: 930px;
background-color: #000000;
height: 750px;
margin: 0 auto;
padding: 1px;
}

Isn't that the correct code. Im interested into which 1 is better practice!!

Its bad practice to:
- use a font-family and not include the generic definition, e.g. one of serif, sans-serif or monospace.
- to use a pixel size as IE won't allow the user to resize it.
- to set a color the same as the background color

Its unecessary to put px on 0.

Its good practice to use short cuts where possible.

body { font: 87% "Times New Roman", Times, Serif; color: #ff0; background-color: #000; margin: 0; padding: 0; }