SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Problems Yet Again!

    I have a left column that is looking fine in FF and IE7, but it IE6 it is way off. Can someone take a peak at this thing and please tell me what the heck is going on?

    I have attached some picts to show what is going on.

    Thanks Daniel

    http://www.polywood-furniture(dot)com
    Last edited by danielc1234; Feb 4, 2010 at 20:45.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Some background on the problem:

    This is a content-first setup, with .wrapper wrapping the whole page, and inside a #header, then a #middle-container who is 100% width and floated left, with breadcrumbs and main content inside it; then left and right columns (the pages with both left AND right columns are fine, but pages with only a left column have the left column in the wrong place), and then #footer.

    The page is using the Layout Gala's trick of having the sidebars come later in source, then floated left, and with a left margin moved into place. For modern browsers the left margin on the left column is -100%, and for IE6 there is a px amount (-980px) since it seems to have trouble with % margins (it uses the whole page, or the body, as a reference instead of staying within .wrapper).

    So for some unknown reason, pages with two columns have the sidebar not far enough over, while pages with three columns are just dandy. Layout is set on .wrapper, of course the floats, and Layout was tried on the main content (who otherwise just has side-margins to make room for the columns). The sidebar is correctly affected by CSS when adding a background colour to it using * html (body class) .col-left, but setting different margin amounts seems to do nothing at all.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Can anyone help this?? It seems to be so basic, yet nothing works.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the main reason no one has attempted to sort this is the huge amount of compacted, unformatted css that is impossible to read, diagnose, or find anything in....

    As this is a base layout issue, it should have been noticed and acted upon way before the site ever got to this stage - trying to debug a site for IE6 after it is finished is asking for a mammoth task.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yesh I couldn't read that CSS either. And they all conflict with each other: several mentions of the same element with completely different CSS. I don't understand why everyone says templates are so great. They're a nightmare.

    What this is was, a pre-made template which had sidebars before the content. Which was fine on the original page. This business, however, has one of those super-long product menus... so Daniel was trying to switch the source order and use the Layout Gala idea to move the sidebars back into place. I was trying to help him do that, and managed to do so for all the other browsers, and IE6 on three-col pages... but I don't understand how templates work, so I have no clue why my CSS, no matter how specific, doesn't affect IE6 (on some pages).

  6. #6
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need some help! There has to be an answer why this is happening. The way it works is the css sheets have a default set of css which is over written by a custom sheet. If for some reason the default sheet is not over written then that could be the code throwing things off. Isnt there a way to tell what css should work? and then I could try to throw that in the modified CSS sheet.?

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trouble is that it is extremely difficult to tell what styles are actually being applied to an element in IE - the amount of conflicting styles just about crashes my WAT developer toolbar functions. There is a conditionally linked stylesheet as well as a number of star-html hacks within the other stylesheets - if you are trying to implement a style within the conditionally linked sheet, it could very well be overwritten by one of the star-html styles as they are more specific.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But if it is pertaining to just that left column, isnt there a way to just address that part or section of the page? I can revert back to the original before all the added CSS, but the page loads the left nav before some of the content, making the content very low on the page, which is not good.
    The css with the * html is what Stomme poes has added to try and over ride some the other css to make parts of the page work as well.
    Can you even make a suggestion on what to try?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hmm just spent ome time trying to debug it..try setting the leftcolumn to position:static; becaue it seems to have styles moving it with postiion:relative; set on it. Do it in the less then IE7 stylesheet.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The star hacks are mine, because I didn't want to play with the IE stylesheet (I did look at them, to check to see if they were affecting large elements... it was hard to tell because the class of "header" for example was also being given to actual headers (h3's and h4's)). So I felt safer putting the star hacks in the single "override" sheet. While I can understand an IE6 sheet, there really is no reason for an IE7 sheet, but that one looked like little things. Bot my IE's were very very slow in loading the pages, as well as my other machine at work (!) but IE7 on Daniel's machines always loaded very fast for him. Both my Tredosoft IE6 and my "native" IE6 crashed easily on page reloads.

    I also wonder if there is already a Magento template out there which already starts out with a Layout Gala (or similar) setup. That might be so much easier... I'd never heard of Magento before, but now I've seen a whole pile of them on TemplateMonster.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I can't find WHICH stylesheet it is (probably the main now that you mentinoed the star HTML hacks).

    Stommie, did you ever mess with the leftcolumn via your code? If so can you post it? I think I have a pretty darn good idea what is causing the left column problem.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah here's what he had:

    Magento comes with thousands of nasty little css sheets... and then gives you one that you can write your own stuff in. It gets listed last, so it overrides the other styles, but you know how that doesn't necessarily always work. Nasty nasty things.

    The overrider is called mainthemes.css. It's folder is buried under thousands of onion layers lawlz, but here's my version (currently online too I think):
    http://stommepoes.nl/Tests/tempmaintheme.css

    this is the basis of a three-column page (what I was working from) which is mostly empty because of the PHP junk... I don't speak PHP:
    http://stommepoes.nl/Tests/3columns.html

    So I had copied his mainthemes.css and tried my hand at it, so what's there now has my changes (mostly on the large elements, I didn't really touch the little things further down, except to readjust the header... everyone had unnecessary widths and padding and later this got in the way.

    Edit, getting to his own sheets is kindof hard, and there's some Tidu-like program which shoves everything into one line : ( Doing a View Css from the browser doesn't really give you anything readable.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I'll chec out his styles via developer toolbar...might find some interesting things in there (the lt ie7 stylesheet contained nothing) so th IE all stylesheet and the regular stylesheet should do me just fine

    Off Topic:

    I noticed that single lin..I HATED IT!!


    I notice that the left -100% margin is the problem. It isn't enough. I resolved it by doing this
    Code:
    * html .col-left{margin-left:-121% !important;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah, nope. IE6 has trouble with margin-left: 100% no matter what.

    So what I had given IE6 for the three-col version (and worked) is an actual pixel amount. Because 121% will looks different on a wider screen-- IE6 seems to ignore the wrapper and uses the body as the reference for some reason. On another page with similar techniques, making the browser window smaller made the sidebar slide towards the right side under x pixels (with a % margin). You can get some interesting effects with it.

    So because the wrapper has a set in px width, it's safe enough to set it to
    margin-left: -980px;

    However we tried changing it to something ridiculous like margin-left: -1200px and that didn't budge the front page.

    Lemme say again, the styles seemed to be working for paged with columns (most pages). However the 2-col pages, like the main page polywood-furniture.com, are the ones where, no matter what margin we set, it didn't budge.

    Setting a red background colour DID appear, so we know we're targetting it.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Yea I was havig major trouble styling it-that's why I slapped on !important because something else seemed to be overriding it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yknow, I avoid important like the plague, so it never occurred to me to actually try adding it there... it just might work.

    Daniel, in the maintheme.css, where I can haz line about the * html (bodyclass) col-left {margin-left: -980px;} add the !important line after the -980px and see if that does anything?

  17. #17
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, I made the changes in the maintheme.css which is the file that over rides the default css, but I cannot check it since I do not have IE6.
    Stomme poes has been helping out a lot and has gotten the page to look great in IE7 and FF.
    The thing with the css files is, I have complete control over any and all sheets. I can take away the default sheet, but I know there is a bunch of stuff in there that is controlling quite a bit within the site, so I'm a little leary about pulling it out of there.
    I'm just really trying to get something good here as far as css goes, so I have a good foundation to go from. My goal is to have this be the template for other projects, etc.
    Thanks for all your help guys!

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Stommie I tried it out locally and it worked sooooo yea...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes I added this to the line. The one about the (body)...I'm not sure which one you are referring to.
    Is there a way for me to test multipal IEs?


    * html .col-left {margin-left: -980px; !important;}


    I have tried to view in Tredosoft IE6, but looks like crap. So not sure if it's my machine or the actual site.

  20. #20
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme when I used the -980px version, it did nothing, but when I used a percentage like
    * html .col-left{margin-left:-117% !important;} it seems to have moved the left column in place or at least close. There seems to be some problems with the widths, etc and the top nav tabs seem screwed up. I got Tredosoft IE6 running and that is all I have to test it with. Can someone else take a peak at this in IE6 and let me know?

  21. #21
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A big issue in IE6 was the centre container being pushed way too wide, and I found out it is this rule :
    Code:
    .col-main-2-col-left{margin:0
    200px;padding:5px;float:none;width:770px}
    applying 200px margin to both sides - it should only be the left side, so change it to :
    Code:
    .col-main-2-col-left{margin:0 0 0 200px;padding:5px;float:none;width:770px}
    Then the -980px left margin for IE6 will work.

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yup, I could just barely see in my other machine's monitor that the middle part was stretching off-screen (I couldn't see how far).

    The point was to have #middle-container's .col-main child have margins on both sides, on the pages with a column on either side, and with only a single left margin on the pages with one side column. So there became a single-container and a double-container or some similar names.

    We need to double-check those names. There was a different name for #middle-container when the col-main inside was supposed to have no sidebars, one sidebar, or two.

    I'm seriously wondering if Magento has a content-first three-col setup already pre-built somewhere. They've got to-- it's a popular (and normally simple) technique.

  23. #23
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the side column issue is finally solved. I have just a few more problems with IE6 and hopefully these are easy (for you guys!!!)
    I have attached two images. whatlookslikeIE6.jpg is what is happening in IE6 (obviously) and the other is what is should look like.

    Here is what is happening.
    1) the payment options jpg should be in the blue section (banner)
    2) that whole 'banner' section should be 980px with a background of white and that background blue images with a spacing of 5px on left and right. So you see white on either side.
    3) the blue tabs are messed up. They should hover blue tabs and be blue when on that certain page. Right now they all look blue and only showing the left and right images of the tabs without the middle section. And all are ON. The text changing colors works.

    Please could someone take another look at this?? Thanks for all your help!
    Last edited by danielc1234; Feb 4, 2010 at 20:45.


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
  •