View Category Titles Dissapearing

[Guest m-w-d]

In Cube Cart 3.0.5 viewing with IE 6.0.2

Clicking the view category on left returns a washed out title. Refreshing doesn't help. Most times it's halfway shown. Changing skins doesn't help either. It did this on 3.0.4 also. And does it on several computers I use.

If I highlight it I can see it.

If I highlight it several times it will appear.

Sometimes it shows up totally washed out. And the box isn't aligned.

No mods on this version. Any ideas as to what is going on.

It doesn't seem to have this problem in Opera or Mozilla.

[markscarts]

IE peekaboo bug - problem in browser, not CubeCart.

I like to add a little extra space between the title and the category rows.

But for the peekaboo bug, it is caused by "float: left;" in the styles.

Go into styleSheets/layout.css and styleSheets/style.css and search for all instances of float

If there is no line in that section like position: relative; then add it. That should solve the peekaboo problem everywhere

Credit goes to convict for first posting this info; he knows a great deal about browser issues, CSS, XML and PHP :D

[Guest m-w-d]

Thanks for the info. Forgot about that but when I popped up my css editor I saw the float/IE warnings.

Most float lines contained the position relative statement. Only one didn't so I added it. Didn't fix it.

Can you point me to the page and code area where I might try adding some extra space?

I know the bug is in IE but a lot of people use IE and that little snag grates on me.

Thanks

[markscarts]

Did you check both stylesheets? style.css, layout.css

First, just double-check that you got them all; there should be at least three between the two stylesheets, I think.

Second, open styleTemplates/content/index.tpl and find:

Next, edit the next division below:

	<span class="txtContentTitle">{LANG_LATEST_PRODUCTS}</span>

  <div>

Add a margin in the second division, like this:

	<span class="txtContentTitle">{LANG_LATEST_PRODUCTS}</span>

  <div style="margin-top:15px">

The extra space looks better, IMO, and gives more room for IE to display the title  

<div style="float: left; text-align: center; width: {VAL_WIDTH}px;">

Like this:

<div style="position:relative;float: left; text-align: center; width: {VAL_WIDTH}px; height: xxxpx;">

The "height: xxx" will vary depending on the size of your images and lines of text in your prod titles; specifying a height will keep the floating display even ;)

[Guest m-w-d]

Possible I didn't get them all. Layout contained a couple of float statements that did have position statements so I added them.

When I got to styles it contained a float "right" statement. Based on your original post saying the prob was caused by float left...... I didn't touch it. So I made no edits to the style css.

About to go to work and I will download the sheets and try these variations you have suggested.

I appreciate the help and the quick response.

If you have a comment as to whether I should or should not mess with the float "right" statement.... please let me know.

thanks again

[Guest m-w-d]

To no avail. No matter what I have tried it still exists.

It's like a blank white box is masking the title because it moves as I move up and down the page.

It is related to "subcategories".

I deleted the sub categories and the title displays fine.

The minute you add a subcategory a box is created that contains the file folder and something related to that box starts masking the title.

[markscarts]

Hi m-w-d!

Did you make the changes to styleTemplates/content/index.tpl?

Can you post a copy of the section you changed in styleTemplates/content/index.tpl?

[markscarts]

:rolly: <slapping myself against the head>

Sorry, I was busy solving the same problem in latest products display

IMO, the best way to solve this is to add a space beneath .txtContentTitle

This will give you some space beneath all the main titles on your site. I do not like titles crowding content, so this is the way I would do it . . . the extra space will be seen beneath titles site-wide:

In style.css FIND:

.txtContentTitle {

         font-family: Verdana, Arial, Helvetica, sans-serif;

         font-size: 110%;

         font-weight: bold;

         font-style: italic;

         color: #FF3300;

}

ADD this line, between the color line and the closing curly bracket:

margin-bottom: 10px;

The new code should look like this:

.txtContentTitle {

         font-family: Verdana, Arial, Helvetica, sans-serif;

         font-size: 110%;

         font-weight: bold;

         font-style: italic;

         color: #FF3300;

         margin-bottom: 10px;

}

Now, the "10px" is just a guess. You can adjust that number to adjust the amount of space that you have between the titles and the content. Higher the number, greater the space, vice versa

If this does not work for you, or you'd rather have a different solution, let us know.

[Guest Ammoguns]

I am using CubeCart 3.0.8 and this problem still exists with IE and is not solved by any of these fixes recommended. The title is still washed out with sub categories even with the added margins. My IE is 6.0.2900.2180.xpsp_sp2_gdr.050301-1519. I went as high as 50 with ( margin-bottom: 25px;) and modified all the floats including the right and did the index mod as well. I am also using 1024 x 1280 on my display.

[markscarts]

Ammo Guns, this problem is due to the IE peekaboo bug, I have repaired the same many times. IE is "effed up" in reference to the float property in CSS, you can read about this all over the web. And yes, it exists in all versions of CubeCartâ„¢ because this is not a software problem it is an IE browser problem.

As to none of these fixes working: I have found that locating the offending part of the code and fixing it is not as simple as I thought when posting this in November 2005. In posts made in December, I discovered other areas that need to be edited to fix some of these problems. CubeCartâ„¢ makes extensive use of the float property, both in the stylesheets and in in-line styles found in the templates - so the problem can be extensive, elusive, and time-consuming to cure.

I have made other posts about this which go into more detail. I have also been hired to fix such problems many times. Since repairing these cross-browser problems can be a time-consuming enterprise, the best tutorial on doing this will have to be a complete guide that covers all issues. I have not had time to write that guide yet.

AND NOW TO THE POINT

Generally, if the problem involves disappearing subcat titles and/or broken margins around the main content boxes, the two culprits are:

layout.css -

.boxContent Adding a position: relative; here will usually cure disappearing or broken borders around main content boxes.

style.css -

.txtContentTitle Adding a position: relative; here will usually cure disappearing or broken Titles like the sub cat title and the site docs titles

If these two edits do not cure the problem, you are forced to add the position relative statements to every element containing a float property in the stylesheets and also in in-line styles in the templates.

Repairing these problems are not always easy, but this "cure" or workaround, actually, does work when you can locate the source of the problem.

[Guest Ammoguns]

Being a new user to cubecart I did read the post's on this problem and your replies so I can understand everyones irritation for IE being a non standards following browser. Being that what it is, commercial software should still be tested so that it does work on all of the major browsers ex IE, that was my major frustration. Having vented my irritation I would like to thank all the contributers such as yourself that take the time and trouble to help newbies like myself through these trials and tribulations. Again your assistence is very much appreciated. Jim ;)