SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Site not compatable in IE6 and 7, what should I do

    I have looked everywhere for answers and I cam to this forum and you guys seem to be involved a lot in PHP scripting and stuff like that.

    Anyway, I have an Interspire Shopping cart v5 and it isn't displaying my logo correctly in IE6 or 7. I hav tried changing my banner image from a .png to a .jpg but that doesn't work. I have tried to manipulate some code but I dont really know how, I just took a stab at it. Do you guys have any suggesstions? A lot of my customer base will be using IE6 and IE7 because I have been looking at my traffic stats and a little more than half of them are using these two browsers.

    Can you guys here offer me any suggestions. This problem is mind boggeling to me

    here is my site: hxxp://greengoods2go.c0m (replace x's to t's and the 0 to o)

    (Please dont delete this thread this is a serious problem for me and I thought you guys would be the people to ask. I know I have to wait 3 posts to post a link or something like that but please help me out here. I am not attempting to spam in anyway, thanks mods)

    I know Im a Newb but thank you all in advance for your input. I have been working extremley hard on this and this is my last problem that I need to fix before everything is perfect.

  2. #2
    Twitter: @AnthonySterling silver trophy AnthonySterling's Avatar
    Join Date
    Apr 2008
    Location
    North-East, UK.
    Posts
    6,111
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It's a styleing issue, and the CSS forum would be better suited.

    Although, try adding changing your styles.css...

    Change
    Code:
    #Logo {
        float: left;
        width: 700px;
    }
    to
    Code:
    #Logo {
        float: left;
        width: 700px;
        min-height: 196px;
    }
    I don't do CSS, sorry!
    @AnthonySterling: I'm a PHP developer, a consultant for oopnorth.com and the organiser of @phpne, a PHP User Group covering the North-East of England.

  3. #3
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SilverBulletUK View Post
    It's a styleing issue, and the CSS forum would be better suited.
    I tried it, wont work, but thanks for trying to help! Ill go ask the css department. I hope I dont get in trouble for posting the exact same thing. Mods could you please remove this thread after I have added it to the css portion of the site? Thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other problem that those browsers have is with the object tag. If you are using the object tag for an image, you probably have to switch to the img tag.

    Use conditional comments to insert IE6 and IE7 specific styles for those browsers.

    http://en.wikipedia.org/wiki/Conditional_comments

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE6 and IE7 logo/header failure. Compatability issue

    I have looked everywhere for answers and I cam to this forum and you guys seem to be involved a lot in PHP scripting and stuff like that.

    Anyway, I have an Interspire Shopping cart v5 and it isn't displaying my logo correctly in IE6 or 7.

    I have tried changing my banner image from a .png to a .jpg but that doesn't work. I have tried to manipulate some code but I dont really know how, I just took a stab at it.

    Do you guys have any suggesstions? A lot of my customer base will be using IE6 and IE7 because I have been looking at my traffic stats and a little more than half of them are using these two browsers.

    Would you guys here please be kind enough to offer me any suggestions. This problem is mind boggeling to me

    here is my site: hxxp://greengoods2go.c0m (replace x's to t's and the 0 to o)

    (Please dont delete this thread this is a serious problem for me and I thought you guys would be the people to ask. I know I have to wait 3 posts to post a link or something like that but please help me out here. I am not attempting to spam in anyway, thanks mods)

    I know Im a Newb but thank you all in advance for your input. I have been working extremley hard on this and this is my last problem that I need to fix before everything is perfect.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm guessing it is because on #Header you have a fixed height and IE is respecting that and the content is being pulled up.

    Try just removing the height on #Header
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I'm guessing it is because on #Header you have a fixed height and IE is respecting that and the content is being pulled up.

    Try just removing the height on #Header
    What file should that be located under? styles.css? thanks

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ryan said remove the height from the header but you will also need some haslayout fixes for those wrappers.

    (in styles.css)

    e.g.
    Code:
    #Outer {
        margin-top: 4px;
        clear: both;
        border: 1px solid #aaca3b;
        width:100%;
    }
    #Wrapper {    
       clear: both;
        border-top: 1px solid #aaca3b;
        width:100%;
    }
    /* Header */
    
    #Header {
    /* height removed */
        clear: both;
        margin: 0 0 1px 0;
        padding-bottom: 0;
        width:100%;
    }
    Your logo is actually 800px wide and you have put it in an element that is only 700px wide! How can it fit ?

    If you need it to overlap the form then use a negative right margin to get some overlap.


    Code:
    #Logo {
        float: left;
        width: 800px;
        margin-right:-150px;
    }
    #SearchForm form{float:right;width:277px}
    In the main styles.css files you have styles like this:
    e.g.
    Code:
    #Header {
        border-bottom: 1px solid #4aa1b2;
    <meta http-equiv="X-UA-Compatible" content="IE=7" />;
    }
    That isn't allowed because a meta tag is html and should be in the head of the document and is only needed once. I'm not sure why you think you need to trigger compatibility mode anyway as IE8 is pretty good compared to ie6/7.

    In your IE only css file you have also copied a conditional comment which is not allowed. Conditional comments are html and must go in the head of the document.

    Remove this section from the css to the head of the page.

    Code:
    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    That's should give you a start

  9. #9
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    As Ryan said remove the height from the header but you will also need some haslayout fixes for those wrappers.

    (in styles.css)

    e.g.
    Code:
    #Outer {
        margin-top: 4px;
        clear: both;
        border: 1px solid #aaca3b;
        width:100%;
    }
    #Wrapper {    
       clear: both;
        border-top: 1px solid #aaca3b;
        width:100%;
    }
    /* Header */
    
    #Header {
    /* height removed */
        clear: both;
        margin: 0 0 1px 0;
        padding-bottom: 0;
        width:100%;
    }
    Your logo is actually 800px wide and you have put it in an element that is only 700px wide! How can it fit ?

    If you need it to overlap the form then use a negative right margin to get some overlap.


    Code:
    #Logo {
        float: left;
        width: 800px;
        margin-right:-150px;
    }
    #SearchForm form{float:right;width:277px}
    In the main styles.css files you have styles like this:
    e.g.
    Code:
    #Header {
        border-bottom: 1px solid #4aa1b2;
    <meta http-equiv="X-UA-Compatible" content="IE=7" />;
    }
    That isn't allowed because a meta tag is html and should be in the head of the document and is only needed once. I'm not sure why you think you need to trigger compatibility mode anyway as IE8 is pretty good compared to ie6/7.

    In your IE only css file you have also copied a conditional comment which is not allowed. Conditional comments are html and must go in the head of the document.

    Remove this section from the css to the head of the page.


    [/code]That's should give you a start
    Wow, you guys are really some of the most helpful people I have come into contact with on the net about this issue. Everyone has been telling me, "oh thats so advanced, have no idea!" But you seem to know what you are talking about. RIght now I have to run a few errands but I will make these changes nad see if everything works out by the end of the day. Again, thank you! I can't tell you how much this means to me lol. Its my dream to have my own business like this

  10. #10
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Since this is a css problem, let's move this to a more appropriate location...
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  11. #11
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I made the changes and my site is compatable. Now the only problem is, it won't show the logo in IE6. I think it has something to do with the fact that my logo is a .png file. I found an image converter and I downloaded it but when it converts the image from a .png to a .jpg, they put a big *** stamp on it like a watermark or something. How can I convert this image or code something so that this will now finally be all working?
    But btw the help was really awesome I am happy IE7 is now looking really professional. Thank you very much

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This is confusing as you seem to be offering IE6 a different page as I copied the code from Firefox and the page then display fine in IE6.

    If I copy the code form IE6 I see that you have this code in the html that isn't present in Firefox.

    Code:
        <div id="Logo"> <a href="http://greengoods2go.com/"><img src="http://greengoods2go.com/product_images/spacer.png" style="width: 0; height: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://greengoods2go.com/product_images/logoretry.png', sizingMethod=scale);" border="0" id="LogoImage" alt=" GreenGoods2Go" /></a> </div>
    I suggest you remove that code and let IE6 have the same section of code that Firefox is getting.

    i.e.

    Code:
            <div id="Logo"> <a href="http://greengoods2go.com/"><img src="http://greengoods2go.com/product_images/logoretry.png" border="0" id="LogoImage" alt=" GreenGoods2Go" /></a> </div>
    It looks the png image you are using doesn't need to be transparent anyway so I'm not sure why you are using alpha filter to convert it.

    I have attached a jpg version for you to use as the image you are using is way too big in filesize anyway. I have also attached an optimised png image that is only 25k as opposed to the 180k that your image is.
    Attached Images Attached Images

  13. #13
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thank you all for the good information, now my site is fixed and viewable in all the browsers that it needs to be viewable in. I really appreciate this and if I get rich lol Ill know who all to thank!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •