CSS centralize container

what is the best way to centralize your content cross-brouwser?

[bwakkie]

Hi,

I have the following problem: I want to centralize my content via CSS but Ie gives me problems

This is what works in firefox, it gives a centralised container in the middle of the brouwser. In IE it givestrage effects, Everything in vocused in the left-top corner and the container is half the size as in firefox.

#container
{
position:fixed;
top: 50%;
left: 50%;
width:44.133em;
height:31.613em;
margin-top: -15.8065em;
margin-left: -22.0665em;
background-color:white;
overflow: visible;
}

This is what works in firefox, it gives a centralised container in the middle of the brouwser. In IE it gives a strage effect as the container is half the size and the container is vocused in the left-top corner.

so I needed to hack a bit to get the container as big (I doubled the em values for IE! Never heard of this problem before...):

#container /*IE hack...*/
{
position:fixed;
top: 100px; /* does not work */
left: 200px; /* does not work */
width:88.266em;
height:63.226em;
margin-top: -31.613em; /* does not work */
margin-left: -44.122em; /* does not work */
background-color:white;
overflow: visible;
}
body>#container /*...as IE can't understand this*/
{
position:fixed;
top: 50%;
left: 50%;
width:44.133em;
height:31.613em;
margin-top: -15.8065em;
margin-left: -22.0665em;
background-color:white;
overflow: visible;
}

So now the container is in both brouwsers equal. But still the container is not centralized in IE.

I am useing "em" values by the way to be able to zoom in or out (press [cntr] while "rolling" your mouse up and down) which gives even an other strange problem that needed a hack:

In IE the difference between 2 font sizes (normal-smaller or nornal-bigger) was huge (way to big!) so you need to add this hack:

html {
font-size: 100%; /* IE hack */
}

thanks,

Bastiaan

[JAB Creations]

*sighs* IoI...

Well what do you have right is that IE is the problem! So you're only a little off. ;)

First off is the answer you're looking for...
IE conditional comments...

[msdn.microsoft.com...]

Make sure you read that page thouroughly!

---

split to new thread

Next off, this # and ID usuage with CSS has got to stop!

Correct CSS ususage...
<span class="this">
span.this {}

Reserve using ID's for JavaScript and bookmarks as IDs are allowed each only once per page.

split OT comments to new thread [webmasterworld.com]

[edited by: SuzyUK at 9:04 pm (utc) on Nov. 1, 2005]
[edit reason] thread split [/edit]

[Fotiman]

To center your container, try the following instead:

body
{
  margin: 0;
  padding: 0;
  text-align: center;
}
#container
{
  padding: 0;
  margin: 0 auto;
  width: 44em;
  border: 1px solid red;
}

Note that the width is required to get this to appear centered.

Hope that helps.

[bwakkie]

Jab:
You are right about the ID '#' part. I will think about it next website ;)
I am not so sure I like to tweek my html pages with Conditional Comments. I only want to tweek CSS you see.

Fortiman:
This will center the container only horizontally indeed but what i try to do is centralize it vertically too.

[bill]

Jab:
You are right about the ID '#' part. I will think about it next website

Actually he's not...at least according to the W3C standards. You might want to refer to the thread that SuzyUK split off above: Usage of ID selectors in CSS [webmasterworld.com]

[bwakkie]

no one knows a solution for my problem?

Centralise a container vertical and horizontal with css?

thanks

[Fotiman]

Ah, didn't realize you wanted vertical. Sorry, I don't know how to do that. :-/

[firstreflex]

You could try this:
wrap #container in another div (#align)

#align{
position:absolute;
top:0; /* For IE Mac */
left:0;
}
/* Hide from IE Mac \*/
#align{
top:50%;
width:100%;
margin-top: -15.8065em;
text-align:center;
min-width:44.133em;
}
/* End hide */
#container{
width:44.133em;
height:31.613em;
margin:0 auto;
text-align:left;
}

[bwakkie]

I think that did the job, it works like a charm now in FF and IE!

thanks,

Bastiaan

/*Centralized container in Horizontally and vertically direction (and scalable)*/
#align{
position:absolute;
top:0; /* For IE Mac */
left:0;
}
/* Hide from IE Mac with backslash hack -> \*/
#align{
top:50%;
left:50%;
margin-left: -22.0665em;
margin-top: -15.8065em;
text-align:center;
width:44.133em;
}
/* End hide */
#container{
width:44.133em;
height:31.613em;
margin:0;
text-align:left;
background-color:white;
}