<![endif]--> displayed on-screen in IE7

conditional statement works in IE6 FF Opera Safari

[ChaosBurnt]

Hello, it's been a while since I was here, I don't tend to ask for help unless I am totally stuck, I am totally stuck and need to ask for some help please.

I am working on trying to get one of my vBulletin Skins (my Skins are all non-commercial) to 'play nice' in IE6, there are two blocks which contain a float left, center and float right, added into the mix is an image tag. The image tag in the logo section is of the Forum logo itself, which I want centered between the floats. The top tag is necessary for the Skin design allowing for a fluid layout.

This is how I am trying to get it to play nice in IE6.
The html:

  <!--[if IE 6]>
  <div id="top_block">   
    <div class="top-l"></div>
    <div class="top-m"></div>
     <div class="top-r"></div>
     <div id="top" style="text-align:center"><img src="$stylevar[imgdir_misc]/top-tag.gif" border="0" alt="" /></div>
  </div>
  <! [endif]-->
     
  <!--[if IE]><![if gt IE 6]><![endif]-->
  <div id="top_block">   
    <div class="top-l"></div>
    <div class="top-m" style="text-align:center"><img src="$stylevar[imgdir_misc]/top-tag.gif" border="0" alt="" /></div>
     <div class="top-r"></div>
  </div>
  <!--[if IE]><![endif]><![endif]-->
  <!--[if IE 6]>
  <div id="logo_block">   
    <div class="logo-l"></div>
    <div class="logo-m"></div>
     <div class="logo-r"></div>
     <div id="logo" style="text-align:center"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />$ad_location[ad_header_logo]</a></div>
  </div>
  <! [endif]-->
     
  <!--[if IE]><![if gt IE 6]><![endif]-->
  <div id="logo_block">   
    <div class="logo-l"></div>
    <div class="logo-m" style="text-align:center"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" />$ad_location[ad_header_logo]</a></div>
     <div class="logo-r"></div>
  </div>
  <!--[if IE]><![endif]><![endif]-->

The css:

/* top cells ================================== */
#top_block {
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  clear: both;
  overflow:hidden;
}
.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 {
  background-repeat:no-repeat;
  width:100%;
  height:36px;
  padding:0px;
  margin:-36px 0px 0px 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;
}
/* ================================================================================ */
/* logo cells ================================== */
#logo_block {
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  clear: both;
  overflow:hidden;
}
.logo-l {
  background-image: url(images/skins/finite/misc/logo-l.gif);
  background-repeat: no-repeat;
  height: 105px;
  float:left;
  width: 70px;
   margin:0px;
  padding: 0px;
}
.logo-m {
  background-image: url(images/skins/finite/misc/logo-m.gif);
  background-repeat: repeat;
  height: 105px;
  margin: 0px 70px 0px 70px;
  width: auto;
  padding: 0px;
}
#logo {
  background-repeat:no-repeat;
  width:100%;
  height:105px;
  padding:0px;
  margin:-105px 0px 0px 0px;
}
.logo-r {
  background-image: url(images/skins/finite/misc/logo-r.gif);
  background-repeat: no-repeat;
  height: 105px;
  float:right;
  margin-top:-105px;
  width: 70px;
  padding: 0px;
}
/* ================================================================================ */

This does exactly what I need it to do, but in IE7 there is an <![endif]--> displayed on-screen (in text form) under the top block and the logo block. I am guessing my conditional is written slightly incorrectly but I have been searching for hours on end now and from all accounts my conditionals are correct, but obviously they cannot be due to the problem in IE7.

I realise that I am supposed to be setting conditions for css alone but vBuletin Skins don't work the same way as a standard web layout, this is the only way I can test for IE6, that I can think of that is.

Can anyone see what I have got wrong in my conditionals and what the solution is please.

[ChaosBurnt]

Scratch all that, here's the problem now:

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>

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 have managed to fix the problem in all browser, BUT, in FireFox the topbar top-tag refuses to align central!
The same applies for the logo block!

Can anyone tell me how I align the top-tag image in both IE and FireFox?

[edited by: ChaosBurnt at 5:26 pm (utc) on Mar. 9, 2009]

[swa66]

Isn't it far easier to to give the outer block "position:relative" and the dimensions to occupy what you want it to occupy.
The position:relative of the parent than serves as reference for the position:absolute children.
You can then put them at any distance from any of the edges of the parent.

I think that's much easier than playing with negative margins, floats and whatnot. In all honesty figuring out where you want the html to show up is far from trivial the way it's done now.

[ChaosBurnt]

Using absolute is not the answer with forum skinning, some people like the skin to be fixed width whilst others demand it be fluid. The skin needs to be capable of being both, as a fluid layout there is no way of knowing the dimensions of a given screen width.
I opted for negative margins and floats for just that reason, to make the skin as flexible as possible. One could argue that I could make two variants of the same skin, one fixed and one fluid, but you see I am still stuck with a fluid design to contend with, so absolute positioning isn't really the answer.

[swa66]

I think you underestimate what absolute positioning can do.

E.g.: something to go to the right bottom (wherever it is):

    right:0;
    bottom:0;

e.g. to occupy the 1/2 the width in the center:

    right:25%;
    left:25%;

(note: IE6 needs scripted help to do this, try IE7.js if you need it)

And many more. You can even combine the position with margins (even negative ones)