php and mac - problems

JavaScript and client side scripting.

Moderator: General Moderators

ilovetoast
Forum Contributor
Posts: 142
Joined: Thu Jan 15, 2004 7:34 pm

Post by ilovetoast »

OK....

Here's the first part. I'm tired and my arm hurts. I quit. I'll finish the rest tomorrow and post it.

Well, I see you modified their style sheet. Their's has some errors, but many of the errors are also ones you appear to have introduced.

General Errors:
Coding standards are a fundamentally important part of the work of a coder. Choose a standard you like and use it religiously.
Font names should be in quotes. Always.
Font families should have multiple fonts. The idea is to try to get your ideal font, but to take into account that no matter what the font, some users won't have it. I didn't fix this, but I urge you to do so.

This is a replacement for all parts of the CSS up to the body tag. Delete everything up to that point and replace with this:

Code: Select all

.boxText {
    color: lime;
    font-size: 13px;
    font-family: "Arial Narrow";
}

.errorBox {
    font-weight: bold;
    font-size: 10px;
    font-family: "Arial Narrow";
    background-color: #000175;
}

.stockWarning {
    color: white;
    font-size: 14px;
    font-family: "Arial Narrow";
}

.productsNotifications {
    font-size: 12px;
    font-family: "Arial Narrow";
    background-color: #373737;
}

.orderEdit {
    color: #70d250;
    font-size: 12px;
    font-family: "Arial Narrow";
    text-decoration: underline;
}

.newinfoboxcontents {
    background-color: #ff0000;
}

td.thumbnails {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/mainpage.jpg) repeat;
    border: medium inset #ffcc8c;
}

td.thumbnails_newproducts  {
    color: yellow;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    border-top: medium inset #ffcc8c;
    border-right: #ffcc8c;
    border-bottom: medium inset #ffcc8c;
    border-left: medium inset #ffcc8c;
}

td.thumbnailsheading8 {
    color: #f5f5dc;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-right: medium inset #ffcc8c;
    border-bottom: medium inset #ffcc8c;
    border-left: medium inset #ffcc8c;
}

td.thumbnailsheading7 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: thin inset #ffcc8c;
    border-right: thin inset #ffcc8c;
    border-bottom: thin #ffcc8c;
    border-left: thin inset #ffcc8c;
}

td.thumbnailsheading11 {
    color: #ffcc8c;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: left;
    border-top: thin #ffcc8c;
    border-right: thin inset #ffcc8c;
    border-bottom: thin #ffcc8c;
    border-left: thin inset #ffcc8c;
}

td.thumbnailsheading {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border: medium inset #ffcc8c;
}

td.thumbnailsheading2 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: medium inset #ffcc8c;
    border-right: medium inset #ffcc8c;
    border-bottom: medium #ffcc8c;
    border-left: medium inset #ffcc8c;
}

td.thumbnailsheading3 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: #ffcc8c;
    border-right: medium inset #ffcc8c;
    border-bottom: medium inset #ffcc8c;
    border-left: medium inset #ffcc8c;
}

td.thumbnailsheading4 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border: medium inset #ffcc8c;
}

td.thumbnailsheading5 {
    color: #fafad2;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: thin inset #ffcc8c;
    border-right: thin #ffcc8c;
    border-bottom: thin #ffcc8c;
    border-left: thin inset #ffcc8c;
}

td.thumbnailsheading6 {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: thin inset #ffcc8c;
    border-right: thin inset #ffcc8c;
    border-bottom: thin #ffcc8c;
    border-left: thin #ffcc8c;
}

td.thumbnailsfooterleft {
    color: #fafad2;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: thin #ffcc8c;
    border-right: thin #ffcc8c;
    border-bottom: thin inset #ffcc8c;
    border-left: thin inset #ffcc8c;
}

td.thumbnailsfooterright {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: thin #ffcc8c;
    border-right: thin inset #ffcc8c;
    border-bottom: thin inset #ffcc8c;
    border-left: thin #ffcc8c;
}

td.thumbnailsheading9 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: medium inset #ffcc8c;
    border-right: #ffcc8c;
    border-bottom: #ffcc8c;
    border-left: medium inset #ffcc8c;
}

td.thumbnailsheading10 {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(http://www.baylounge.com/catalog/images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-top: medium inset #ffcc8c;
    border-right: medium inset #ffcc8c;
    border-bottom: #ffcc8c;
    border-left: #ffcc8c;
}
peace

edit: had inset mistakenly before medium on one line. fixed.
starchild
Forum Newbie
Posts: 11
Joined: Fri Feb 13, 2004 4:44 am

Post by starchild »

ilovetoast - you are an absolute legend!! Thanks so much for helping me out with this. I like your style - very amusing :-)

The stylesheet is actually an amalgam of the default Osc, with some additions made by me - that explains the state it's in. As I was a CSS virgin before doing this, I fudged my way through it - obviously. [hangs head in shame].

The editor i have been using is topstyle3, and as a lot of it is kind of automatically done, I didn't think it was too bad - ie if it needed quotation marks, it would have put them in there. Maybe not.

Thanks again mate,

tim
starchild
Forum Newbie
Posts: 11
Joined: Fri Feb 13, 2004 4:44 am

Post by starchild »

ilovetoast - a quick question.... what happens when the site is in secure mode, and the images are being called from the nonsecure addresses? won't this disable the SSL connection? Do they have to be called from absolute references?

Cheers,

tim
ilovetoast
Forum Contributor
Posts: 142
Joined: Thu Jan 15, 2004 7:34 pm

Post by ilovetoast »

As to SSL, yes, calling a non-secure address from a secure page using an absolute URI will disable the SSL connection.

No, they don't have to be called from absolute references.

I would argue you should have one CSS for non-secured pages and one for secured pages. The one for non-secured could use absolute URIs for elements specific to it and relative URIs for elements that are also contained in the secure CSS (to facilitate cut and paste). The secured CSS should be trimmed down to only those elements that are absolutely required for the secure pages. SSL encryption = slow pages, therefore I like to do everything possible to speed the equation up.

I'll change the references to relative to allow you to make the choice for yourself.

If topstyle3 made that CSS the way it was then I know what I'd do with it. It would involve the trash bin and an angry, ban-me-now visit to their customer support forums.

Without going off on a rant, I will make the following statements and leave it for you to ponder their application to your world.

I believe that WYSIWYGI editors of HTML and/or CSS pages are crutches that unintentionally prevent the transformation of intermediate web site coders into advanced or professional web site coders.

I believe that by definition an advanced or professional web site coder is a coder, who among other things, is able to speak and write HTML and/or CSS as fluently as their native language.

To that end, I believe that at some point the journeyman web site coder must cast aside the crutches, aides, and WYSIWYGI coding tools. They must embark into the world of text editors such as BBEdit, Notepad, vi, and others. They may only return to the world of WYSIWGI coding tools when they have established through months of sweat and toil that they don't need them. In that end, they will realize the folly of their dependence on those tools. And in that realization they will abandon them again, returning to the purity of the text editor. So spaketh the great and wonderous cinnamon toast.

Oh well, back to reality and slogging through the CSS.

peace
ilovetoast
Forum Contributor
Posts: 142
Joined: Thu Jan 15, 2004 7:34 pm

Post by ilovetoast »

All done.

A few notes:

There were some styles of line-width: 1.5. As 1.5 is not an acceptable value, and as 1.5px would be nonsensical, these were deleted. If you know what you meant, you need to properly value the attributes and add them back in.

There was a style of cursor: hand in one place. Hand is not a valid value for the cursor attribute. The same element also had a style of cursor: pointer. That is valid and was kept.

I altered the first part I posted on 2 accounts. First, I used relative URI's per request. Second, I switched from a border-top, border-right, border-bottom, border-left notation to a border-style, border-width, border-color notation. It seems more appropriate given your usage.

You need a page or series of pages that are simply CSS test pages. They should demonstrate each style without any extraneous content so that you can visually confim that they are exactly as desired. This is a good practice to always use. Verifying a CSS looks right shouldn't be left until you deploy.

I removed some comments from the CSS, but left the osCommerce copyright notice at the top. The extra comments were just gook that serves no purpose other than to clutter up the stylesheet.

I added a copyright comment/modification comment for you as well. Put your name in it. This is your CSS, mark it as such. It also let's me take a subtle jab at osCommerce for not having CSS v2 compliance. Change the notice if you don't like it.

I did not reorder your styles or change the fundamental hierarchy/inheritance pattern you are using. In the former, I'm too lazy to group all the td's, all the a's, etc., plus you might not like that. In the latter any improvements would only render the CSS incompatible with your site.

I deleted empty elements. They don't need to be there.

Let me say again, you really need to make CSS test pages. There is a lot here and you need to be able to visualize the CSS. This will also allow an easy way to double-check both your work and mine. You have alot of different td subclasses with different border styles - best to make sure they're all correct.

Finally, I make no guarantees that I didn't miss translate something. This code is syntactically correct and it is CSS v2 valid, but it may have a wrong value in some places. Hence why you should make the test pages. I don't think there are any errors, but you never know. I might have accidentally made an inset border where it should have been none or somesuch.

Anyways, enough of that, here it is:

Code: Select all

/*
  $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/

/*
  baylounge.com
  http://www.baylounge.com/catalog/stylesheet.css

  Some elements have been added to the osCommerce stylesheet.
  These elements are Copyright (c) 2004 INSERT NAME HERE
  
  All elements, including those from the original osCommerce stylesheet have
  been modified to bring them into CSS version 2 compliance for all mediums.
*/

.boxText {
    color: lime;
    font-size: 13px;
    font-family: "Arial Narrow";
}

.errorBox {
    font-weight: bold;
    font-size: 10px;
    font-family: "Arial Narrow";
    background-color: #000175;
}

.stockWarning {
    color: white;
    font-size: 14px;
    font-family: "Arial Narrow";
}

.productsNotifications {
    font-size: 12px;
    font-family: "Arial Narrow";
    background-color: #373737;
}

.orderEdit {
    color: #70d250;
    font-size: 12px;
    font-family: "Arial Narrow";
    text-decoration: underline;
}

.newinfoboxcontents {
    background-color: #ff0000;
}

td.thumbnails {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/mainpage.jpg) repeat;
    border: medium inset #ffcc8c;
}

td.thumbnails_newproducts  {
    color: yellow;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: inset none inset inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading8 {
    color: #f5f5dc;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset inset inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading7 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
}

td.thumbnailsheading11 {
    color: #ffcc8c;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: left;
    border-style: none inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
}

td.thumbnailsheading {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border: medium inset #ffcc8c;
}

td.thumbnailsheading2 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading3 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset inset  inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading4 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border: medium inset #ffcc8c;
}

td.thumbnailsheading5 {
    color: #fafad2;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset none none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading6 {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset none none;
    border-width: thin;
    border-color: #ffcc8c;
}

td.thumbnailsfooterleft {
    color: #fafad2;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none none inset inset;
    border-width: thin;
    border-color: #ffcc8c;
}

td.thumbnailsfooterright {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset inset none;
    border-width: thin;
    border-color: #ffcc8c;
}

td.thumbnailsheading9 {
    color: #0fff11;
    font-weight: bold;
    font-size: 19px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset none none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.thumbnailsheading10 {
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset none none;
    border-width: medium;
    border-color: #ffcc8c;
}

body {
    color: white;
    font-weight: bold;
    font-size: 13px;
    font-family: "Arial Narrow";
    background: #5c5c5c url(images/background.jpg) no-repeat;
    margin: 0px;
}

a {
    color: white;
    font-weight: bold;
    font-size: 13px;
    font-family: "Arial Narrow";
    text-decoration: none;
}

a:hover {
    color: yellow;
}

form {
    display: inline;
}

tr.header {
    background-color: #000175;
}

tr.headerNavigation {
    font-family: "Arial Narrow";
    background-color: #565656;
}

td.headerNavigation {
    color: lime;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
}

a.headerNavigation {
    color: white;
    font-size: 15px;
    font-family: "Arial Narrow";
}

a.headerNavigation:hover {
    color: #ffffff;
}

tr.headerError {
    background-color: #ff0000;
}

td.headerError {
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    font-family: "Tahoma", "Verdana", "Arial", sans-serif;
    background-color: #ff0000;
    text-align: center;
}

tr.headerInfo  {
    background-color: #00ff00;
}

td.headerInfo {
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    font-family: "Arial Narrow";
    background-color: #00ff00;
    text-align: center;
}

td.footer {
    color: #a9a9a9;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
}

td.yellow {
    color: #f9ff8c;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
}

td.beige {
    color: #ffcc8c;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
}

td.yellow_background {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.yellow_background2 {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset inset inset;
    border-width: medium;
    border-color: yellow;
}

td.newproducts {
    color: #7eff00;
    font-weight: bold;
    font-size: 16px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset none inset none;
    border-width: medium;
    border-color: #ffcc8c;
}

td.login_center {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.login_left {
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none none none inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.login_right {
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset none none;
    border-width: medium;
    border-color: #ffcc8c;
}

td.newproducts_right {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset inset none;
    border-width: medium;
    border-color: #ffcc8c;
}

td.newproducts_heading {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none none inset inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.newproducts_heading_right {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: none inset inset none;
    border-width: medium;
    border-color: #ffcc8c;
}

td.newproducts_footer {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset none inset inset;
    border-width: medium;
    border-color: #ffcc8c;
}

td.newproducts_footer_right {
    color: yellow;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial Narrow";
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    text-align: center;
    border-style: inset inset inset none;
    border-width: medium;
    border-color: #ffcc8c;
}

.infoBox {
    color: #feff00;
}

.infoBoxContents {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset inset inset;
    border-width: thin;
    border-color: #ffcc8c;
}

.infoBoxContents5 {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
}

.infoBoxContents_left {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
 }
 
.infoBoxContents_right {
    color: #ffcc8c;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset none none;
    border-width: thin;
    border-color: #ffcc8c;
}

.infoBoxContents4 {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
}

.infoBoxContents2 {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background-image: url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset inset inset;
    border-width: medium;
    border-color: #ffcb8a;
}

.infoBoxContents3 {
    color: lime;
    font-size: 14px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #606060 url(images/thumbnailbackground6.jpg) repeat;
    border: inset thin #ffcc8c;
}

.mainpage {
    color: #fff8dc;
    font-size: 16px;
    font-family: "Arial Narrow";
    text-decoration: none;
    background: #3c3c3c url(images/thumbnailbackground6.jpg) repeat;
    border-style: inset none inset inset;
    border-width: medium;
    border-color: #ffcb8a black #ffcb8a #ffcb8a;
}

.infoBoxNotice {
    color: #feff00;
    background-color: #000175;
}

.infoBoxNoticeContents {
    font-size: 14px;
    font-family: "Arial Narrow";
    background-color: #646464;
}

td.infoBoxHeading {
    color: yellow;
    font-weight: bold;
    font-size: 16px;
    font-family: "Arial Narrow";
    background: url(images/thumbnailbackground6.jpg) repeat left;
    border-style: inset inset none inset;
    border-width: medium thin thin thin;
    border-color: #ffcc8c;
}

td.infoBoxHeading_center {
    color: yellow;
    font-weight: bold;
    font-size: 16px;
    font-family: "Arial Narrow";
    background: url(images/header.gif) repeat left;
}

td.infoBoxHeading_center_bottom {
    color: yellow;
    font-weight: bold;
    font-size: 16px;
    font-family: "Arial Narrow";
    background: url(images/footer.gif) repeat left;
}

td.infoBox, span.infoBox {
    font-size: 10px;
    font-family: "Arial Narrow";
}

tr.accountHistory-odd, tr.addressBook-odd, tr.alsoPurchased-odd, tr.payment-odd, tr.productListing-odd, tr.productReviews-odd, tr.upcomingProducts-odd, tr.shippingOptions-odd {
    background-color: #646464;
}

tr.accountHistory-even, tr.addressBook-even, tr.alsoPurchased-even, tr.payment-even, tr.productListing-even, tr.productReviews-even, tr.upcomingProducts-even, tr.shippingOptions-even {
    background-color: #373737;
}

table.productListing {
    background-image: url(images/thumbnailbackground6.jpg) repeat;
    border-style: none inset none inset;
    border-width: thin;
    border-color: #ffcc8c;
}

.productListing-heading {
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: "Arial";
    background-image: url(images/thumbnailbackground6.jpg) repeat;
}

td.productListing-data {
    color: #32cd32;
    font-size: 14px;
    font-family: "Arial Narrow";
    border: #ffcc8c;
}

a.pageResults {
    color: yellow; 
    font-family: "Arial Narrow";
}

a.pageResults:hover {
    color: #0000ff;
    background-color: #ffff33;
}

td.pageHeading, div.pageHeading {
    color: yellow;
    font-weight: bold;
    font-size: 18px;
    font-family: "Arial Narrow";
}

td.subBar {
    color: white;
    font-size: 10px;
    font-family: "Arial Narrow";
}

td.main, p.main {
    color: white;
    font-weight: normal;
    font-size: 14px;
    font-family: "Arial Narrow";
}

td.smallText_headings, span.smallText_headings, p.smallText_headings {
    color: yellow;
    font-size: 14px;
    font-family: "Arial Narrow";
    background-image: url(images/mainpage.jpg);
    border-style: none groove groove groove;
    border-width: medium;
    border-color: #ffcc8c;
}

td.smallText, span.smallText, p.smallText {
    color: #1e90ff;
    font-size: 14px;
    font-family: "Arial Narrow";
}

td.accountCategory {
    color: #aabbdd;
    font-size: 13px;
    font-family: "Arial Narrow";
}

td.fieldKey {
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
}

td.fieldValue {
    font-size: 12px;
    font-family: "Arial Narrow";
}

td.tableHeading {
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
}

td.category_desc {
    font-size: 14px;
    font-family: "Arial Narrow";
}

span.newItemInCart {
    color: white;
    font-size: 15px;
    font-family: "Arial Narrow";
}

checkbox, input, radio, select {
    color: white;
    font-size: 14px;
    font-family: "Arial Narrow";
    background-color: #464646;
}

textarea {
    color: white;
    font-size: 13px;
    font-family: "Arial Narrow";
    background-color: #3a3a3a;
    width: 50%;
}

span.greetUser {
    color: yellow;
    font-weight: bold;
    font-size: 15px;
    font-family: "Arial Narrow";
}

table.formArea {
    background-color: #373737;
    border: inset 1px #ffcc8c;
}

td.formAreaTitle {
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
}

span.markProductOutOfStock {
    color: #c76170;
    font-weight: bold;
    font-size: 12px;
    font-family: "Arial Narrow";
}

span.productSpecialPrice {
    color: #ffa500;
    font-family: "Arial Narrow";
}

span.errorText {
    color: yellow;
    font-size: 16px;
    font-family: "Arial Narrow";
}

.moduleRowOver {
    background-color: #646464;
    cursor: pointer;
}

.moduleRowSelected {
    background-color: #646464;
}

.checkoutBarFrom, .checkoutBarTo {
    color: #8c8c8c;
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
}

.checkoutBarCurrent {
    color: #ff8c00;
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
}

.messageBox {
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
}

.messageStackError, .messageStackWarning {
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
    background-color: #00bfff;
}
.messageStackSuccess {
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
    background-color: #99ff00;
}

.inputRequirement {
    color: white;
    font-size: 11px;
    font-family: "Verdana", "Arial", sans-serif;
}
Check this out and see if it helps. If it doesn't we'll look into other possibilities. Mac users are the most important people in the universe. It is essential that you fix your site so we can see it in all its glory. (Any who doubt that we are the greatest simply read the above code then be silent).

peace

think toast
starchild
Forum Newbie
Posts: 11
Joined: Fri Feb 13, 2004 4:44 am

Post by starchild »

Ilovetoast - what can I say, but I am not worthy.....I bow humbly in your presence and offer my first born as a token of my appreciation.

Ironically, my best mate is a deliverer for Buttercup bread here in Australia - if only i could hook you up, you would be up to your neck in free toast for the rest of your life.

I haven't had a chance to apply these latest changes, but will endevour to tonight. My paying jobs are keeping me too busy right now.

May your toast never be burnt, and your hands never swollen,

peace and mung beans (on toast),

tim
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

Bravo! 8)
starchild
Forum Newbie
Posts: 11
Joined: Fri Feb 13, 2004 4:44 am

Post by starchild »

ilovetoast - you are a gentleman and a scholar. It's really great to know there are people out there willing to help with such enthusiasm and generosity. If the whole world was like this, it would be even a more wonderful place.

Thanks sincerely for all your help - i've learned a lot and you did it with humour too!

Have a wonderful life!

Tim
ilovetoast
Forum Contributor
Posts: 142
Joined: Thu Jan 15, 2004 7:34 pm

Post by ilovetoast »

Thank you for your compliments. If you get a chance at some point in the future, pass along the good karma to someone else in need of assistance, be it in programming or anything else.

peace
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

This style could be further simplified by putting in a global font in all elements, then specify individual fonts in specific areas.

Example:

Code: Select all

html, body, p, h1, h2, h3, h4, dl, dt, a, div, span, tt, form, fieldset, legend, input, label, select, optgroup, option {
font-family: Verdana, arial, helvetica, sans-serif;
}

/* then for your specific classes */

checkbox, input, radio, select {
    color: white;
    font-size: 14px;
    font-family: "Arial Narrow";
    background-color: #464646;
}
Note:

There is no need to quote single worded font names only font names separated by a space I.E.

Code: Select all

.checkoutBarFrom, .checkoutBarTo {
    color: #8c8c8c;
    font-size: 10px;
    font-family: "Verdana", "Arial", sans-serif;
} 

/* should look like this */

.checkoutBarFrom, .checkoutBarTo {
    color: #8c8c8c;
    font-size: 10px;
    font-family: Verdana, Arial, sans-serif;
}
Post Reply