Graphic central alignment problem

[Phantasmagoric]

I'm having trouble getting some graphics to align centrally in both IE and FireFox and I need to ask for some help please.

If you look at my main site in IE6/7 the top block and logo block are aligned, but if you view it in FireFox there is a drift to the right!
http://skins4forums.com/vbskins/index.php

I am using this as the html:

<div id="top_block">
<div class="top-l"></div>
<div class="top-m"></div>
<div class="top-r"></div>
<div id="topbar"><div style="text-align:center"><img src="$stylevar[imgdir_misc]/top-tag.gif" border="0" alt="" /></div></div>
</div>


and this as the css:

/* top cells ================================== */
#top_block {
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 100%;
clear: both;
}

#topbar {
background-repeat:no-repeat;
background-position:center;
width: auto;
height: 36px;
padding: 0px;
margin: -36px 0px 0px 0px;
}

.top-l {
background-image: url(images/skins/finite/misc/top-l.gif);
background-repeat: no-repeat;
float: left;
height: 36px;
width: 70px;
padding: 0px;
margin:0px;
}

.top-m {
background-image: url(images/skins/finite/misc/top-m.gif);
background-repeat: repeat;
height: 36px;
margin: 0px 70px 0px 70px;
width: auto;
padding: 0px;
}

.top-r {
background-image: url(images/skins/finite/misc/top-r.gif);
background-repeat: no-repeat;
height: 36px;
float: right;
margin-top:-36px;
width: 70px;
padding: 0px;
}
/* ================================================== ============================== */

I am trying to make my Skins play nice in IE6, the result ends up as FireFox wont play nice now, the top-tag img drifts over to the right in FireFox.
The same applies for the logo block!

Can anyone see what I'm getting wrong?

[Taragon]

I have to admit I haven't really screened all of the code, however this seems to work:
#logo {
background-repeat:no-repeat;
height:105px;
margin:-105px 0px 0px -70px;
padding:0;
width:100%;
}
#topbar {
background-repeat:no-repeat;
height:36px;
margin:-36px 0px 0px -70px;
padding:0;
width:100%;
}

PS. if you use FF, install Firebug. It's a lifesaver ;)

[Phantasmagoric]

I have firebug, it's not telling me anything I can use.

Adding the -70px will cause problems in IE, this I have been trying to figure out for 3 days now, nothing I do works, it's a real hair puller bug, and no-one on some webmaster sites seem able to resolve either, I'm well stuck!

[Taragon]

1st of all, please try this on a child style first, since I'm not exactly sure it'll work at your board.
I've changed the class and id names a bit for my personal use only.

Put this between your wrapper:
<div class="top_lft"></div><div class="top_rht"></div><div class="top_x"></div>
<div class="header_lft"></div><div class="header_rht"></div><div class="header_x"></div>
<div class="btm_lft"></div><div class="btm_rht"></div><div class="btm_x"></div>
CSS
.top_lft {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/top-l.gif) no-repeat;
float:left;
height:36px;
margin:0;
padding:0;
width:70px;
}
.top_rht {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/top-r.gif) no-repeat;
float:right;
height:36px;
margin:0;
padding:0;
width:70px;
}
.top_x {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/top-tag.gif) repeat-x scroll center top;
height:36px;
margin:0;
padding:0;
}
.header_lft {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/logo-l.gif) no-repeat;
float:left;
height:105px;
margin:0;
padding:0;
width:70px;
}
.header_rht {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/logo-r.gif) no-repeat;
float:right;
height:105px;
margin:0;
padding:0;
width:70px;
}
.header_x {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/logo.gif) repeat-x scroll center top;
height:105px;
margin:0;
padding:0;
}
.btm_lft {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/mft-l.gif) no-repeat;
float:left;
height:28px;
margin:0;
padding:0;
width:200px;
}
.btm_rht {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/mft-r.gif) no-repeat;
float:right;
height:28px;
margin:0;
padding:0;
width:200px;
}
.btm_x {
background:#000000 url(http://skins4forums.com/vbskins/images/skins/finite/misc/mft-m.gif) repeat-x scroll center top;
height:28px;
margin:0;
padding:0;
}
About Firebug, it's a great inline editor :)

[Phantasmagoric]

Works perfectly with IE6/7, FF, Opera, Safari and Google Chrome, needed to add an id div to each to compensate for that weird 3px border bug in IE6:

Like this:
<div id="topfill"><div class="top_lft"></div><div class="top_rht"></div><div class="top_x"></div></div>

#topfill {background:#000000 url(images/skins/finite/misc/top-tag.gif) repeat-x scroll center top;}

Now all of them are happy, you have been a life saver Cor, thank you very much for your wonderful help, I appreciate it immensely.

[Phantasmagoric]

Ah, well actually, after trying to apply these changes to my Dynasty Skin (a white skin) I found that the code isn't quite what I wanted it to be.

Sorry, I obviously wasn't being as clear as i should have been, my fault.

I need the logo to be an active link as it is in the default skin, the solution you gave me is using the logo itself as a tiling image, that's not quite right, and the top block is using the top-tag as a tiling image, I can see how that got confused by my poor explanation.

I will add two images here to better demonstrate what I need those two blocks to do, the first will be the two blocks as a fixed width, the second image is those same two blocks as a fluid layout.

In the fluid layout you can see the top-m.gif and the logo-m.gif acting as tiling images 'behind' the rest of the layout.

I've been trying to alter you solution to better suit how I need it to work but everything I try to do I just make a mess of it all, could I ask you to look at this again for me please?