233 replies to this topic

[Mister_dj]

npn2531, on 30 April 2010 - 09:17 AM, said:

Hey Thanks,

I can use this.

I thought you would ;-)
Perhaps you can add it to the next update?!

[Mister_dj]

There's a missing continue button on catalog/checkout_shipping.php
please check your demo sites too.

change
<span class="rightfloat" <?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>
to
<span class="rightfloat"><?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>


The checkoutbar (line) doesn't seem to show up on my local server on all of the checkout pages.
eg. on the checkout_shipping page the pixel width is set to 60

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent"><?php echo CHECKOUT_BAR_DELIVERY; ?></span><br/>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_trans.gif', '60', '1'); ?></span>
<span class="leftfloat"><?php echo tep_image(DIR_WS_IMAGES . 'checkout_bullet.gif'); ?></span>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_silver.gif', '90', '1'); ?></span></span></span>
</div>

When I view the source it says it has a width of 1 pixel???

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent">Leveringsadres</span><br/>
<span class="leftfloat-silverpixel"><img src="images/pixel_trans.gif" width="1" height="1" border="0" alt=""></span>
<span class="leftfloat"><img src="images/checkout_bullet.gif" border="0" alt=""></span>
<span class="leftfloat-silverpixel"><img src="images/pixel_silver.gif" width="1" height="1" border="0" alt=""></span></span></span>
</div>

Any idea what this might be?

[LinusIT]

What a fantastic addon this is, just what I've been looking for

I have a few questions which I can hope you can help me with please

1) Was a solution ever found for the alignment issue with the infoboxes bottom image? The problem only occurs when there are more than 3 rows of product listings, see:

http://www.alpha-clear.com/catalog/index.php?cPath=3_10

Less than 3:

http://www.alpha-clear.com/catalog/index.php?cPath=3_12

The whole page shifts to the left when showing more than 3 rows. I cannot see what the problem is.

2) How can I add my own text/links to the categories box, I have tried the following, but it messes the entire layout up.

  $info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string);
  
  //$info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_ALLPRODS_SEO) . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES .'</a>');

3) My product descriptions have <ul> <li> & <p> in them, using this addon it ignores all of that code and displays in one block. How can I make it so it doesn't ignore these HTML tags.

4) When trying to validate the pages, it shows:

Quote

document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<span class="leftfloat"><h1>Welcome</h1></span>

Thanks

[npn2531]

Do these issues occur across the various browsers?

[LinusIT]

Hi

Problem 1 occurs in Firefox aswell but in the opposite manner. In firefox showing 3 rows or more is fine, however showing 2 or less the problem comes back. Strange how IE does the same but opposite.

Problem 2 occurs in Firefox aswell. The problem is when I try adding another line to the categories box using the method above, it puts an extra </div> in which screws everything up. I'd just like to add "All Products" link to the categories box.

Problem 3 occurs in Firefox aswell, all <p>Blah</p> <ul><li> are ignored and is displayed as one block of text.

I haven't tested this in any other browsers.

[npn2531]

The two problems may well be the same issue. The  <div> tags to the infobox are in geberated in includes/classes/boxes.php in the cssinfoBox and csstablebox functions. I suspect you have an extra <div> or </div> wrapped in something you have done, or perhaps I have missed a 'if' statement and you have activated the condition to turn on that condition.

Their is however a closing </div> tag at the bottom of each infobox in a conditional statement. Look for

$categories = "categories";
if ( $categories == "categories" ) {
	echo "</div>";
}

If my theory is correct then either adding another </div> at the bottom of the categories box or substracting the one  that is there now will 'fix' the issue(s).

Edited by npn2531, 10 May 2010 - 04:30 AM.

[LinusIT]

Thanks for your reply.

Here is what I have tried

$categories = "categories";
if ( $categories == "categories" ) {
//	echo "</div>";
	echo "";	
}

The result is the page layout remains ok but the categories box is wrong. Here is the code it outputs now:

<div class="infobox">
<div class="infoboxcontents">
<a href="http://server01/catalog/books-c-21.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">Books</a>&nbsp;(20)<br />
<a href="http://server01/catalog/dvds-c-25.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">DVDs</a>&nbsp;(1)<br />
<a href="http://server01/catalog/music-c-26.html?osCsid=f3be5d0c6de6029735123b8bb606db5a">Music</a>&nbsp;(1)<br /></div>
 
<a href="http://server01/catalog/all_products.php?osCsid=f3be5d0c6de6029735123b8bb606db5a" title="View All Products">View All Products</a></div>

Resulting look:

[img]http://www.linusit.co.uk/tmpimg/categories.jpg[/img]

I have not changed the categories.php file other than by adding this code:

  /* ALL PRODUCTS CODE */
  $info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_ALLPRODS_SEO) . '" title="' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES . '">' . BOX_INFORMATION_ALLPRODS_SEO_CATEGORIES .'</a>');

[npn2531]

I struggled with this same issue when I created the design. The solution is most likely going to be manipulating the CSS and the background images that form the box sides, images/tp-boxbody.gif.  and the box bottom, images/tp-boxfooter.gif.   What is happening is that there is an extra bit of margin or padding  between the elements that hold those background images. It is probably going to be a matter of altering, then,  a margin or padding in the stylesheet.

The relevant CSS in the stylesheet is probably:

.infobox{
background-image: url('images/infobox/tp-boxfooter.gif');background-repeat:no-repeat;background-position: bottom;
margin:0px 0px 0px 0px ;padding:0px 0px 10px 0px;
}

.infoboxcontents{
font-family: Verdana, Arial, sans-serif;font-size: 10px; margin:0px 0px 0px 1px;padding:5px 5px 5px 5px;
background-image: url('images/infobox/tp-boxbody.gif');background-repeat: repeat-y;
}

.infoboxheading{
font-family: Helvetica,sans-serif;font-size: 12px;font-weight: bold;color: #333333; padding:5px 0px 6px 5px;margin:10px 0px 0px 1px;	
background-image: url('images/infobox/tp-boxheader.gif');
background-repeat:no-repeat;
}  

[npn2531]

ps- if you arrive at a solution to this issue of the misaligned infobox border, I would like to see how you do it.

[npn2531]

Mister_dj, on 30 April 2010 - 01:45 PM, said:

There's a missing continue button on catalog/checkout_shipping.php
please check your demo sites too.

change
<span class="rightfloat" <?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>
to
<span class="rightfloat"><?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>


The checkoutbar (line) doesn't seem to show up on my local server on all of the checkout pages.
eg. on the checkout_shipping page the pixel width is set to 60

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent"><?php echo CHECKOUT_BAR_DELIVERY; ?></span><br/>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_trans.gif', '60', '1'); ?></span>
<span class="leftfloat"><?php echo tep_image(DIR_WS_IMAGES . 'checkout_bullet.gif'); ?></span>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_silver.gif', '90', '1'); ?></span></span></span>
</div>

When I view the source it says it has a width of 1 pixel???

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent">Leveringsadres</span><br/>
<span class="leftfloat-silverpixel"><img src="images/pixel_trans.gif" width="1" height="1" border="0" alt=""></span>
<span class="leftfloat"><img src="images/checkout_bullet.gif" border="0" alt=""></span>
<span class="leftfloat-silverpixel"><img src="images/pixel_silver.gif" width="1" height="1" border="0" alt=""></span></span></span>
</div>

Any idea what this might be?

[npn2531]

Mister_dj, on 30 April 2010 - 01:45 PM, said:

There's a missing continue button on catalog/checkout_shipping.php
please check your demo sites too.

change
<span class="rightfloat" <?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>
to
<span class="rightfloat"><?php echo tep_image_submit('button_continue.gif', IMAGE_BUTTON_CONTINUE); ?></span>


The checkoutbar (line) doesn't seem to show up on my local server on all of the checkout pages.
eg. on the checkout_shipping page the pixel width is set to 60

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent"><?php echo CHECKOUT_BAR_DELIVERY; ?></span><br/>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_trans.gif', '60', '1'); ?></span>
<span class="leftfloat"><?php echo tep_image(DIR_WS_IMAGES . 'checkout_bullet.gif'); ?></span>
<span class="leftfloat-silverpixel"><?php echo tep_draw_separator('pixel_silver.gif', '90', '1'); ?></span></span></span>
</div>

When I view the source it says it has a width of 1 pixel???

<div class="leftfloat">
<span class="leftfloat"><span class="checkoutbarcurrent">Leveringsadres</span><br/>
<span class="leftfloat-silverpixel"><img src="images/pixel_trans.gif" width="1" height="1" border="0" alt=""></span>
<span class="leftfloat"><img src="images/checkout_bullet.gif" border="0" alt=""></span>
<span class="leftfloat-silverpixel"><img src="images/pixel_silver.gif" width="1" height="1" border="0" alt=""></span></span></span>
</div>

Any idea what this might be?

Thank's for pointing out the missing button. I'll take a look. Maybe it's within a conditional statement or something, ie on the odd side of an if else statement.

The pixel width issue is might be fixed by adding  px to the number.  For example change ('pixel_trans.gif', '60', '1') to ('pixel_trans.gif', '60px', '1px').  If that fixes it,   then perhaps the DOCTYPE being used is a bit  strict.

Edited by npn2531, 11 May 2010 - 04:08 AM.

[LinusIT]

The first issue I'd like to fix is the bottom image being out of line. I have spent the last week or so messing with it trying to fix it but to no avail. Instead I have tried to understand why it is going wrong.

If you have 2 or less rows of products it displays fine, showing 3 or more columns screws it up, moving the whole page to the left slightly. I have just tested my index page, which shows a few lines of text, this displays fine! If I copy & paste that text a few times more, it screws the page up.

I am now thinking the problem doesn't lie with the info boxes, the problem is to do with pagecontent. When the page has alot of text/3 or more columns the page box doesn't extend far enough down the page.

I don't know enough about css to be able to fix the problem, maybe with this bit of information it will give someone a fighting chance. I can provide screenshots to show my findings.

Do you have any clue on why using this addon the product description now ignores <ul>  <li>Blah</li>  </ul> code?

[npn2531]

Post a few  more screen shots and I will take a closer look at this. The last screenshot you posted really helped me to see what you are talking about. I'm about 90% sure this can be solved in the stylesheet.

The <ul> <li> issue is easy - Look right at the top of the stylesheet.css. You'll see this:

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }

This 'zeros' out everything. Note the references to ul, ol and li above. You either are going to have to delete these,  or add classes or id's to your ul and lu with cooresponding CSS entries.

[LinusIT]

Excuse me if this is long and the pictures are huge, trying to be as descriptive as possible.

What I have done is view the page in IE and copied the source code into a new html file, this enables me to have a play in Dreamweaver. If you look at the image below you can see the the bottom section is out of line.

[img]http://www.linusit.co.uk/tmpimg/cat_boxes.jpg[/img]

Now looking at the CSS code you can see that contents and heading have a left margin of 1px but the box itself (with the bottom image) doesn't have the 1px left margin.

.infobox{
background-image: url('images/infobox/tp-boxfooter.gif');background-repeat:no-repeat;background-position: bottom;
margin:0px 0px 0px 0px ;padding:0px 0px 10px 0px;
}

.infoboxcontents{
font-family: Verdana, Arial, sans-serif;font-size: 10px; margin:0px 0px 0px 1px;padding:5px 5px 5px 5px; background-image: url('images/infobox/tp-boxbody.gif');background-repeat: repeat-y;
}

.infoboxheading{
font-family: Helvetica,sans-serif;font-size: 12px;font-weight: bold;color: #333333; padding:5px 0px 6px 5px;margin:10px 0px 0px 1px;	
background-image: url('images/infobox/tp-boxheader.gif');
background-repeat:no-repeat;

I have used the addon home page as an example to show that the height of the page contents affects the info boxes. Both of the below images are the same file but with less text in the middle.

Broken - Lots of Text

Working - Little amount of Text

I don't know if this will help but here are some screenshots of the saved html file in dreamweaver.

Top

Bottom

[LinusIT]

I have commented out the ul li line at the top, this displayed the bullets but in the wrong place. Adding the following to the CSS file fixed the problem.

.pagebox-threefourths ul { margin-left: 30px; }

Any idea why the paragraph spacing is ignored:

<p>Paragraph 1</p><p>Paragraph 2</p>

Resulting in:

Paragraph 1
Paragraph 2

Instead of:

Paragraph 1

Paragraph 2

Thanks for all your help with this

[npn2531]

LinusIT, on 12 May 2010 - 03:28 PM, said:

I have commented out the ul li line at the top, this displayed the bullets but in the wrong place. Adding the following to the CSS file fixed the problem.

.pagebox-threefourths ul { margin-left: 30px; }

Any idea why the paragraph spacing is ignored:

<p>Paragraph 1</p><p>Paragraph 2</p>

Resulting in:

Paragraph 1
Paragraph 2

Instead of:

Paragraph 1

Paragraph 2

Thanks for all your help with this

Find this in the stylesheet:

/* TEXT AND NAVIGATION  ////////////////////////////////////////// TEXT ELEMENTS//////////////////////////////////////////////////		BOF TEXT ELEMENTS   //////////////////////////////  */
a, a:hover, p, p.main, .main, .bold, .leftfloat, .leftfloat-right, .rightfloat, .leftfloat-databox, .right, .center,  ul, li, .moduleRow, .moduleRowOver, .moduleRowSelected, .pagebox-account, .pagebox, .pagebox-onethird, .pagebox-twothirds, .pagebox-halfwidth, .pagebox-threefourths, .pagebox-onefourth, .products-new, .categorylisting, .confirm-comments{
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  line-height: 15px;  
}

The line height for p is set there, to keep it consistent with the other elements. If you would like it to be unique, then pull it out of the above and set  p  individually.

[npn2531]

LinusIT, on 12 May 2010 - 02:58 PM, said:

Excuse me if this is long and the pictures are huge, trying to be as descriptive as possible.

What I have done is view the page in IE and copied the source code into a new html file, this enables me to have a play in Dreamweaver. If you look at the image below you can see the the bottom section is out of line.

[img]http://www.linusit.co.uk/tmpimg/cat_boxes.jpg[/img]

Now looking at the CSS code you can see that contents and heading have a left margin of 1px but the box itself (with the bottom image) doesn't have the 1px left margin.

.infobox{
background-image: url('images/infobox/tp-boxfooter.gif');background-repeat:no-repeat;background-position: bottom;
margin:0px 0px 0px 0px ;padding:0px 0px 10px 0px;
}

.infoboxcontents{
font-family: Verdana, Arial, sans-serif;font-size: 10px; margin:0px 0px 0px 1px;padding:5px 5px 5px 5px; background-image: url('images/infobox/tp-boxbody.gif');background-repeat: repeat-y;
}

.infoboxheading{
font-family: Helvetica,sans-serif;font-size: 12px;font-weight: bold;color: #333333; padding:5px 0px 6px 5px;margin:10px 0px 0px 1px;	
background-image: url('images/infobox/tp-boxheader.gif');
background-repeat:no-repeat;

I have used the addon home page as an example to show that the height of the page contents affects the info boxes. Both of the below images are the same file but with less text in the middle.

Broken - Lots of Text

Working - Little amount of Text

I don't know if this will help but here are some screenshots of the saved html file in dreamweaver.

Top

Bottom

Provide the screenshots without the dashed borders, just as you would like them on the page, as the borders themselves add misalignment and make it difficult to see what's going on. I suspect the solution may well be to place the border images in another element of the infobox, but I really think screwing around with margins and padding will work. One frustrating complication you will run up against is the difference in how IE calculates borders. Google 'CSS and Box model'. It is possible to add separate instruction for say IE7 in the stylesheet. (look at the header of www.clinique.com, find the stylesheet reference for one example of how this can be done.)

Perhaps a better solution is to create the box border in two pieces instead of three. Specifically combine the sides and bottom into one image, in some way, maybe. It would be overheight and slide under the boxheader (infobox header). That is getting sophisticated with the CSS, requiring learning how to position elements with CSS, and perhaps controlling the layering (hint: z-layer). But if you get the CSS down, you can literally design the webpage from the stylesheet.

[burt]

Search for "thrashbox oscommerce".  Might give you the way around this issue.

[LinusIT]

Thanks npn2531

As I said before my knowledge of CSS isn't great so I think I'm going to majorly struggle with that. As I understand it, I would have to mess about with boxes.php which again, im still learning and finding my way.

The borders you mentioned shouldn't cause any issues are they are only there to highlight the different areas.

Im certain the problem isn't to do with the infoboxes anymore. I have played and played with various files etc and the page height is what's causing the problem. I know we are only talking about fixing a 1px alignment issue but it's bugging me and I'd really like to fix it. I don't want to put my store online until the problem is fixed, I will keep trying what I know

[LinusIT]

burt, on 13 May 2010 - 08:09 AM, said:

Search for "thrashbox oscommerce".  Might give you the way around this issue.

I'm positive the problem is with the page height as this affects the info boxes. However I really like the these boxes, are they compatible with OsCommerce v2?