Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

OCS to CSS - IE problems


Guest

Recommended Posts

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;

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

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

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/

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...