Guest Posted June 20, 2010 Share Posted June 20, 2010 I've been trying out OCS to CSS add-on, making some changes to customize my pages, and I really like it, but I've come up with a problem with IE (surprise, surprise...). What's happening is that everything looks fine in Firefox and Safari, but in IE the header is totally shifted to the right of the page (you can't see it when you first view the page, but can if you scroll right). I've been trying to fix it but have had no luck. I could find a work around using js or a a css code insert if I was using simple html web pages, but I'm not experienced with php pages, so I don't even know where the css is called from, or how to fix the problem. If anyone has any ideas it would be appreciated:) In case it helps here's some of the css including the header: BODY { margin-left: auto; margin-right: auto; width: 100%; background-repeat:repeat-x; background-position:0px 0px; background-color:#ffffff; } #container{ width:900px; margin-left:auto; margin-right: auto; padding:10px 0px 0px 10px; } #header { position: absolute; top: 10px; width: 895px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; Quote Link to comment Share on other sites More sharing options...
bavautoM3 Posted June 20, 2010 Share Posted June 20, 2010 I've been trying out OCS to CSS add-on, making some changes to customize my pages, and I really like it, but I've come up with a problem with IE (surprise, surprise...). What's happening is that everything looks fine in Firefox and Safari, but in IE the header is totally shifted to the right of the page (you can't see it when you first view the page, but can if you scroll right). I've been trying to fix it but have had no luck. I could find a work around using js or a a css code insert if I was using simple html web pages, but I'm not experienced with php pages, so I don't even know where the css is called from, or how to fix the problem. If anyone has any ideas it would be appreciated:) In case it helps here's some of the css including the header: BODY { margin-left: auto; margin-right: auto; width: 100%; background-repeat:repeat-x; background-position:0px 0px; background-color:#ffffff; } #container{ width:900px; margin-left:auto; margin-right: auto; padding:10px 0px 0px 10px; } #header { position: absolute; top: 10px; width: 895px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; Notice that in your your index.php file for starters... in the header tages, there is a line that says echo $doctype in your application_top.php file, there should be a variable defined for that. search for $doctype in that file. if nothing shows up, thats why. the contribution did not include in the instructions the code that needs to be added to application_top.php. It should have been right after the instructions for $stylesheet add the following code to application_top.php..somewhere after the $stylesheet instructions. $doctype='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">'; you should read up about doctypes and how they affect page output in different browser. syduck 1 Quote Link to comment Share on other sites More sharing options...
Guest Posted June 23, 2010 Share Posted June 23, 2010 Thanks Bavauto. I've tried to find the style sheet instructions in the application _top file but there doesn't appear to be one. I've even done a search within the document for words 'stylesheet' and 'css' but nothing comes up. Quote Link to comment Share on other sites More sharing options...
npn2531 Posted July 1, 2010 Share Posted July 1, 2010 bavautoM3 has the right answer to the problem. Getting the doctype up to date will most likely solve the IE issue. The first version of OSC to CSS had a variable only for the stylesheet in application_top.php. The doctype was hardcoded in each catalog page as it is in a stock OSCommerce installation. Subsequent versions add a variable, $doctype on each catalog page. Open a catalog page. Look just above the <head> tag where you would expect the doctype to be. You should see either the hardcoded doctype or echo $doctype; If you see the variable, then in application_top.php near the end, where the stylesheet is defined you should see: $doctype='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'; If this is the case, then by changing the definition of the doctype in application_top.php, you easily change the doctype for the entire shop. If you have the older version then add $doctype='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'; to application_top.php above or below the stylesheet definition and then for each catalog page replace the hard coded doctype with: echo $doctype; Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
npn2531 Posted July 1, 2010 Share Posted July 1, 2010 If the doctype doesn't solve the problem here are a couple of links to describe how to set up your stylesheet(s) to handle IE issues: http://www.positioniseverything.net/articles/cc-plus.html http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ Quote Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.