Convert OSCommerce 2.2RC2a to table-less CSS

[npn2531 37]

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 37]

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 37]

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 May 11, 2010 by npn2531

[LinusIT 0]

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 37]

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 0]

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.

 

 

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 0]

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 37]

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 37]

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.

 

 

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.

[LinusIT 0]

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 0]

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?

[npn2531 37]

I am trying to reproduce the issue, but everything seems to be working. It is my understanding that if you have lots of text in an infobox, the bottom gets out of alignment?

 

Look at this test site, it has the OSC-CSS with the 'apple-style' template. I have crammed the search box with text and it holds up. I have also added lots of extra categories and the categories box holds up.

 

http://www.alpha-clear.com/oneclick/specials.php?language=en

 

Let me know if I have misunderstood the problem.

 

Again, to me it sounds like a padding and margins issue. It will not be page height . The padding and margins can get all interlocked, quickly in CSS. Try putting everything back the way it was when you first installed the Apple Template. (ie - just temporarily substitute the unmodified stylesheet from the Apple-Style template download.)

[LinusIT 0]

Resulting look:

 

 

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>');

 

Fixed:

 

The array was being closed off too soon, the ) was in the wrong place.

 

Here is the code I've used to successfully add text to the categories box

 

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

[LinusIT 0]

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.

 

Fixed:

 

Added the following code to the stylesheet which solved the paragraph issue across the board :)

 

p + p { margin-top: 1.0em; }

[LinusIT 0]

RESULT :)

 

I have fixed/sussed the issue of the infoboxes. We were both right, the problem was to do with the page height and the fix is playing with the margins.

 

The problem was the page shifting left when the content went further than the screen height, resulting in the vertical scroll bar appearing. Thus shifting the page left slightly and messing the margins up.

 

The first fix was to add the following to the body tag:

 

overflow-y:scroll;

 

This fixed the site in Firefox completely, however further fixes are required for IE which I haven't sussed properly yet.

 

Working code for Firefox:

 

.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;
}

 

Working Code for IE:

 

.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 0px;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 0px;    
background-image: url('images/infobox/tp-boxheader.gif');
background-repeat:no-repeat;
}

 

The only difference is 1px in the margins. The problem is when applying the fix for IE it breaks Firefox and vice versa.

 

I know how to apply stylesheets for certain browsers within a page but do not know how to apply conditional statements within CSS.

 

If I knew how to specify a certain margin for IE and a different margin for Firefox the problem would be solved 100%.

[npn2531 37]

Man, do you have persistence! These links below may help writting a conditional statement within the stylesheet now that you know where the issue is.

 

Here a few links.

Useful:

http://www.positioniseverything.net/articles/cc-plus.html

 

Not as good:

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

 

That first link looks like there may be something that can used within one stylesheet. Using two stylesheets would be a pain.

[LinusIT 0]

FIXED FIXED FIXED :)

 

I persisted with the issue because the CSS addon is great, so I refused to give up until fixed.

 

Here's the fix:

 

in /includes/template-top.php add the following just under <body>

 

<!--[if IE]>
<div id="IEroot">
<![endif]-->

 

in /includes/template-bottom.php add the following just above </body>

 

<!--[if IE]>
</div>
<![endif]-->

 

in the stylesheet use the following:

 

.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;
}

#IEroot .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;
}

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

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

 

Using the above fixes the info box issue for both Internet Explorer and Firefox, I haven't tested any other browsers as yet.

[LinusIT 0]

I have made several changes to the stylesheet which improve the look no end. I can't remember all that I have changed, would have to use a file compare program to find the changes.

 

If you'd like me to share it, let us know and I'll post a link or something.

[npn2531 37]

I have made several changes to the stylesheet which improve the look no end. I can't remember all that I have changed, would have to use a file compare program to find the changes.

 

If you'd like me to share it, let us know and I'll post a link or something.

Yes, I would love a link to the stylesheet. I would like to see how it improves the design.

[LinusIT 0]

I'll post a link to the stylesheet once I have finished tweeking it :)

 

Am so glad I've fixed to "shifting left" issue!

[npn2531 37]

I'll post a link to the stylesheet once I have finished tweeking it :)

 

Am so glad I've fixed to "shifting left" issue!

Here is another solution to the text in the search infobox.

in includes/boxes/search.php

 

find:

'text' => '<span class="leftfloat">'.tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . '</span><span class="leftfloat">' . tep_hide_session_id() . tep_draw_separator('pixel_trans.gif', '20', '10').tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '</span><div class="divider-short"></div>' . BOX_SEARCH_TEXT . '<br/><br/><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>

 

add a <div class="divider"></div> to the end so it looks like this:

 

'text' => '<span class="leftfloat">'.tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . '</span><span class="leftfloat">' . tep_hide_session_id() . tep_draw_separator('pixel_trans.gif', '20', '10').tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '</span><div class="divider-short"></div>' . BOX_SEARCH_TEXT . '<br/><br/><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a><div class="divider"></div>');

 

The class divider has the css property of clearing floats left and right.

[blonde_one 0]

Hi George, Just wanted to say thanks for this amazing contribution! Especially the info boxes, I couldn't take the tables within tables within tables anymore! I have converted all of my info boxes successfully with one minor issue with the shopping cart info box. I noticed that when products are added to the cart and are subsequently listed in the shopping cart info box an extra closing </div> tag is added within the table after the last </td></tr> where the products are listed, and above the total. I was wondering if anyone else noticed this?

 

Best Regards,

 

~ Mandy

[lindsayanng 4]

need some help with the osc to css button output.

 

I tried to add a contribution that basically adds a class of "rollover" to all tep_image_button instances via a simple change in the htmloutput.php file.. This essentially should turn all buttons into a rollver, but unfortunately it does not and i am THINKING it is because you have changed the html output..

 

Any thoughts on this??

 

 

here is the addon in question

[lindsayanng 4]

I think, in playing with the ability to roller, I have found some type of bug..

 

I was looking at your basic osc template and you seem to be calling ALL of your javascript files from outside of the <head> tags and within the <body> tags.. this is a major issue for most scripts because they need to be called first in order for them to work properly.

 

I have NO IDEA how this is happening but no matter where I place the script source code in the index.php file, they are ending up in the body and NOT in the head..

 

I think it has something to do with how you are calling the template top file and/or the header files?? I have NO CLUE..

 

I have basically tried adding my script source codes directly after the <head> tag in the index.php page AND tried adding it right before the </head> tag in the template_top.php

 

Any thoughts?? Cause the only javascript that seems to be working is the lightbox that you had pre-installed.. and lightboxes aren't really relient on that stuff..

[npn2531 37]

Hi George, Just wanted to say thanks for this amazing contribution! Especially the info boxes, I couldn't take the tables within tables within tables anymore! I have converted all of my info boxes successfully with one minor issue with the shopping cart info box. I noticed that when products are added to the cart and are subsequently listed in the shopping cart info box an extra closing </div> tag is added within the table after the last </td></tr> where the products are listed, and above the total. I was wondering if anyone else noticed this?

 

Best Regards,

 

~ Mandy

Mandy, this is a bug, I hope peculiar to your situation. If you open up the box and look down near the end, you will see a </div> closing tag with a conditional statement (if statement). If you experiment with removing this or just placing the </div> tag outside that statement you might be able to fix it.