Support NeoGAF

[RedDwarf]

I'm trying to make a banner centered and can't seem to get it working right in IE. Mozilla is no problem, it's where I want it using the code below. In IE it sits to the top left and doesn't move regardless of changes I make.

#header {
	height : 95px;
	float : left;
	width : 100%;
	margin-left: 210px;
	padding : 0;
	background-repeat : no-repeat;
	overflow: hidden;
	background-image: url(../images/header.gif);

This is from a pre-made template, so I don't really want to get into adding html div's or anything if possible, I'd like to alter this in the CSS. Thanks!

 

[Ghost]

float:left seems like your problem, you need to put it inside a centered div

 

[EGM92]

dunno if this is right but

<demi`> margin-left: auto;
<demi`> margin-right: auto;
<demi`> text-align: center;

 

[RedDwarf]

Yeah, I have no idea why that's there. Removing it completely or changing left to right does nothing.

 

[aniki]

That "float:left;" is the most likely culprit.

EGM92: text-align isn't always the best option; it won't always work for images, for instance.

 

[RedDwarf]

EGM92, tried that, no change.

I hate that IE and everything else renders CSS differently, so annoying.

 

[APF]

If your structure is something like:

<#container>
	<#header>
		<p>FOO</p>
	</#header>
	<#content>
		<p>BAR</p>
	</#content>
</#container>

Then try:

<style type="text/css">
#container {
	width: 200px; /* Or whatever */
	text-align: center;
	background-color: black;
}
#header {
	width: 100px; /* Or whatever */
	margin: 0 auto;
	text-align: left;
	background-color: white;
}
</style>

 

[RedDwarf]

Thanks for the assist all, I ended up resizing the image as a quick fix while I was at work. I'll play around with the suggested code tonight.

 

[APF]

Oh, if your header image is a background-image on a 100%-width div, it's no wonder you're not getting the result you want. So stop doing that.