Perxplexing css problem

[godt]

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">&nbsp;</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?

[mc12345678]

Well, I thought that perhaps the div tags were unbalanced, but see that they are square, but did notice that your image tags are not ended (see below)
Are you sure your browser supports !important?

Beyond that, it would be much easier to help if the webpage was provided instead of portions of the overall code. There could be something else that is fouling the display.

I just tested something similar and was able to use display:none in stylesheet.css and display:block in one of the display sheets that followed.

<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">&nbsp;</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 -->

[rbarbour]

stylesheet.css rules get applied to everypage throughout the site.

I do not see anything wrong with your code or css

try wrapping your code

<?php if ($this_is_home_page) { ?>

CODE

<?php
} else {
// show nothing
} ?>

The image tags are valid HTML5 and are considered void elements

The change @mc12345678 offered is also valid XHTML tags

Either will work

[Design75]

If you create a css file called index_home.css, it will only be used on the homepage. That is standard Zen Cart in the same way you can make specific css files for almost any page

[godt]

stylesheet.css rules get applied to everypage throughout the site.

I do not see anything wrong with your code or css

try wrapping your code

<?php if ($this_is_home_page) { ?>

CODE

<?php
} else {
// show nothing
} ?>

The image tags are valid HTML5 and are considered void elements

The change @mc12345678 offered is also valid XHTML tags

Either will work

Much appreciated. I will try these suggestions.

[godt]

Very nice. The php code does the job alright. As an aside or two - I'm not clear about the implications of img tags being void elements: is the point there really that it doesn't matter if an image tag is closed with

>

as long as it isn't closed with

/> ?


and, where it is true that stylesheet.css rules apply to all pages, shouldn't a rule to the contrary in index_home.css override the stylesheet rule? If it doesn't, there must be something out of order, yes?

[mc12345678]

Very nice. The php code does the job alright. As an aside or two - I'm not clear about the implications of img tags being void elements: is the point there really that it doesn't matter if an image tag is closed with

>

as long as it isn't closed with

/> ?


and, where it is true that stylesheet.css rules apply to all pages, shouldn't a rule to the contrary in index_home.css override the stylesheet rule? If it doesn't, there must be something out of order, yes?

An image tag can end either way, the issue pointed out was to what degree of validation to try to meet. Html5 or XHTML. To my knowledge meeting XHTML does not void html5, but only meeting html5 means do not meet xhtml...

As for the stylesheet/index_home attribute, I implemented what I had described on a tag in a mega_menu. The hide on the stylesheet worked completely well for all things. The display:inline took some time to come into play even after clearing caches and the like. Tried different browsers even and the previous index_home.css code was not updated until about 12 hours later. I believe I had some online cacheing at the site that prevented the updaate but, there are a few things to consider.

One reason to handle it by php is that the extra content is never loaded to the browser, just the server to parse. Even if css is used to hide the information, it is still visible in the source, so things tonot be found should notbe "displayed". Also, and though a small fraction of overall code, including two lines in css increases the amount of data transmitted also. All things to consider in big scheme. I look at it as, I'm less likely to have to modify the css once set and that the code be left alone as much as possible. But that's not a 100% either way. Sometimes the this_is_home_page is a great way to go.

[godt]

I have had similar cache related issues with display:none. As you suggest, very good reasons for using that neat php solution. A fixed solution. Nice.

[mc12345678]

I have had similar cache related issues with display:none. As you suggest, very good reasons for using that neat php solution. A fixed solution. Nice.

And yet those cache issues ought to be temporary in the large scheme of things, unless there is some reason to modify the layout of a web page frequently (outside of initial/periodic development/revision) when would such a change be implemented. Further if php mod is the solution, then there is a lot of wasted processing used on implementing the unused portions of the css lookup for those type overrides.

My point being that every modification made to the source code is one more opportunity for something to go wrong during an upgrade where the process is essentially to replace the old files with the new files for functionality, and css used for display control provided the content being controlled is acceptable to be available (displayed or hidden) to everyone that can get to the page(s).

[rbarbour]

Further if php mod is the solution, then there is a lot of wasted processing used on implementing the unused portions of the css lookup for those type overrides.

I use per-page CSS stylesheets on almost every template I design and great for implementing different appearances for different pages.

My point being that every modification made to the source code is one more opportunity for something to go wrong during an upgrade where the process is essentially to replace the old files with the new files for functionality, and css used for display control provided the content being controlled is acceptable to be available (displayed or hidden) to everyone that can get to the page(s).

No solution is right or wrong as long as it works as intended IMHO

The HTML code added modifies the source code anyways, hence the suggestion to simply wrap it in the awesome and under utilized BUILT-IN: $this_is_home_page and $current_page_base functions of zen-cart.

I'm also pretty sure I've seen posts in the responsive template threads by the OP and this solution is even better for it will never be processed on any other page but the home page instead of processing it and then hiding it.