I have something odd happening with css related to a home page. In the code for tpl_main_page.php, I have this code:
<div id="indexCenter">
<div id="shrunkIndex"><a href="http://www.balloonforkids.com.au/collection/scotch-soda/shrunk-s14"><img src="http://www.balloonforkids.com.au/collection/images/ss_index_trans.gif" width="422" height="600" alt="trans"></a>
<div id="shrunkNav"><a href="http://www.balloonforkids.com.au/collection/scotch-soda/shrunk-s14">SHOP BOYS</a></div></div>
<div id="centerBox">
<div id="logoIndex"> </div>
<div id="textBox">1017 High Street Armadale<br />Melbourne, Victoria, Australia, 3143<br /><br />
t. 039822 3736<br />e. [email protected]</div>
</div>
<div id="rbelleIndex"><a href="http://www.balloonforkids.com.au/collection/scotch-soda/rbelle-s14"><img src="http://www.balloonforkids.com.au/collection/images/ss_index_trans.gif" width="422" height="600" alt="trans"></a><div id="rbelleNav"><a href="http://www.balloonforkids.com.au/collection/scotch-soda/rbelle-s14">SHOP GIRLS</a></div></div>
</div><!-- end indexCenter -->
with css in index_home.css:
#indexCenter {width:1214px;margin:0 auto;margin-top:100px;display:inline !important;}
#shrunkIndex {width:422px;height:600px;float:left;background:url(images/shrunk_index.jpg) no-repeat;border: 1px solid #616161;box-shadow: 5px 5px 3px #212121;}
#centerBox {width:350px;height:600px;float:left;}
#logoIndex {width:300px;height:400px;margin:0 auto;background:url(images/logo.png) no-repeat;margin-top:40px;}
#rbelleIndex {width:422px;height:600px;float:left;background:url(images/rbelle_index.jpg) no-repeat;border: 1px solid #616161;box-shadow: 5px 5px 3px #212121 !important;}
#shrunkNav {width:130px;float:left;color:#000;margin-left:170px;margin-top:30px;display:inline !important;}
#rbelleNav {width:130px;float:left;color:#000;margin-left:170px;margin-top:30px;display:inline !important;}
#textBox {width:300px;float:right;color:#000;display:inline;font-size:1.2em;}
I do not want any of these elements appearing on any subsequent page. But if I add, for example (it applies with any element)
#indexCenter {display:none;}
to stylesheet.css
that addition to the stylesheet also removes the whole #centerBox element from the index page.
I can't help but think there is some stupid error, but after several hours, I cannot see it. Getting very messy.
#textBox also appears on the subsequent pages, and cannot be removed by 'display:none' in stylesheet.css.
Apologies for the long post, but can anyone see what I can't?


Reply With Quote
