Results 1 to 18 of 18
  1. #1
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214

    Angry damn internet explorer!

    I just spent a good chunk of my weekend preparing my temp. portfolio, coded in w3c compliant XHTML 1.1 and CSS2. I work on a mac and was only testing the site in safari and firefox, both of which worked flawlessy.
    I just checked it out in IE on a friend's comp and it is really not good. The positioning is all of, the transparency in .PNG's does not show, and well... it sucks.

    Check it out >> http://www.jettemedia.com

    Any of you guys have any tips for me to get this working in IE? Also what format do you use for images that have a transparent bg (eg: to use drop shadow) other then .PNG's?

    Thanks for the tips!

  2. #2
    Join Date
    Feb 2003
    Location
    Providence, RI
    Posts
    1,512
    I believe you can use GIF for images that have transparent background. As I'm not an expert in CSS, or web designing in general, I wouldn't able to provide tips to fix the problems.

    Recently, I read several papers and reports about the compatibility issues in CSS and plain HTML, which I surprisingly found that CSS had a much less browser recognition compare to traditional HTML, especially over different platforms.

    BTW, very nice and clean design on my Safari too.

  3. #3
    Join Date
    Dec 2003
    Location
    Vancouver BC, eh?
    Posts
    570
    IE can't produce alpha transparent png's and gifs are 256 colors only (lie a png-8) so you are out of luck there unless you use the javascript hack to fix IE's issue with png's... maybe something like this: http://homepage.ntlworld.com/bobosola/

    Quote Originally Posted by PhilJ
    I just spent a good chunk of my weekend preparing my temp. portfolio, coded in w3c compliant XHTML 1.1 and CSS2. I work on a mac and was only testing the site in safari and firefox, both of which worked flawlessy.
    I just checked it out in IE on a friend's comp and it is really not good. The positioning is all of, the transparency in .PNG's does not show, and well... it sucks.

    Check it out >> http://www.jettemedia.com

    Any of you guys have any tips for me to get this working in IE? Also what format do you use for images that have a transparent bg (eg: to use drop shadow) other then .PNG's?

    Thanks for the tips!

  4. #4
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214
    Hey thanks for the tip Marble, I have never heard of that script before.
    I just installed it now, and I will test it as soon as I get to work.

    Thanks again!

    For the CSS issues I guess I will build a site for IE and detect it with JS. I'd really like to hear how other designers are getting around the compatibility issues with CSS...
    Last edited by PhilJ; 11-28-2005 at 11:16 AM.

  5. #5
    Join Date
    Jul 2004
    Posts
    337
    Did you try to validate? don't forget to validate your style sheet too.

    XHTML requires lower case.

    substitute:
    <SCRIPT LANGUAGE="JavaScript">

    with:
    <script type="text/javaScript">

    Missing ; in:

    /* subtitle bar below the main header */

    #hbar {
    position: relative;


    I made the chages and validated the document. Here's the code:
    (Although I couldn't find a solution for your initial problem)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>JetteMedia Design</title>

    <script type="text/javaScript">
    <!-- Begin

    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=470,height=400,left = 462,top = 259');");
    }

    // End -->

    </script>

    <!--[if gte IE 5.5000]>
    <script type="text/javascript" src="pngfix.js"></script>
    <![endif]-->

    <style type="text/css">
    body {
    padding: 0px;
    margin: 0px;
    }

    /* styles for the column on the left */

    #leftside {
    position: absolute;
    height: 800px;
    top: 0px;
    left: 0px;
    width: 150px;
    border-right-style: solid;
    border-right-color: #ACCA6B;
    border-right-width: 6px;
    padding: 75px 0px 0px 0px;
    background-image: url("images/leftbg.gif");
    background-repeat: repeat-y;
    text-align: center;
    }

    #leftside P {
    font-size: 10px;
    font-weight: normal;
    font-family: Verdana, Helvetica, Sans-serif;
    color: #CCCCCC;
    }

    #leftside h1 {
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Helvetica, Sans-serif;
    color: #ACCA6B;
    }

    #middle {
    position: relative;
    top: -10px;
    padding: 10px 30px 10px 30px;
    margin-right: 0px;
    margin-left: 156px;
    border-top-color: #ACCA6B;
    border-top-style: dotted;
    border-top-width: 1px;
    border-bottom-color: #ACCA6B;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    background-color: #3C3C3C;
    background-image: url("images/leftbg.gif");
    }

    #logo {
    position: absolute;
    top: 10px;
    left: 35px;
    }

    #top {
    position: relative;
    top: 100px;
    height: 200px;
    margin-left:190px;
    }

    /* subtitle bar below the main header */

    #hbar {
    position: relative;
    top: 0px;
    margin-left: -40px;
    margin-right: 0px;
    padding: 0px 5px 0px 10px;
    border-bottom-style: dotted;
    border-bottom-color: #ACCA6B;
    border-bottom-width: 1px;
    border-top-style: dotted;
    border-top-color: #ACCA6B;
    border-top-width: 1px;
    text-align: right;
    }

    #hbar p {
    font-family: verdana, helvetica, sans-serif;
    font-size: 11px;
    color: #383636;
    font-style: italic;
    font-weight: normal;
    }

    /* SubBar below the main content box */

    #subbar {
    position: relative;
    top: -10px;
    margin-left: 156px;
    margin-right: 0px;
    padding: 0px 10px 3px 10px;
    border-bottom-style: dotted;
    border-bottom-color: #383636;
    border-bottom-width: 1px;
    text-align: right;
    background-color: #ACCA6B;
    }

    .subtext {
    font-family: verdana, helvetica, sans-serif;
    font-size: 10px;
    color: #383636;
    }

    /* main header at the top */

    #top h1 {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 20px;
    color: #383636;
    }

    .h1green {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 20px;
    color: #ACCA6B;
    }

    /* Styles for the slides */

    .slide {
    float: left;
    width: 116px;
    height: 104px;
    background-image: url("images/slide.png");
    background-repeat: no-repeat;
    padding: 0px 10px 0px 10px;
    }

    .thumbnail {
    position: relative;
    left: 1px;
    top: -5px;
    }

    .slidelink {
    position: relative;
    top: 73px;
    left: 2px;
    }

    /* styles for the slide links */

    .slide a:link {
    font-family: verdana, helvetica, sans-serif;
    font-size: 9px;
    color: #2E2E2E;
    text-decoration: none
    }

    .slide a:hover {
    font-family: verdana, helvetica, sans-serif;
    font-size: 9px;
    color: #ACCA6B;
    text-decoration: underline;
    }

    .slide a:active {
    font-family: verdana, helvetica, sans-serif;
    font-size: 9px;
    color: #ACCA6B;
    text-decoration: line-through;
    }

    .slide a:visited {
    font-family: verdana, helvetica, sans-serif;
    font-size: 9px;
    color: #2E2E2E;
    text-decoration: none;
    }

    /* clears for the body section */

    .clearslides {
    clear: left;
    }

    #clear {
    clear: left;
    }

    #clearright {
    clear: right;
    }

    /* styles for the news box */

    #newsbox {
    position: relative;
    padding: 20px;
    top: -10px;
    width: 390px;
    margin-left: 156px;
    border-right-color: #383636;
    border-right-style: dotted;
    border-right-width: 1px;
    border-bottom-color: #383636;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    background-color: #EFEFEF;
    }

    #newsbox H1 {
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    color: #383636;
    }

    #newsbox P {
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 11px;
    font-weight: normal;
    color: #383636;
    }

    </style>

    </head>
    <body>

    <div id="leftside">


    <div id="logo">

    <img src="images/logo.png" alt="JetteMedia logo" />
    </div>

    <h1>jettemedia.com</h1>
    <p>2445 E. 28th Ave<br />
    Vancouver, BC<br />
    V5R 1R5</p>
    <p>604.992.6554<br />

    phil[at]jettemedia.com
    </p>



    </div>

    <div id="top">

    <h1>* jette<span class="h1green">media</span> temporary portfolio</h1>

    <div id="hbar">
    <p>Welcome to the temporary design portfolio of Phillipe Jette.</p>
    </div>

    </div>

    <div id="middle">

    <div class="slide">

    <div class="slidelink">
    <a href="javascript:popUp('http://www.JetteMedia.com/aquarius.html')">Aquarius</a>
    </div>
    <div class="thumbnail">
    <img src="thumbnails/aquarius.png" alt="Aquarius logo" />
    </div>
    </div>

    <div class="slide">

    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>

    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="clear">
    </div>

    <div class="slide">

    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>

    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>
    </div>
    </div>

    <div class="slide">
    <div class="slidelink">
    <a href="#">testing</a>

    </div>
    </div>

    <div id="clear">
    </div>
    </div>

    <div id="subbar">
    <span class="subtext">View Next Page >></span>
    </div>

    <div id="newsbox">
    <h1>{November 27th, 2005}</h1>
    <p>Here it is, my brand new, fully re-designed portfolio. This particular version is just a temporary fix, as I am working on a more &ldquo;complete&ldquo; site utilizing the same style. The best part about this one is that it is <b>fully XHTML 1.1 and CSS2 compliant.</b> It's clearly a work in progress, so check back often.</p>
    </div>

    </body>
    </html>
    My woman left me..
    I've got no website..
    I've got no money..

  6. #6
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214
    Yeah, I was going to validate once the site was complete (it still has a long way to go)
    Thanks for checking it out though, it's good to know that those were the only errors thus far. I will also be running the style sheet as an external file once I finish it.

  7. #7
    Join Date
    Jul 2004
    Posts
    337
    If you add:
    position: relative;
    to the class named slide, then the thumbs do show up. I'm not sure if this is the right solution to your problem. I'm not an expert.
    My woman left me..
    I've got no website..
    I've got no money..

  8. #8
    Being new to all things web - we read up a bit and got the idea that CSS was the way to go. We naively thought that CSS was the answer to any/every compatibilty problem.

    Down the line a bit we find we have the opposite problem - ie site works fine in IE6, which is what we built and tested it on, but as for firefox etc its a mess.

    So much for CSS being the answer.

    BTW - your site looks cool - sorry cant offer any coding advice

  9. #9
    Join Date
    Nov 2003
    Location
    Dallas, TX
    Posts
    263
    You can't use transparent png's. Period. They work with very browser on earth except IE and probably never will. Then IE has this absolute positioning thing, blah blah blah.

    I went to your site and you took enough time to script it to tell me that the IE version isn't ready???? It's not that hard to code for all browsers. W3c can be interpreded wrong and you get into a paradox between browsers. Your best bet is to follow the basic rules. Maybe you are over complicating things? I truly wish there were rules for browsers but their isn't.

    Just my 2 cents.

    J



    Quote Originally Posted by PhilJ
    I just spent a good chunk of my weekend preparing my temp. portfolio, coded in w3c compliant XHTML 1.1 and CSS2. I work on a mac and was only testing the site in safari and firefox, both of which worked flawlessy.
    I just checked it out in IE on a friend's comp and it is really not good. The positioning is all of, the transparency in .PNG's does not show, and well... it sucks.

    Check it out >> http://www.jettemedia.com

    Any of you guys have any tips for me to get this working in IE? Also what format do you use for images that have a transparent bg (eg: to use drop shadow) other then .PNG's?

    Thanks for the tips!
    Last edited by ePlanetDesign; 11-30-2005 at 06:25 AM.
    Custom Website Design, Website Maintenance, WHMCS/AWBS themes.
    Custom Web Design
    Website Maintenance - Website Management - Website Updates
    Contact US

  10. #10
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214
    It's not that hard to code for all browsers.
    Well thanks for the help, but if I wasn't having trouble I wouldn't have made the post

    Your best bet is to follow the basic rules.
    Thes site validates XHTML 1.1 what are these other basic rules you speak off?

    And yes I can use transparent png's, and I did. period.
    Using the javascript .PNG hack for IE, ie works like a charm.

  11. #11
    Join Date
    Jul 2004
    Posts
    337
    Hmm.. it seems like you haven't tried my suggestion.
    If you add:
    position: relative;
    to the class named slide, then the thumbs do show up.
    At least you can give feadback when someone is trying to help. it encourages people to try and help eachother.. I've seen a lot of thread starters wanting help just disappear without leaving feadback to those who made replies to their posts. Ok, you didn't, but I took time and downloaded a local copy of your code and tried to find a solution - and I think I did - to your problem.. Don't you think it's worth a feadback? No thanks, just confirmation. We're all learning by doing. Many others may encounter the same problem as you did. Telling them a suggested solution worked for you may help them too.
    BTW, the link is not referring to the page in question anymore. It's better that you uppdate it to point to your portfolio to avoid confusion.
    Thanks.
    My woman left me..
    I've got no website..
    I've got no money..

  12. #12
    Join Date
    Nov 2003
    Location
    Dallas, TX
    Posts
    263
    Hi PhilJ, Sorry about the generalizations. Believe me I know how aggrevating it can get. And personally I don't think I would resort to using a js solution just to show png's but then again I'm not in your shoes.
    Custom Website Design, Website Maintenance, WHMCS/AWBS themes.
    Custom Web Design
    Website Maintenance - Website Management - Website Updates
    Contact US

  13. #13
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214
    Hi Webdesign,

    I do apologize for not commenting on your fix, I did in fact try it out but have yet to upload it to my site. I very much appreciate the help, and you are right it does fix that problem, and I will be uploading the updated page shortly.
    I put up my old main site while I work out the bugs in the new design, which is why you are seeing a different page.
    For the time being, please view the portfolio (the page with the issues) at:
    http://jettemedia.com/portfolio.html

  14. #14
    Join Date
    Nov 2003
    Location
    Dallas, TX
    Posts
    263
    Coding should not be this much trouble... sheesh.
    Custom Website Design, Website Maintenance, WHMCS/AWBS themes.
    Custom Web Design
    Website Maintenance - Website Management - Website Updates
    Contact US

  15. #15
    In fact IE provide broken support on PNG. Perhaps it isn't what looks better, it's what are you missing? In my personal experience all sites I am viewing in firefox looks good, but that's purely subjective. Few experts suggest design for firefox, check it in opera and then fix for IE.

  16. #16
    Quote Originally Posted by ePlanetDesign
    You can't use transparent png's. Period. They work with very browser on earth except IE and probably never will. Then IE has this absolute positioning thing, blah blah blah.
    You can get IE to display PNG's properly, you just have to hack it like crazy. The only down side is that you can't use the images directly as links because you have to use them as backgrounds to DIV's. You add this code to the CSS properties of a DIV:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='scale');

    Then you set the width and height of the DIV to the size of the image. I suppose if you really wanted to add a link to it, you could create a fully transparent GIF that you could put in the DIV and place the anchor tags around it. I developed the following code in PHP so that I could easily use PNG's in my pages. Of course, I used some other PHP code (not mine) to detect which browser was being used.

    function getpng($path, $sizer=true) {
    $a_browser = browser_detection('full');

    if ( $a_browser[0] !== 'ie' ) {
    echo " background: url('$path'); ";
    if ($sizer) sizer($path);
    }
    else {
    echo "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$path',sizingMethod='scale');";
    if ($sizer) sizer($path);
    }

    }

    function sizer($path) {
    list($width, $height, $type, $attr) = getimagesize($path);
    echo ' width: '.$width.'px; height: '.$height.'px; ';

    }


    I use something like this in my PHP pages:
    <DIV style="<?php getpng("somefile.png"); ?>"></DIV>
    Last edited by Jeremy2; 12-03-2005 at 03:12 AM.

  17. #17
    Join Date
    Jan 2003
    Location
    Vancouver
    Posts
    214
    That's pretty much what I ended up doing. I figured that most browsers these days have javascript enabled, so I should be fine.
    I think one of the bigger problems is also that IE for Mac and IE for windows are 2 completely different platforms, which ads another variant to the mix.
    I'm on the right track now though. As was stated earlier, I think I was making things more difficult then I really had to. Simple is better!

    Thanks alot for all the help guys!

  18. #18
    Gifs support transparency as well. You can save the image file in Photoshop 7 to support transparency, this way you can use gif instead of PNG and it will be supported most of the browsers.

Posting Permissions

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