Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

    graphics problem IE

    Hi folks, I'm trying make a header using some gradients. It looks great in firefox and opera, but for some reason, the ends look messed up in IE. I don't understand why. The repeating image used as the background is a slice of the image used for the ends. They are the same gradient color. I don't understand how they don't blend. I have the z-index set so the header title image doesn't get covered by them if the page is resized.
    Has anyone else seen this happen before? I've never seen it.


    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
    <title>testt</title>
    <style type="text/css">
    <!--
    body{
    background-color:#009;
    }
    #toprightcorner{
    background-color:#009;
    position: absolute;
    top :30px;
    right:0px;
    
    }
    #topleftcorner{
    background-color:#009;
    position: absolute;
    top :30px;
    left:0px;
    
    }
    #imgL{
    position: absolute;
    top :0px;
    left:30px;
    z-index:-1;
    }
    #imgR{
    position: absolute;
    top :0px;
    right:30px;
    z-index:-1;
    }
    #imgHWPDX{
    padding-top :60px;
    float:center;
    z-index:1;
    }
    #header
    {
    color:white;
    position: absolute;
    top :30px;
    left:60px;
    right:60px;
    height:125px;
    background-color:#FFF;
    background-image:url(blugradient.png);
    background-repeat:repeat-x;
    
    
    }
    </style></head>
    
    <body>
    <div ID="header"><center><img ID="imgHWPDX" src="HWPDX.gif"></center></div>
    <div ID="topleftcorner"><img ID="imgL" src="blueGradientRoundcorners.gif"></div>
    <div ID="toprightcorner"><img ID="imgR" src="blueGradientRoundcorners.gif"></div>
    </body>
    </html>
    Last edited by TinyScript; 03-21-2009 at 05:49 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's almost impossible to reproduce the error at our end using the above code. A link would be helpful.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The issue is with how IE displays the colors on pngs. Make your gifs pngs and the issue will go away or if you don't want to go that route: http://www.biorust.com/tutorials/detail/231/en/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    TinyScript (03-21-2009)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Works! thank you. Yet another lesson learned. I love this place.


  •  

    Posting Permissions

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