CSS Centering in IE7 and nothing else

@dasmon777May 18.2007

I have successfully managed to centre other design in CSS before without problems, but I need to centre and have CSS tables extend to equal heights.

For the life of me I cannot see what I am missing.

Annoyingly it works in IE7 and not IE6 or FF. ALso it looks fine in Dreamweaver and Expression???!!

I have stripped out as much HTML as I can and although I can get the two divs to extend to the same height – I cannot centre the main area.

BUT the footer is centered ok !!!

Please someone help me – I have spent nearly 4 days on this!!!

Currently testing at ~~[URL=”http://affiliatemode.co.uk”]~~www.affiliatemode.co.uk [/URL]

Plus files attached

~~[upl-file uuid=97db1ca1-854d-4294-99b9-1c0c903a81c4 size=5kB]~~Adeptflex.zip[/upl-file]

to post a comment

CSS

11 Comments(s) _↴

@ryanbutlerMay 18.2007 — #Looks identical to me in IE 7 & FF, except for a few minor padding and margin issues in the main content area.

@WebJoelMay 18.2007 — #Did you change something?? ? Attached is a screenshot of what I see from the URL provided, in Firefox 2.0.0.3.

Looks great in IE6. ?

[upl-file uuid=bd4a451d-b434-469d-aca8-7c4a2e7d6f03 size=25kB]ScreenHunter_2.gif[/upl-file]

@dasmon777authorMay 19.2007 — #There are two templates on the site design

One works perfectly - which is why it is perplexing me

The second - does not.

Navigate to Sectors and then government

TOTALLY Different - ?

@CentauriMay 19.2007 — #What is this (highlighted) at the start of the page code?[CODE][COLOR="Red"]ï»¿[/COLOR]<?xml version="1.0" encoding="iso-8859-1"?>[/CODE]

I also think that the xml declaration before the doctype drops IE into quirks mode.

@dasmon777authorMay 20.2007 — #it is a weird thing that happens everytime I upload a revision through FTP this annoying little character element appears

I have removed it but it still whacks it over to the left - I know there are some padding issues with the design, but they are minor compared to this centering one.

@CentauriMay 20.2007 — #It is very difficult to trouble shoot something that is buried in a mess of unnecessary, incorrectly used tables.............

But I [B]cannot[/B] see anything there that [B]IS[/B] going to centre the site - you have everything contained within #container div, but are not applying any proper centering techniques to it....

@WebJoelMay 20.2007 — #[CODE][COLOR="Red"]ï»¿[/COLOR]<?xml version="1.0" encoding="iso-8859-1"?>[/CODE][/QUOTE]
I've seen this before... -is there any '[I]whitespace[/I]' before " <?xml version="1.0" encoding="iso-8859-1"?>"
[COLOR="Red"]_[/COLOR]<?xml version="1.0" encoding="iso-8859-1"?>

[/QUOTE]?, whereby " [COLOR="Red"]_[/COLOR] "? I know that this will throw a 'warning' on TIDY validation ("whitespace before <?xml ~...>"

@dasmon777authorMay 21.2007 — #You are right Centauri - I think over time where i have tried different methods to make the thing work I have just buried and buried the content more and more.

I think I will start again I think and see if I can simplify things a little.

I read on another forum that to centre a page using CSS you need to text-align centre the container and margin 0 the inner-container.

Is that the best way?

Thanks Webjoel - I can't see a whitespace but it is using PHP code to ascertain the iso record - I will try to use a more manual solution, there must be something I have missed.

@CentauriMay 21.2007 — #I read on another forum that to centre a page using CSS you need to text-align centre the container and margin 0 the inner-container.[/QUOTE]

No, text align is used for aligning [B]text[/B], and does have the side effect of aligning inline elements. The correct way is to define a width on the container div, and set its side margins to auto - so "[COLOR="Navy"]margin: 0 auto;[/COLOR]" in the container's css will set the top and bottom margins to 0, and the side margins to auto. For IE to recognise this, you [B]MUST[/B] use a complete and valid doctype - but you [B]should[/B] be doing that anyway.

@Old_SageMay 20.2008 — #IE7 is just listening to the sound of a different drummer.

I have been having exactly the opposite problem with my time clocks pages:

http://www.sundialtime.com/timeclocks.asp

everything in the body of that page, beyond the title is supposed to be left-justified, and in any other browser it is. Just not in IE7.

On some pages I have created a separate css file just for IE7, and used tricks for IE7-only branching. But recently I ran across an even slicker way to dish out browser-specific css, using mod_rewrite. Mod_rewrite can detect the browser, and for certain browsers it can then grab a different version of the "normal" CSS file.

Oh, and just adding </center> inline does not have any effect on ie7 -- it still centers everything based on a parent property somewhere.

Old Sage

@CentauriMay 20.2008 — #Would have been better to start a new thread rather than reply to an old one. Always check you are using valid code via the html validator and css validator - fixing those errors may go a long way towards resolving the problems.

Also in #CSS _↴

2nd request for help How do you make the whole background clickable 2 column page and TABLES

Success!

Help @dasmon777 spread the word by sharing this article on Twitter...

Tweet This

CSS Centering in IE7 and nothing else

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Centering in IE7 and nothing else

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴