SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS breaks in IE5 for Macintosh

    I've recently been working on building/designing my personal site according to XHTML and CSS standards. So far, nearly everything has gone smoothly and I've learned tons about standards while having lots of fun. However, I have encountered one small problem: a part of the layout in my portfolio section breaks when viewed with Internet Explorer 5 for the macintosh. I've tested the site in IE5/NS6/Mozilla/Opera on a PC (the design is hidden from older browsers) and IE5/NS6/Mozilla on a Macintosh, and it appears that IE5 for Macintosh is the only browser in which this particular bug occurs. I'm not sure what's going on here, probably something to do with my hacked-together code for this particular section.

    Here's the actual page:
    http://www.digital-hearth.com/portfolio/web.html

    Here's a page with screenshots (.gif) of both the correct version, the buggy version, and the parts of the css and html which controls the presentation:
    http://www.digital-hearth.com/portfolio/incorrect.html

    Here's a link to my main style sheet:
    http://www.digital-hearth.com/style/mainstyle.css

    If anybody has any suggestions or tips on how to hack through this little bug (although it might not be a bug, could just be my crappy code), they would be utterly appreciated. Failing that, if there is somewhere else that I should be asking this question, perhaps you could point me in the right direction? Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the same problem .. my site looks great .. in everything .. but in IE 5 on the mac . it screwed up.

    Code:
    .validtags
    {
    	position: absolute;
    	top:100%;
    	left:50%;

    at this point .. I am ready to blow off IE5 for the Mac

    It's validates CSS and XHTML Strict .. I don't know what else I can do.

    if you figure something out .. post it here.


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to throw in my .02--

    I FEEL YOUR PAIN, MY FRIEND.

    I'm working on completing a site that is a slightly oddball blend of Flash, HTML and CSS. I'm a Machead (but don't hold that against me) and my primary browser is IE 5.1. I have seen a couple of utterly inexplicable problems, one of which ultimately forced me to omit something I considered integral to the entire design. I may NEVER figure out why it trashed the page...no reason at all that I can see.
    And tonight, by introducing a new style element (all are document-level), the new one caused a previous one to simply vanish. It's only a 6-pixel bar, width 100%, but adding a third, similar element made the second one disappear.

    Haven't yet looked at your code, but just wanted to relay my experience.

    Sorry you're having problems; you might just have to assess your visitor base, and either alter your design or follow Chuckie's suggestion.

    Gone nuts --
    Bryan T

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a thought, but maybe the foliofeature class would benefit from position, top and left attributes.

    The position would of course be specified as relative.

    Given where the code is breaking I would say it is either this or something to do with the <br /> that you are using to move the divs to the next line.

    As i said, just an idea (or two).

    While I don't exactly fawn over IE5 for Mac, it is widely understood to be amongst the very best for supporting standards.
    Of the few times that problems do crop up in IE5's interpretation of a page, all of those that I recall have been traced back to an error or something wrong with the efficiency of the code.
    Last edited by Bill Posters; Apr 20, 2002 at 01:28.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Out of curiosity I ran a few tests and discovered that it was the...


    <span class="lefttwo">


    ...that was the source of the problem (at least in my tests on MAc IE5.1)

    I simply removed them from around the foliofeature divs and the page rendered correctly (css and positioning).

    It would seem to be a conflict of style attributes or a specific problem with the nested classes in this particular instance.

    --

    Fwiw, in the CSS file it would be better if you kept the div style attributes attached by id instead of creating extra classes.

    Some of the code in the CSS doesn't look particularly clean and efficient.


    div.foliofeature span.lefttwo {
    float: left;
    width:320px;
    }


    lefttwo in this case could simply have been specified as a class just on its own...


    .lefttwo {


    As it turns out, it would appear that it isn't need at all and only seems to create layout conflicts.

    I'll be interested to hear how the page renders without it in other browsers.

    --

    Also, you have a lot of repeated style attributes that is bloating the CSS file unneccessarily.
    If you specify an attribute for p, then it will propogate to every instance of p unless you add those specific attributes to an classified instance (i.e...

    p.mystyle {...

    This bloating is especially evident with the font-family attributes which are covered with the basic p, but then repeated on every class attached to p in the CSS file.


    Anywho, I hope this has been helpful
    Last edited by Bill Posters; Apr 20, 2002 at 04:12.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Zealot Tiggy's Avatar
    Join Date
    Mar 2002
    Location
    Lancashire, UK
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having the same problem with IE on a Mac (or so I'm told) but I'm unable to fix it as I don't have the hardware to check it out. I suspect I know what the problem is (margins,paddings and the like) - but fixing it is next to impossible when you can't do any real-time checks.

    Sometimes I wonder if it is worth it at all, but I guess I need to address the problem sooner or later. I don't suppose there are any Mac owners out there with a few minutes to spare who could help me make the tweaks is there... previous help I was offered dried up. Thanks in advance to anyone who can help me out.

    BTW - anyone know any tools/sites useful in building/testing Mac IE friendly code?

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tiggy, upload a screenshot of how it should look and i'll take a look to see if i can find the problem.

    Fwiw, the most popular browser for mac is IE5+.
    With IE 5+ being so hot on standards it is usually only a matter of getting the code 'correct' rather than figuring a hack or workaround to get it to work properly for macs.
    Last edited by Bill Posters; Apr 20, 2002 at 10:37.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Zealot Tiggy's Avatar
    Join Date
    Mar 2002
    Location
    Lancashire, UK
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks for offering to take a look

    Ok - I've got a screenshot of it at http://websiteowner.info/pagelayout.gif for anyone that wants to take a look. If you are working on the code, you can ignore implications of style sheet tweaks on other browsers as IE for the Mac will end up having it's own style sheet anyway.

    Thanks again for your help - much appreciated!

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill

    I am not sure what you mean by coding correctly.. I am also having a problem in Mac IE 5 + .. but all my code validates .. including my CSS .. I am not sure what else that can be done.. the Style Sheets work grreat on every other browser, except Mac IE 5 + .. I don't really think it is worth my time to try to fix a problem that only looks bad on one browers out of 6 or 7 browsers.


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  10. #10
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill - Your suggestion to eliminate the .lefttwo class was brilliant. I left the .left class in and simplified it. The style for the left span is now

    .left {
    float: left;
    clear: left;
    width:109px;
    }

    Someone on a mailing list gave me the idea to add the clear: left; style, and that seems to take care of my problem in every major browser (ie5, ns6, mozilla, opera) that I checked it in.

    The fixed page:
    http://www.digital-hearth.com/portfolio/web.html

    I am also planning on simplifying my style sheet to reduce the bloating. I was not aware that an attribute automatically applies to all other instances of a class. Thanks for everybody's input and help on this, hopefully I'll be able to return the favor soon.

    Alex.

  11. #11
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    zizekian--

    did you write that script that allows the different font styles/sizes? Thats pretty cool

  12. #12
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alas, I did not write the style-switching javascript (I should probably add a little comment tag into my code as a disclaimer). That honour goes to Paul Sowden of idontsmoke.co.uk fame. You should check his site out, he's got a little portion dedicated to the styleswitcher and how to implement it. Unfortunately, it doesn't work in Opera quite yet due to Opera's somewhat shoddy support for the DOM, but it should be coming soon...here's his site: http://idontsmoke.co.uk

    Have fun experimenting with this!

  13. #13
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    zizekian, if you want one that works with all browsers, this script might be more up your alley. I know I use it and prefer it, so that should be good enough for you.

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by zizekian
    The fixed page:
    http://www.digital-hearth.com/portfolio/web.html
    ...and is pixel perfect on Mac IE5 / Opera 5 / Netscape 6.2 and Mozilla 0.9.9.

    Of course, Netscape 4.7 is left out in the cold, but seeing as you have the XHTML DTD, that clearly isn't an issue.

    I don't bother coding for it anymore either.


    Glad to have been of help
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •