Smarty geting crazy

[david929]

Hello everyone!

 

 

It's been about 3 days now that I came across this problem but I'm still clueless. I'm trying to add two "borders" to the central column of my template but for a reason all I can get is the left border or the right border but having two sides at the same time is too much to ask

 

If I written border in coma it's because in my case, I can't user the css propriety "border:" because I want to set a background image instead of a border.

I already tought of the css "border-image" but it doesn't seems to be interpreted by a lot a broswers moreover I need a diférent image at each border.

 

So I tried this two path but each time with the same result:

 

- method #1

 

HTML code

 

 

<div id="columns">
<!-- Center -->
<div id="center_column" >
<div class="center-right">
<div class="center-left">
BLABLABLABLA
</div>
</div>
</div>

 

CSS code

 

.center-left {


background: url(../img/test.jpg);
background-repeat:repeat-y;
background-position:top left;
height:100% !important;
width:100%;
}
.center-right {

background: url(../img/test.jpg);
background-repeat:repeat-y;
background-position:top right;
height:100% !important;
width:100%;
}

 

Method #2

 

HTML code

<div id="columns">
<!-- Center -->
<div id="center_column" >
<div class="center-right"> </div>
<div class="center-left"> </div>
BLABLABLABLA
</div>

 

CSS code

 

 

.center-left {

background: red;
background-position:top left;
height:100% !important;
width:3px;
position:absolute;
left:0;
}



.center-right{

background: red;
background-position:top right;
height:100% !important;
width:3px;
position:absolute;
right:0;
}

 

 

RESULTS:

 

In both case I'm getting a nice red right border, it doesn't matter in wich order the HTML code is written. The only solution to get the left border is to write:

 

 

.center-right{

 

background: red;

background-position:top left;

height:100% !important;

width:3px;

position:absolute;

right:0;

}

 

 

But the contrary is false, mean that if I take the .center-left class and that I put it at the right nothing happen...

 

Why do I think that Smarty is messing with my css ?

 

When I look to the css code with biult-in Chrome tool or the with Firebug, I can see that the css instruction of the non-diplayed border are gone. All I get is:

 

.center-right{ }

 

If I edit the css in navigator "view" mode and I manualy inser the right css instruction ( see above) the magical is back and I can finaly see my two borders... SUPRISING isn't it ?

 

I'm really counting on you because I've never heard of mysterious css instructions disapearing and I just don't get it...

 

 

Please ask me question if you need any info to help me with this incredible problem.

 

Big thanks to all of you !

 

David

 

Edit: Version Presta 1.4.9

host: OVH shared server (I often get html error 500 by the way )

Edited October 8, 2012 by david929 (see edit history)