CSS Forum

**scunt** · 03-31-2009, 10:30 AM

I have been going crazy, trying everything that Google and other forums suggested and just failing miserably. I've come here because I've been using answers from this forum for a while and they have always been incredibly useful.

The website url is http://www.scunt.co.uk -

I have done browser tests and in pretty much every browser it loads fine, with the main table centered - however, in IE7 it hugs the left of the browser window.

This is, from what I can tell a fairly common problem, its just that none of the fixes i've found work for me.

The website is powered by the CMS Drupal. I have reproduced the start of the CSS below. From what I understand

I am a noob, and deserve everything i get, so if anyone could find it in their hearts to help me, i can reward you with love and kudos.

thanks in advance xx

dom

Code:

html-main, .body-main	{
background-color:#ffcccc; 
	padding: 0;
	margin: 0 auto;
	width: 940px;
	font-family: Verdana, Georgia, "Times New Roman", Arial, Tahoma,  sans-serif;
	font-size: 0.9em !important;
	color: #181818;
	border-left-style: solid;
	border-left-width: 0px;
	border-right-style: solid;
	border-right-width: 0px;
	border-bottom-style: solid;
	border-bottom-width: 0px;

}


.body-main
{	

display:block;
text-align:center; 
margin:0 auto 0 auto;
background:transparent url("images/bg_white.gif") repeat-y center top;
	}


.make-it-center
{
margin: 0 auto;
text-align: center;
height: auto;
width:940px;
background-color:#f5f5f1;

}

.clear
{
	clear: both;
	font-size: 0px;
	line-height: 2px;
	visibility: collapse;

}

a{color:red; text-decoration:none}


a:hover{color:red; text-decoration:none;}


a:visited{color:red; text-decoration:none}




p
{
	margin: 0px;
	padding: 0 0 10px 0;
}


/** headers **/
h1, h2, h3, h4, h5, h6 {line-height:normal;}

h1, h1.title
{font-size:1.7em; font-size:18px; margin-bottom:0px; font-weight:normal;}

h2{
font-size:1.9em;
font-weight:normal;
font-family: Verdana, Georgia, "Times New Roman", Arial, Tahoma,  sans-serif;
color:#ff6666;
padding:0;
margin:0.2em 0 0.2em 0;
}

h2 a{color:#f9999b;}

.block h2, .block  h2.title{
font-size:1.5em;
padding:5px 10px;
color:#fff;
background-color:#747474;
margin: 0 0 0.5em 0;
}

.block h2 a, .block h2.title a{color:#fff; font-size:-1}
.block h2 a:hover, .block h2.title a:hover{color:#bbbbbb;}

.sticky h2, .sticky h2 a{color:#343434 !important;;}

**LadynRed** · 11:07 AM

The margin: 0 auto; along with the defined width IS all you need for centering in IE7. Something else has to be affecting it besides the section of code that you posted.

You also have a number of validation errors - fix those and the problem might correct itself.

**scunt** · 03-31-2009, 11:01 AM

right.. eep. - i'l have another look.

thanks x

**scunt** · 03-31-2009, 11:03 AM

could it be another section of the same css overriding it?

**LadynRed** · 03-31-2009, 11:10 AM

Not that I could find using firebug. I would, however, remove the width and the margin:0 auto; from the <body>, it's really not necessary and leave the width and margin statement on your main container.

**scunt** · 03-31-2009, 12:55 PM

that was hung over from when i tryed to add 0 auto to everything in the vein hope that one of them would center it in IE. I will remove it in a bit-

maan, i hate IE so much - i wish people would just boycot the **** thing

**LadynRed** · 03-31-2009, 04:01 PM

You and almost every other web designer

IE8 is a huge, huge step forward - unfortunately it'll be a while before we'll be rid of IE6 and even 7.

**scunt** · 03-31-2009, 06:47 PM

well, that sounds reassuring

i wonder if my website will load up centered in 8.

frankly i'm working under the principle that if people dont have a decent browser, they dont deserve to see the site properly =D

direct-action!

xx

**LadynRed** · 04-01-2009, 12:12 PM

Chances are pretty good that it'll look fine in IE8 because it finally renders more like Firefox - way more standards compliant.

I only have access to IE7 here on our sandbox pc, so I'll have to try to look at the problem from home.