Could a CSS expert please tell me what is wrong with this?

[lilymc]

Once again, please forgive this n00bish question, but I've tried lots of different things and I'm still having the problem.

The 2 background images in the main section are not quite centered. Neither is the Flash header, but I was able to center that by adding padding to the left.

I can't do that with the background images though, because then in IE6, it goes too far to the right.

I would think there would be a simple 'center' code with CSS, but apparently whoever invented CSS figured that would be too easy. :| I've used margin: auto, on just about everything, but it's still not centered.

Here is the code:


body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
margin: auto;
}

body {
margin: 0 auto;
background-image:url(../images/white-turquoisebg.jpg);
background-repeat: repeat-x;
background-color: #1C6C8E;
}


a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #EEBE2D;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F1CB56;
}
a:hover {
text-decoration: underline;
color: #EEBE2D;
}
a:active {
text-decoration: none;
color: #EEBE2D;
}

#wrapper {
width: 915px;
height: 870px;
margin: 0 auto;
margin-top: 25px;
background-image:url(../images/mainbg-white8.jpg);
background-repeat: no-repeat;
background-position: center center;
}

#flashcontent {
width: 100%;
height: 222px;
padding: 0;
margin: 0 auto;
padding-top: 10px;
padding-left: 10px;
}


#main1 {
width: 870px;
height: 430px;
margin-top: 0px;
margin: auto;
background-image: url(../images/ltblue-main1bg.jpg);
background-repeat: no-repeat;
padding-bottom: 5px;
background-position: center center;
}

#main2 {
width: 870px;
height: 180px;
margin-top: 10px;
margin-bottom: 0px;
margin: auto;
background-image:url(../images/tealmain2bg.jpg);
background-repeat: no-repeat;
background-position: center center;
}

If you notice any other mistakes in the code, please let me know.

Here is the link to what I have so far on the page: { click } (http://www.starryskymedia.com/waves_fundraising/index2.html)

Thanks!

[MTsoul]

It looks fine to me. What's wrong with it? The images look centered. In what browser are you seeing the problem?

[lilymc]

The light blue and the dark teal background images are what I was talking about... there is more white space on the left, than on the right, at least when I see it. I'm using Firefox.

In IE6, it's the opposite... there's more white space on the right, than on the left.

lol... What browser are you using?

thanks.

[MTsoul]

I'm using Opera :love: that's why it looks perfect. :hugegrin:

I see what you are talking about. IE and Firefox center background images slightly differently. One thing you could do to first set this matter straight is make the left and right borders the same width/padding. Since there's some shadow on the image on the right, it's wider. That might be one reason why it's shifting to the right or left.

If that doesn't work, hack it lol. With IE6, you can use the rule:


* html body #main {
blah
}

and Firefox will not recognize it. Then with that adjust the padding a bit more to center it.

[lilymc]

Great, I'll try that, thank you!

And i'm glad that it's working in Opera :D I haven't tested it yet in some other browsers... I'm on queue right now at browsershots.org.

Thanks again. :cool:

[lilymc]

Ok, the IE trick worked, and I changed the code to compensate for the centering problem with Firefox.

So now it looks pretty good in FF and IE... (not sure about the older versions yet)

but I'm just concerned now that it might be messed up in other browsers, since I added padding because of FF.

If anyone is on a Mac or using a less common browser, and happens to read this thread, please let me know. Thanks. :)

[MTsoul]

Download Safari for Windows if you want. That might not be what the current Safari on Mac looks like, but it should give you a rough idea.

[lilymc]

Well, I was too worried about it being messed up on other browsers, so I came up with another solution... I just put the 2 colored background images in with the main section background, so it's all one now.

Of course, I still will probably run into cross-browser issues when I put the content in, with the text and all that. But at least now I don't have to worry about the background images not aligning the same in all browsers. :p

thanks for your help, I'll probably use that IE hack for other things so that will come in handy. :}

[MTsoul]

You are welcome.

Yeah there are a few hacks like that. Google "CSS hacks" for a full list targeting each browser... People say they like Firefox, until they start developing sites for each browser.