Opera and Mozilla Browsers- OSC looks HORRIBLE!

[Guest]

My shop looks great in IE, but when viewing in Opera or Firefox, it looks horrible... None of the site graphics display correctly, and Im getting a " " before each product category, infobox heading image being displayed 2 or 3 times for each heading, etc. etc.

 

Whats up???

[natewlew]

The default OSC should look ok in all of the browsers. Its easy to start making css changes in IE and then look at it in Firefox and it looks like crap (and vice versa).

 

It's is something that you have to deal with. You will find a lot of post on th net about who is at fault.

[Guest]

The following is a copy of my stylesheet:

 

.boxText 
{ 
  font-family:Verdana,Tahoma,sans-serif;
  font-size:10px;
  color:#8B8B89; 
}
.boxText a
 {
  color:#222222; 
 }

 .boxText a:hover
 {
  text-decoration:none;
  color:#C55800;
 }
 .boxText a b
 {
  color:#2A7CD1;
  font-weight:normal;
 }

 .boxText a.navigation
 {
  padding-left:10px;
  background:transparent url(images/cputampa/navigation_arrow.gif) 5px center no-repeat;
 }


.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 {
 background: #ffffff;
 color: #000000;
 margin: 0px;
 padding:5px;
}

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
background:#ffffff;
}

TR.headerNavigation {
 /*background: #bbc3d3;*/
}

TD.headerNavigation
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 font-weight:bold; 
 text-transform:uppercase;  
 background:transparent url(images/cputampa/header_bg_span_x.gif) bottom left repeat-x;
 padding-bottom:5px;
 white-space:nowrap;
}

A.headerNavigation
{ 
 color:#737988;  
}

A.headerNavigation:hover {
 text-decoration:none;
 color:#C55800;
}

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
{

}

TD.footer
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 color:#909090;  
}


.infoBox {
 background:#f9f9f9 url(images/cputampa/bg_squaredot_v.gif) top right repeat-y; 
 padding-right:1px;
}

.infoBoxContents
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:10px;
 color:#8B8B89;  
 background:#f9f9f9 url(images/cputampa/bg_squaredot_v.gif) top left repeat-y;  
}

.infoBoxNotice {

}

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

TD.infoBoxHeading
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 font-weight:bold;
 color:#ffffff;  
 text-transform:uppercase;
 background:transparent url(images/cputampa/bg_infoboxheading.gif) top left repeat-x;
 display:block;
 line-height:18px;
}

TD.infoBoxFooter
{
font-size:0px;
line-height:0px;
background:transparent url(images/cputampa/bg_squaredot.gif) bottom left repeat-x;
}

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


.contentBox
{
 background:#ffffff url(images/cputampa/bg_squaredot_v_2.gif) top right repeat-y; 
 padding-right:1px;
}

TD.contentBoxHeading
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 font-weight:bold;
 color:#666666;  
 text-transform:uppercase;
 background:transparent url(images/cputampa/bg_contentboxheading.gif) top left repeat-x;
 display:block;
 line-height:18px;
}

TD.contentBoxFooter
{
font-size:0px;
line-height:0px;
background:transparent url(images/cputampa/bg_squaredot.gif) bottom left repeat-x;
}
.contentBoxContents
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:10px;
 color:#8B8B89;  
 background:#ffffff url(images/cputampa/bg_squaredot_v_2.gif) top left repeat-y;  
}
	.contentBoxContents a
{
 font-weight:bold;
}

.box
{

}

.boxContents
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:10px;
 color:#666666;  
} 
	.boxContents a
{

}	
.boxContents a:hover
{

}

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:#ffffff
}

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: #ffffff;
}

TABLE.productListing {
 border: 0px;
 border-style: solid;
 border-color: #989DA5;
 border-spacing: 1px;
}

.productListing-heading {
 font-size: 10px;
 background: #eeeeee;
 color: #555555;
 height:16px;
 line-height:16px;
 text-transform:uppercase;
 font-family:'Trebuchet MS',sans-serif;
 font-weight:bold;
}

.productListing-heading a
 {
  color:#333333;
  text-decoration:none;
 }
 .productListing-heading a:hover
 {
  color:#0096FE;
 } 

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

.productListing-data a
{
color:#393956;
text-decoration:none;
}

.productListing-data a:hover
{
color:#088FF2;
text-decoration:underline;
}


A.pageResults {
 color: #0000FF;
}

A.pageResults:hover {
 color: #0000FF;
 background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading, TD.pageHeading a.headerNavigation
{
 margin:0px;
 padding-top:0px;
 padding-bottom:20px;
 padding-left:0px;
 padding-right:0px;
 font-family:'Trebuchet MS',Tahoma,sans-serif;
 font-size:21px;
 font-weight:normal;
 color:#C55800;  
}

TR.subBar {
 background: #f4f7fd;
}

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

TD.main, P.main 
{
   font-family:Tahoma,Verdana,sans-serif;
   font-size:12px;
   color:#222222;  
}

TD.main a, P.main a
{
 color:#2673C5;
}
TD.main a:hover, P.main a:hover
{
 color:#C55726;

}

TD.smallText, SPAN.smallText, P.smallText
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;   
}

TD.smallText a, SPAN.smallText a, P.smallText a
{
 color:#333333;
}
TD.smallText a:hover, SPAN.smallText a:hover, P.smallText a:hover
{
		color:#666699;	 
}	


TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 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: 9px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 9px;
}

SELECT
{

}

SPAN.greetUser {
/*
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #f0a480;
 font-weight: bold;
*/
 font-size:12px;
 color:#33334D;
 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 { }
.moduleRowOver { background-color: #F0F0F0; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #CECECE; }

.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:#ffffee;
font-weight:bold;
border-bottom:1.0px solid #cccccc;
}
.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; }


TD.smallText p
{
margin:0px;
padding:0px;
color:#909090;
}

TD.smallText p.light
{
 color:#cccccc;
}	

TD.smallText p a
{
 text-decoration:underline;
 color:#aaaaaa;
}
TD.smallText p a:hover
{
 text-decoration:none;
 color:#C55800;
}

TD.smallText p.light a
{
 text-decoration:underline;
 color:#cccccc;
}
TD.smallText p.light a:hover
{
 text-decoration:none;
 color:#666666;
}



.newProductPrice
{
font-size:21px;
color:#C55800;
}

 

Yes, the colors and sizes have been modified, but I dont see anything that has been changed that would make it look this bad!

[radders]

I suggest you try the default stylesheet etc. and then make your changes one-by-one, testing at each stage. Firefox is pretty good at complying with the standards so I am surprised that it looked odd, but then nobody said web design was easy :-). I am not familiar with Opera, usually the most troublesome one to get it working on ime is IE.

[Guest]

I actually just found what the problem was in the stylesheet...

 

TD.headerNavigation
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 font-weight:bold; 
 text-transform:uppercase;  
 background:transparent url(images/cputampa/header_bg_span_x.gif) bottom left repeat-x;
 padding-bottom:5px;
 white-space:nowrap;
}

 

Changed to:

 

TD.headerNavigation
{
 font-family:Tahoma,Verdana,sans-serif;
 font-size:9px;
 font-weight:bold; 
 text-transform:uppercase;  
 background:transparent url(images/cputampa/header_bg_span_x.gif);


}

 

The problem was that the box header image on the left and right columns were showing 3 times a piece, now its fine. Thanks!

[Guest]

Hi

 

You may find Top Style Lite helpful. Lite is a free version CSS editor and you can set the style level to ensure you are using CSS that is OK for Firefox or IE.

 

Reference Top Style Lite

 

Kate