Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Browser Help!


concretepress

Recommended Posts

I have finally got my OScommerce store looking the way my client likes in my Microsoft Internet Explorer, but it looks like total dookie in Apple Safari and in Firefox. It doesn't center and the type looks bad. What do I need to do for cross-platform consistency? Any ideas? Here's the link to the page:

http://www.thelollipopshop.net/catalog/

Link to comment
Share on other sites

Yes, see what you mean. Take a look at the div you are using as a container and compare that with my Fixed Width Site With CSS contribution - which works in all major browsers.

 

Vger

Link to comment
Share on other sites

Yeah, I believe I used this contribution to create my page. I've looked through the code, and I can't find where the problem may be. I'm including my entire stylesheet code here. Any help would be greatly appreciated. Thanks- Dale

 

/*

$Id: stylesheet.css,v 1.3 2003/09/30 16:22:42 serg Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

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

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

 

body {

text-align: center;

background: #333399;

color: #000;

}

 

 

 

#container {

width: 750px;

background: #ffffff;

color: #000;

text-align: left;

}

 

body {

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

?font-size: 12px;

?padding: 0px;

}

 

div#head {

?position: absolute;

?width:750px;

?height:178px;

?left:0px;

?top: 0px;

?background-color: #FFFFFF;

}

div#columns {

?position: relative;

?width: 750px;

?top: 100px;

?background-color: #CCCCCC;

}

div#side1 {

?position:absolute;

?width:150px;

?top: 0px;

?left:0px;

?background-color: #FF6666;

}

div#content {

?position: relative;

?width: 450px;

?top: 0px;

?left: 150px;

?background-color: #999999;

}

div#side2 {

?position:absolute;

?width:150px;

?top: 0px;

?left: 600px;

?background-color: #00FF66;

}

div#foot {

?width: 750px;

?margin-top: 100px;

?background-color: #FFFFFF;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #AABBDD;

text-decoration: bold;

}

 

 

TR.header {

background: #ffffff;

 

TR.headerNavigation {

background: #333399;

}

 

TD.headerNavigation {

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

font-size: 10px;

background: #333399;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

TR.headerError {

background: #ff0000;

}

 

TD.headerError {

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

font-size: 12px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

 

TR.headerInfo {

background: #00ff00;

}

 

TD.headerInfo {

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

font-size: 12px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

 

TR.footer {

background: #333399;

}

 

TD.footer {

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

font-size: 10px;

background: #333399;

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #b6b7cb;

}

 

.infoBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

.infoBoxNotice {

background: #FF8E90;

}

 

.infoBoxNoticeContents {

background: #FFE6E6;

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

font-size: 10px;

}

 

TD.infoBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #333399;

color: #ffffff;

}

 

TD.infoBox, SPAN.infoBox {

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

font-size: 10px;

}

 

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: #f8f8f9;

}

 

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: #f8f8f9;

}

 

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}

 

.productListing-heading {

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

font-size: 10px;

background: #b6b7cb;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

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

font-size: 10px;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

 

TD.pageHeading, DIV.pageHeading {

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

font-size: 20px;

font-weight: bold;

color: #FF0000;

}

 

TR.subBar {

background: #f4f7fd;

}

 

TD.subBar {

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

font-size: 10px;

color: #000000;

}

 

TD.main, P.main {

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

font-size: 11px;

line-height: 1.5;

}

 

TD.smallText, SPAN.smallText, P.smallText {

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

font-size: 10px;

}

 

TD.accountCategory {

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

font-size: 13px;

color: #aabbdd;

}

 

TD.fieldKey {

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

font-size: 12px;

font-weight: bold;

}

 

TD.fieldValue {

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

font-size: 12px;

}

 

TD.tableHeading {

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

font-size: 12px;

font-weight: bold;

}

 

SPAN.newItemInCart {

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

font-size: 10px;

color: #ff0000;

}

 

CHECKBOX, INPUT, RADIO, SELECT {

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

font-size: 11px;

}

 

TEXTAREA {

width: 100%;

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

font-size: 11px;

}

 

SPAN.greetUser {

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

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

 

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

 

TD.formAreaTitle {

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

font-size: 12px;

font-weight: bold;

}

 

SPAN.markProductOutOfStock {

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

font-size: 12px;

color: #c76170;

font-weight: bold;

}

 

SPAN.productSpecialPrice {

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

color: #ff0000;

}

 

SPAN.errorText {

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

color: #ff0000;

}

 

 

.moduleRow { }

.moduleRowSelected { background-color: #E9F4FC; }

 

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

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

 

/* message box */

 

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

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

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

 

/* input requirement */

 

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

 

 

Yes, see what you mean. Take a look at the div you are using as a container and compare that with my Fixed Width Site With CSS contribution - which works in all major browsers.

 

Vger

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...