Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

IE CSS - Centering Page


chadoz

Recommended Posts

Posted

I have some add-on stuff, so this might not be a standard issue question. But in Firefox, my site opens centered in whatever size browser opens up. With IE, its justified left. What do I need to do to get centered on both apps? Stylesheet below.

 


/*
 $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 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: #808080; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 text-align: left;
 background: #808080;
 color: #cccccc;
 margin: 0px;
}

.fixcenter {
 width: 994px;
 background: #404040;
 color: #000000;
 margin: auto;
 margin-top: 20px;
 text-align: left;
}

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

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

FORM {
display: inline;
}

TR.header {
 background: #404040;
}

TR.headerNavigation {
 background: #404040;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background: #808080;
 background-image: url(images/headernavigation.gif);
 color: #404040;
 font-weight : bold;
}

A.headerNavigation { 
 color: #404040; 
}

A.headerNavigation:hover {
 color: #cccccc;
}

TR.headerCrumb {
 background: #404040;
}

TD.headerCrumb {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background: #404040;
 background-image: url(images/headercrumb.gif);
 color: #cccccc;
 font-weight : bold;
}

A.headerCrumb { 
 color: #cccccc; 
}

A.headerCrumb:hover {
 color: #808080;
}

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: #000000;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #404040;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #808080;
 background-image: url(images/headercrumb.gif);
 color: #404040;
 font-weight: bold;
}

.infoBox {
 background: #808080;
}

.infoBoxContents {
 background: #404040;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #404040;
}

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

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
 background: #404040;
 background-image: url(images/headernavigation.gif);
 color: #cccccc;
}

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

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

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

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 background: #808080;
 color: #cccccc;
 font-weight: bold;
}

TD.productListing-data {
width: 10%;
text-align:center;
vertical-align:top; 
padding:10 10 10 10;

 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #cccccc;
}

A.pageResults {
 color: #cccccc;
}

A.pageResults:hover {
 color: #808080;
 background: #404040;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 16px;
 font-weight: bold;
 color: #cccccc;
}

TR.subBar {
 background: #404040;
}

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

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 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: #cccccc;
}

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: #cccccc;
 font-weight: bold;
}

TABLE.formArea {
 background: #404040;
 border-color: #808080;
 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: #808080; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #808080; }

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

/* 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: #00ff00; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #808080; }

/* input requirement */

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


/*Credits: Dynamic Drive CSS Library */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #808080;
font-family: arial;
font-size: 12px;
}

.suckerdiv ul li{
position: relative;
background-color: #404040;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 149px; /* Parent menu width - 1*/
position: absolute;
width: 148px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 147px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{
left: 146px; /* Parent menu width - 1*/
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{
background-color: #404040;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: #cccccc;
text-decoration: none;
background-color: #404040;
padding: 1px 5px;
border: 1px solid #808080;
border-bottom: 0;
line-height: 1.75em;
}

.suckerdiv ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }

Posted

There are two things you can do,

 

1) make sure you have an up-to-date doctype. I recommend:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="LTR" lang="en"

 

but others here may have a better educated guess.

 

2)

look at these links, they are examples of how to set up your stylesheet to handle IE differently than other browsers.

 

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

 

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

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

To center the site for IE I would ..

 

body,html {
 text-align: center; /* IE hack to centre the containing div */
}

 

Then add a containing div to wrap the whole site like ..

 

<div id="container">
</div>

 

With the css something like ..

 

#container {
 width: 950px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

Posted

There are two things you can do,

 

1) make sure you have an up-to-date doctype. I recommend:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="LTR" lang="en"

 

but others here may have a better educated guess.

 

2)

look at these links, they are examples of how to set up your stylesheet to handle IE differently than other browsers.

 

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

 

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

 

Thanks for the reply. At the risk of revealing my rookieness, where do I edit the doc type? Thanks

Posted

To center the site for IE I would ..

 

body,html {
 text-align: center; /* IE hack to centre the containing div */
}

 

Then add a containing div to wrap the whole site like ..

 

<div id="container">
</div>

 

With the css something like ..

 

#container {
 width: 950px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

 

Where would I place the first item? (catalog/index.php?)

I assume the second item is in the same file. When you say wrap the whole site, would I add <div id="container"> to the beginning (where exactly?) and </div> at the end, where exactly?

Third item I think I've got. Thanks and sorry - rookie hard at work.

Posted

Where would I place the first item? (catalog/index.php?)

I assume the second item is in the same file. When you say wrap the whole site, would I add <div id="container"> to the beginning (where exactly?) and </div> at the end, where exactly?

Third item I think I've got. Thanks and sorry - rookie hard at work.

 

The styles should go in catalog/stylesheet.css ( there will already be a body section at the top so just add the code.

 

The <div></div bit

 

put the <div id="container"> directly below the <body tag of every catalog file

 

Put the </div> immediately before the closing </body> at the bottom of every catalog file.

 

Do it to the index file only first to ensure it works as intended before you change too many.

Posted

Thanks for the reply. At the risk of revealing my rookieness, where do I edit the doc type? Thanks

 

Unfortunately you have to edit it for every catalog page. However here is an example:

 

Open say, account_edit.php

 

find:

<html <?php echo HTML_PARAMS; ?>>
<head>

 

 

you'll find this just above

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

change it to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="LTR" lang="en">

 

 

I have found when I make this change, IE behaves better, and doesn't do the sort of thing you are experiencing. One difference is that the default doctype reference in OSCommerce does not seem to be complete, in that it doesn't have the www.w3.org website reference.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

Unfortunately you have to edit it for every catalog page. However here is an example:

 

Open say, account_edit.php

 

find:

<html <?php echo HTML_PARAMS; ?>>
<head>

 

 

you'll find this just above

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

change it to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="LTR" lang="en">

 

 

I have found when I make this change, IE behaves better, and doesn't do the sort of thing you are experiencing. One difference is that the default doctype reference in OSCommerce does not seem to be complete, in that it doesn't have the www.w3.org website reference.

 

 

Sounds good. When you say "open and change in every catalog page", I assume you are just referring to the main folder 'catalog' and the files within, or do you mean all the sub folders in catalog too (includes, languages, etc). I just tried it in the index file, and the centering was corrected, but the main body text changed colors. I didn't change the CSS so how did the text change colors? was #cccccc, now is #000000

Posted

The styles should go in catalog/stylesheet.css ( there will already be a body section at the top so just add the code.

 

The <div></div bit

 

put the <div id="container"> directly below the <body tag of every catalog file

 

Put the </div> immediately before the closing </body> at the bottom of every catalog file.

 

Do it to the index file only first to ensure it works as intended before you change too many.

 

Just had this same question for somebody else helping me, but when you say "every catalog file" do you mean just the 20 or so files in the 'catalog' folder itself (account.php - tell a friend.php), or do you mean all files in OS commerce?

Posted

Just the "root" files which .. yes .. is most ( but not all ) of those in the catalog directory.

 

The thing to remember is that only those files are called directly and therefore only those files include application_top, have a doctype and <html></html> etc.

 

Whenever thinking of changing all of the catalog files to make a change it is always a good idea to change just one initially as a test .. this saves time if the change e.g. didn't work as expected .. the simple files are privacy.php .. shipping.php, conditions.php. I say simple as these files contain very little code and php.

Posted

Yes, just the 20 or so files in the main folder, or catalog folder. No need to do the admin folder. You will see that these are the only files with the doctype anyway.

 

The color change is probably caused by some sort of 'typo'. The doctype basically tells the browsers which set of rules to follow. It might make a difference now with the new doctype if on the stylesheet the colors are capitalized, or have the # in front of them or something like that.

 

But to be honest with you, for a color to change from #cccccc to #000000 makes no sense to me.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

Yes, just the 20 or so files in the main folder, or catalog folder. No need to do the admin folder. You will see that these are the only files with the doctype anyway.

 

The color change is probably caused by some sort of 'typo'. The doctype basically tells the browsers which set of rules to follow. It might make a difference now with the new doctype if on the stylesheet the colors are capitalized, or have the # in front of them or something like that.

 

But to be honest with you, for a color to change from #cccccc to #000000 makes no sense to me.

 

They're not capitalized, but they do have a '#' symbol in front of them. Shall I remove the number symbols? Do I need to replace it with anything else?

Posted

Just the "root" files which .. yes .. is most ( but not all ) of those in the catalog directory.

 

The thing to remember is that only those files are called directly and therefore only those files include application_top, have a doctype and <html></html> etc.

 

Whenever thinking of changing all of the catalog files to make a change it is always a good idea to change just one initially as a test .. this saves time if the change e.g. didn't work as expected .. the simple files are privacy.php .. shipping.php, conditions.php. I say simple as these files contain very little code and php.

 

Cool - thanks so much for your time...

Posted

Capitalize them (I am about 50% sure this matters) , and the # sign is correct and should be there. Also bg-color should probably be background-color.

 

Here is an example of correct:

.shopping_even{
border:1px dashed #CCCCCC;
color:#666666;
background-color: #F2F2F2;
font-family: monospace;
font-size: 11px;
padding:2px;
}

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

Capitalize them (I am about 50% sure this matters) , and the # sign is correct and should be there. Also bg-color should probably be background-color.

 

Here is an example of correct:

.shopping_even{
border:1px dashed #CCCCCC;
color:#666666;
background-color: #F2F2F2;
font-family: monospace;
font-size: 11px;
padding:2px;
}

 

No you shouldn't capitalise as it makes no difference.

 

Re: bgcolor although I agree I see no mention of it in the OPs posts.

Posted

No you shouldn't capitalise as it makes no difference.

 

Re: bgcolor although I agree I see no mention of it in the OPs posts.

 

So I changed the bg_color texts. it still changes my text color when I add the new doc type. Any other suggestions?

Posted

So I changed the bg_color texts. it still changes my text color when I add the new doc type. Any other suggestions?

 

Is this post about centring the site or background colours? perhaps I'm a bit tired.

Posted

#000000 is a default color you'd get if made no color references in the stylesheet. I'll bet you dollars to donuts you have some little : or ; missing or out of place somewhere on your stylesheet. Or some other typo that the new doctype is more 'sensitive' to. Find the reference to the #cccccc color in your stylesheet that's screwy and starting looking for the typo from there uphill (up the page).

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

Is this post about centring the site or background colours? perhaps I'm a bit tired.

 

its about centering pages in IE. Earlier in this thread somebody suggesting updating my doc type. I did that, then the text color of the main body changed from #cccccc to #000000.

Posted

#000000 is a default color you'd get if made no color references in the stylesheet. I'll bet you dollars to donuts you have some little : or ; missing or out of place somewhere on your stylesheet. Or some other typo that the new doctype is more 'sensitive' to. Find the reference to the #cccccc color in your stylesheet that's screwy and starting looking for the typo from there uphill (up the page).

 

I like dollars and donuts, but i can't find anything wrong with the stylesheet. when I switch the doc type back in the index page, the problem is gone. But with the new doc type, it changes the color of the font (#cccccc) to black (#000000). Do you see anything wrong with the stylesheet and doc type combo I'm trying. Could it be because I have only updated the doc type in the index file?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="LTR" lang="en">

 

here's the stylesheet

/*
 $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 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-color: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background-color: #808080; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 text-align: left;
 background-color: #808080;
 color: #cccccc;
 margin: 0px;
}

.fixcenter {
 width: 994px;
 background-color: #404040;
 color: #cccccc;
 margin: auto;
 margin-top: 20px;
 text-align: left;
}

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

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

FORM {
display: inline;
}

TR.header {
 background-color: #404040;
}

TR.headerNavigation {
 background-color: #404040;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif:
 font-size: 11px;
 background: #808080;
 background-image: url(images/headernavigation.gif);
 color: #404040:
 font-weight : bold;
}

A.headerNavigation { 
 color: #404040; 
}

A.headerNavigation:hover {
 color: #cccccc;
}

TR.headerCrumb {
 background-color: #404040;
}

TD.headerCrumb {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background-color: #404040;
 background-image: url(images/headercrumb.gif);
 color: #cccccc;
 font-weight : bold;
}

A.headerCrumb { 
 color: #cccccc; 
}

A.headerCrumb:hover {
 color: #808080;
}

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

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

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

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background-color: #00ff00;
 color: #000000;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background-color: #404040;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background-color: #808080;
 background-image: url(images/headercrumb.gif);
 color: #404040;
 font-weight: bold;
}

.infoBox {
 background-color: #808080;
}

.infoBoxContents {
 background-color: #404040;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background-color: #404040;
}

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

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
 background-color: #404040;
 background-image: url(images/headernavigation.gif);
 color: #cccccc;
}

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

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

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

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 background-color: #808080;
 color: #cccccc;
 font-weight: bold;
}

TD.productListing-data {
width: 10%;
text-align:center;
vertical-align:top; 
padding:10 10 10 10;

 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #cccccc;
}

A.pageResults {
 color: #cccccc;
}

A.pageResults:hover {
 color: #808080;
 background-color: #404040;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 16px;
 font-weight: bold;
 color: #cccccc;
}

TR.subBar {
 background-color: #404040;
}

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

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 line-height: 1.5;
 color: #cccccc;
}

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

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: #cccccc;
 font-weight: bold;
}

TABLE.formArea {
 background-color: #404040;
 border-color: #808080;
 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: #808080; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #808080; }

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

/* 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: #00ff00; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #808080; }

/* input requirement */

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


/*Credits: Dynamic Drive CSS Library */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #808080;
font-family: arial;
font-size: 12px;
}

.suckerdiv ul li{
position: relative;
background-color: #404040;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 149px; /* Parent menu width - 1*/
position: absolute;
width: 148px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 147px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{
left: 146px; /* Parent menu width - 1*/
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{
background-color: #404040;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: #cccccc;
text-decoration: none;
background-color: #404040;
padding: 1px 5px;
border: 1px solid #808080;
border-bottom: 0;
line-height: 1.75em;
}

.suckerdiv ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }


Posted

Can you post a link to your site?? I'm pretty darn good with css now and can probably help you out but I use firebug to help me visualize the code infront of me and see the html structure.. Centering content in a page is as simple as putting <div id="centerPage"> at the very top the html in header.php and then adding </div> at the end right before </body> on footer.php

 

Then all you need to do is

#centerPage{
margin:0px Auto;
width: 950px;
}

 

Sometimes you might need to set the position, but that has to do with what you have going on inside.

 

You can consider adding the osc-css installation.. that makes working in the css and layout a WORLD easier!

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Posted

Here is your typo:

 

 

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif:
 font-size: 11px;
 background: #808080;
 background-image: url(images/headernavigation.gif);
 color: #404040:
 font-weight : bold;
}

 

Note

after Verdana, Arial, sans-serif you have a : instead of a ; and

after #404040 you have a : instead of a ;

 

That's a cursory look after 2 beers. You probably have more.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Posted

Here is your typo:

 

 

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif:
 font-size: 11px;
 background: #808080;
 background-image: url(images/headernavigation.gif);
 color: #404040:
 font-weight : bold;
}

 

Note

after Verdana, Arial, sans-serif you have a : instead of a ; and

after #404040 you have a : instead of a ;

 

That's a cursory look after 2 beers. You probably have more.

 

Good beer eyes. I made the change and rechecked the sheet and didn't find any more of those typos. Still have the problem though. but thanks

Posted

Good beer eyes. I made the change and rechecked the sheet and didn't find any more of those typos. Still have the problem though. but thanks

 

What worked for me after the changes mentioned was to take out in all the root files the last <br> that preceeds

</body>

</html>

<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

 

Barbara

  • 2 weeks later...
Posted

Can you post a link to your site?? I'm pretty darn good with css now and can probably help you out but I use firebug to help me visualize the code infront of me and see the html structure.. Centering content in a page is as simple as putting <div id="centerPage"> at the very top the html in header.php and then adding </div> at the end right before </body> on footer.php

 

Then all you need to do is

#centerPage{
margin:0px Auto;
width: 950px;
}

 

Sometimes you might need to set the position, but that has to do with what you have going on inside.

 

You can consider adding the osc-css installation.. that makes working in the css and layout a WORLD easier!

 

 

Hi-I tried "putting <div id="centerPage"> at the very top the html in header.php and then adding </div> at the end right before </body> on footer.php" and changed the stylesheet, but had no luck. Could you take a quick look at the three files and maybe add your recommendations. I might have done it wrong, so I erased my changes and the original files are below. Thanks if you time...

header.php

<?php
/*
 $Id: header.php 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

// check if the 'install' directory exists, and warn of its existence
 if (WARN_INSTALL_EXISTENCE == 'true') {
   if (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/install')) {
     $messageStack->add('header', WARNING_INSTALL_DIRECTORY_EXISTS, 'warning');
   }
 }

// check if the configure.php file is writeable
 if (WARN_CONFIG_WRITEABLE == 'true') {
   if ( (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) && (is_writeable(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) ) {
     $messageStack->add('header', WARNING_CONFIG_FILE_WRITEABLE, 'warning');
   }
 }

// check if the session folder is writeable
 if (WARN_SESSION_DIRECTORY_NOT_WRITEABLE == 'true') {
   if (STORE_SESSIONS == '') {
     if (!is_dir(tep_session_save_path())) {
       $messageStack->add('header', WARNING_SESSION_DIRECTORY_NON_EXISTENT, 'warning');
     } elseif (!is_writeable(tep_session_save_path())) {
       $messageStack->add('header', WARNING_SESSION_DIRECTORY_NOT_WRITEABLE, 'warning');
     }
   }
 }

// check session.auto_start is disabled
 if ( (function_exists('ini_get')) && (WARN_SESSION_AUTO_START == 'true') ) {
   if (ini_get('session.auto_start') == '1') {
     $messageStack->add('header', WARNING_SESSION_AUTO_START, 'warning');
   }
 }

 if ( (WARN_DOWNLOAD_DIRECTORY_NOT_READABLE == 'true') && (DOWNLOAD_ENABLED == 'true') ) {
   if (!is_dir(DIR_FS_DOWNLOAD)) {
     $messageStack->add('header', WARNING_DOWNLOAD_DIRECTORY_NON_EXISTENT, 'warning');
   }
 }

 if ($messageStack->size('header') > 0) {
   echo $messageStack->output('header');
 }
?>
<div class="fixcenter">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header">
   <td height="100" valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>
 </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td height="30" class="headerNavigation">  <?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: 155px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH). '</a></form>'; ?></td>
   <td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>   </td>
 </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerCrumb">
   <td height="25" class="headerCrumb">  <?php echo $breadcrumb->trail(' » '); ?></td>
 </tr>
</table>
<?php
 if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerError">
   <td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
 </tr>
</table>
<?php
 }

 if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerInfo">
   <td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
 </tr>
</table>
<?php
 }
?>

 

footer.php - no change needed I assume

<?php
/*
 $Id: footer.php 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require(DIR_WS_INCLUDES . 'counter.php');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="footer">
   <td height="25" class="footer">  <?php echo strftime(DATE_FORMAT_LONG); ?>  </td>
   </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center" class="smallText"><?php echo FOOTER_TEXT_BODY; ?></td>
 </tr>
</table>
<?php
 if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
 </tr>
</table>
<?php
 }
?>
</div>

 

and stylesheet -

/*
 $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

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

 Copyright (c) 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: #808080; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 text-align: left;
 background: #808080;
 color: #cccccc;
 margin: 0px;
}

.fixcenter {
 width: 994px;
 background: #404040;
 color: #000000;
 margin: auto;
 margin-top: 20px;
 text-align: left;
}

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

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

FORM {
display: inline;
}

TR.header {
 background: #404040;
}

TR.headerNavigation {
 background: #404040;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background: #808080;
 background-image: url(images/headernavigation.gif);
 color: #404040;
 font-weight : bold;
}

A.headerNavigation { 
 color: #404040; 
}

A.headerNavigation:hover {
 color: #cccccc;
}

TR.headerCrumb {
 background: #404040;
}

TD.headerCrumb {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 background: #404040;
 background-image: url(images/headercrumb.gif);
 color: #cccccc;
 font-weight : bold;
}

A.headerCrumb { 
 color: #cccccc; 
}

A.headerCrumb:hover {
 color: #808080;
}

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: #000000;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #404040;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #808080;
 background-image: url(images/headercrumb.gif);
 color: #404040;
 font-weight: bold;
}

.infoBox {
 background: #808080;
}

.infoBoxContents {
 background: #404040;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #404040;
}

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

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
 background: #404040;
 background-image: url(images/headernavigation.gif);
 color: #cccccc;
}

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

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

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

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 background: #808080;
 color: #cccccc;
 font-weight: bold;
}

TD.productListing-data {
width: 10%;
text-align:center;
vertical-align:top; 
padding:10 10 10 10;

 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #cccccc;
}

A.pageResults {
 color: #cccccc;
}

A.pageResults:hover {
 color: #808080;
 background: #404040;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 16px;
 font-weight: bold;
 color: #cccccc;
}

TR.subBar {
 background: #404040;
}

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

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 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: #cccccc;
}

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: #cccccc;
 font-weight: bold;
}

TABLE.formArea {
 background: #404040;
 border-color: #808080;
 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: #808080; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #808080; }

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

/* 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: #00ff00; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #808080; }

/* input requirement */

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


/*Credits: Dynamic Drive CSS Library */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #808080;
font-family: arial;
font-size: 12px;
}

.suckerdiv ul li{
position: relative;
background-color: #404040;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 149px; /* Parent menu width - 1*/
position: absolute;
width: 148px; /*sub menu width*/
top: 0;
display: none;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 147px; /* Parent menu width - 1*/
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{
left: 146px; /* Parent menu width - 1*/
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{
background-color: #404040;
}

/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{
background-color: #404040;
}

/* menu links style */
.suckerdiv ul li a{
display: block;
color: #cccccc;
text-decoration: none;
background-color: #404040;
padding: 1px 5px;
border: 1px solid #808080;
border-bottom: 0;
line-height: 1.75em;
}

.suckerdiv ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

.suckerdiv ul li ul li ul li a:hover{
background-color: #404040;
color: #808080;
text-decoration: none;
}

/* The main categories with sub-categories */
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* This one colors the sub-folder with other sub-folders */
.suckerdiv ul li ul li ul li ul .subfolderstyle {
background-color: #404040;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }

 

thanks so much if you can help.

Archived

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

×
×
  • Create New...