CSS/XHTML Layout issue when rendering?

[Robtyketto]

My website when displayed locally in I.E 7 and Firefox has the layout output as I expected.

However when rendered with Dreamweaver and Geocities web hosting the footer looks different than expected as it is intended to be the same size as the header.

See page:-
http://www.geocities.com/raisin_smiles/index.html

The footer css code is as below (previous css does a clear:both to remove any other formatting)

#footer 
{
border: 1px solid #000000;
background: #CC99FF;
text-align: center;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}

In dreamweaver and Geocities the footer borders size is generated from the content with the text being aligned from the left.

Using the css margin settings I expected the footer to run across the whole of page with 20px left/right margins with the text centered in the middle (Which it does in I.E.7 and Firefox when ran locally).

If i use dreamweaver to change the width of the footer/div border it hardcodes the width xx px setting in the external css footer division.

Can anyone help me out, as I don't want to hardcode the width setting in as it could be run in any resolution?

Note: I have tried the width 100% in the css but the previous element as can be seen on website is the left column for pics (right column is the text) which only cover 1/3 of the left hand side of the site.

Hope that makes sense and someone can provide some help.

Thanks
Rob

[cfajohnson]

This is what I see in FireFox:

http://cfaj.freeshell.org/testing/raisin.jpg

There are also many validation errors on your page. Some of them may be unavoidable on Geocities, but they probably cause browsers to go into quirks mode which means inconsistent cross-browser rendering.

[Robtyketto]

This is what I see in FireFox:

http://cfaj.freeshell.org/testing/raisin.jpg

There are also many validation errors on your page. Some of them may be unavoidable on Geocities, but they probably cause browsers to go into quirks mode which means inconsistent cross-browser rendering.

Thanks for the piccy, I did validate them both (xhtml and css) with the online W3C Validator and none had errors.

I have done minor tweaks since then, so I will check it out.

I noticed that error if you don't maximise the screen (as the body of the text cannot be read without scrolling), to be honest as its a college assignment I dont think they will mind if you are forced to maximise the screen.

The xhtml validator came back with the following issue:-
No Character Encoding Found! Falling back to UTF-8

Also the doctype is transitional if that is an element to be considered.

[cfajohnson]

I noticed that error if you don't maximise the screen (as the body of the text cannot be read without scrolling), to be honest as its a college assignment I dont think they will mind if you are forced to maximise the screen.

I get that even with the screen maximized and even full screen.

The xhtml validator came back with the following issue:-
No Character Encoding Found! Falling back to UTF-8

I think that's because Geocities inserts a line before your page.

Also the doctype is transitional if that is an element to be considered.

I don't think that matters, but there's no reason to use XHTML rather than HTML and certainly no reason to use transitional on a new page. You're not transitioning from anything.

[Robtyketto]

Fixed adding

Width: 100%

to external css.

Issue resolved, I didn't efficently test my changes forgetting to upload the file.