Mon, 2004-10-11 17:14
Hello All,
Before I get to my teeth pulling problems I just want to send out some thanks to all the people that make this site the great resource that it is. I was new to CSS just over 6 weeks ago but with the help of some of the great members here and with my many hours of practice I feel I am making real steps forward with my career.
To prove this point I was recently given my first paid work in over 12 months! and it this site that brings me here today. I am having trouble getting the damn thing to look right in as many browsers as possible. This is a topic brought up time and time again I know but as you all know by now it is probably the biggest obstacle to CSS newbs like myself.
The site in question is here: http://www.guydavies.eclipse.co.uk/mjelliott/
And the CSS: http://www.guydavies.eclipse.co.uk/mjelliott/css/styles.css
IE PROBLEM FIRST
Until just this morning I thought I had IE cracked, but that was until I changed my resolution to something a little higher and found out that the footer was not sitting at the bottom of the window in each page as I thought it was. I can now see that on some pages it sits at the bottom of its DIV container but that it isn't at the bottom of the screen where I want. Can anyone see where I have gone wrong here? Note: Just to clarify I want the header at the top of the screen (as it is) but I then want the footer at the bottom of the page without a gap between itself and the bottom of the browser window as it does on certain pages now with the paper background in between.
NOW FOR FIREFOX/SAFARI/ETC
Where do I start? You should probably look for yourself. The site renders nothing like it's IE counterpart at all. What would be ideal is if someone could spare the time (even across a few nights) to chat to me on MSN/AIM and help me sort this mess out. If you do not have the time but do know of some code changing that would help then please post it here and I will be forever grateful.
I look forward to your continued support and thank in advance all those that are able to help me out. 
Guy Davies
Mon, 2004-10-11 23:43
#1
The age old topic of cross-browser rendering!!!
Guy,
The reason it's looking a mess in FF is due to two main reasons;
1/ You need to center the page correctly, remove those margins you have in the body and replace with {margin:0;}also to center for IE5 add text-align:center; then in the main wrapper /container use {margin:0 auto;} or or {margin-left:auto; margin-right:auto;} and align the text left to bring the text back to the left .
2/ The problem with the right menu is due to the fact that FF is correctly handling nested floats they are not meant to expand the containing div; the fact that they do in IE is an error if you wish a div to expand to enclose a float you have to give it a clearing element that forces it to expand around it; the best solution is to be found here as devised by Tony, a simple search on "clearing fix" or "containing floats" should find it.
You've done well for six weeks of study but don't get complacent I would suggest that getting to understand floats as completly as possible is vital they are tricky little buggers but essential for layouts
and it does help to understand the true purpose of the float element which is actualy for text wrapping hence the correct way it will break out of a container otherwise you wouldnt have blocks of text wrapping around an image as in publications from where the float concept originated from.
Fix these two problems and you almost home dry, the footer may have something to do with the natural margin of the block level <p>
being used.
Hope this is of some help,
Hugo.