chadoz Posted August 9, 2010 Posted August 9, 2010 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%; }
npn2531 Posted August 9, 2010 Posted August 9, 2010 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
♥FWR Media Posted August 9, 2010 Posted August 9, 2010 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; } Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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.
♥FWR Media Posted August 9, 2010 Posted August 9, 2010 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. Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
npn2531 Posted August 9, 2010 Posted August 9, 2010 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
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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?
♥FWR Media Posted August 9, 2010 Posted August 9, 2010 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. Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
npn2531 Posted August 9, 2010 Posted August 9, 2010 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
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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?
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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...
npn2531 Posted August 9, 2010 Posted August 9, 2010 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
♥FWR Media Posted August 9, 2010 Posted August 9, 2010 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. Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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?
♥FWR Media Posted August 9, 2010 Posted August 9, 2010 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. Ultimate SEO Urls 5 PRO - Multi Language Modern, Powerful SEO Urls KissMT Dynamic SEO Meta & Canonical Header Tags KissER Error Handling and Debugging KissIT Image Thumbnailer Security Pro - Querystring protection against hackers ( a KISS contribution ) If you found my post useful please click the "Like This" button to the right. Please only PM me for paid work.
npn2531 Posted August 9, 2010 Posted August 9, 2010 #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
chadoz Posted August 9, 2010 Author Posted August 9, 2010 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.
chadoz Posted August 10, 2010 Author Posted August 10, 2010 #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%; }
lindsayanng Posted August 10, 2010 Posted August 10, 2010 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!!
npn2531 Posted August 10, 2010 Posted August 10, 2010 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
chadoz Posted August 10, 2010 Author Posted August 10, 2010 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
artful Posted August 10, 2010 Posted August 10, 2010 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
chadoz Posted August 25, 2010 Author Posted August 25, 2010 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.