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