IE CSS image overlap

Discussion in 'HTML' started by Seth Illgard, Apr 5, 2007.

  1. Seth Illgard

    Seth Illgard Guest

    Hi, Im writting a custom CMS and everything looks great, except when I
    see the results in IE. What im trying to do is:

    *Have an image in a layer (or relative positioned, or just margined).
    The exact image's coordinates depends in the window size (Fluid
    design)

    *The image should display correctly in front(above) another image
    (header image)

    *The image should link to another site (<a href>)

    I have tryed:

    *Set the image position to "relative" and move it from its original
    position. Seems like te better option to me, but the problem is that
    the content below the image acts like if the image would still be
    there (static positioned). That results in an awful white space in the
    design (a hole).

    *Set the image position to absolute. Not working because when I resize
    the window, the image wont be in the correct position anymore.

    *Let the image be in position: static, and fix its position using
    margins. Worked! Except on IE 6 and 7 where the image tries to display
    itself below the other image i mentioned (he header image). I need the
    image to show above the header, not below it. Tryed to adjust CSS
    styles like "overflow" and "zIndex". None worked.

    And, the other problem is that when I set the <a href> of the image,
    all browsers except from ophera show an awful blue(purple?) margin
    around the image. This dissapears when i dont set the <a> tag around
    the image.

    Here is the XHTML code generated by my CMS (The layout table is from
    the template, designed in dreamweaver) :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns='http://
    www.w3.org/1999/xhtml'><head><title>BlueCore</title><meta http-
    equiv='expires' content='-1' /><meta http-equiv='pragma' content='no-
    cache' /><meta http-equiv='Content-Type' content='text/html;
    charset=iso-8859-1' /><style type="text/css">
    <!--
    body {
    background-color: #000000;
    }
    .default {color: #FFFFFF}
    .lateral {
    color: #000000;
    font-size: 12px;
    margin: 10px;
    padding: 10px;
    }
    -->
    </style><script type='text/javascript' languaje='javascript'
    src='../../bluecore/sistema/javascript/mootools.js'></script><script
    type='text/javascript' languaje='javascript' src='../../bluecore/
    sistema/javascript/swfobject.js'></script><script type='text/
    javascript' languaje='javascript' src='../../bluecore/sistema/
    javascript/pngIe6Fix.js'></script><script type="text/javascript"
    languaje="javascript">window.addEvent("domready", function(){new
    Png();});</script></head><body>

    <div align="center">
    <table width="800" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
    <!--THIS IS THE HEADER IMAGE-->
    <td height="182" colspan="2" valign="top"><span
    class="default"><div style='width: 800px;height: 208px;z-index:
    -1;'><img src='../../bluecore/sistema/panel/diseno/bluecore/imagenes/
    cabecera.jpg' width='800' height='208' /></div></span> </td>

    </tr>
    <tr>
    <td width="227" height="584" valign="top" bgcolor="#B3F4FF">
    <!--AND THIS IS THE IMAGE I WANT ABOVE THE HEADER IMAGE-->
    <div style='width: 53px;height: 61px;position: relative;margin-
    left: 120px;margin-top: -45px;z-index: 10000;overflow: visible;'><a
    href='http://www.google.com' target='_self'><img src='../../bluecore/
    sistema/panel/diseno/bluecore/imagenes/www.png' width='53'
    height='61' /></a></div>
    <div align="right">
    <p align="right" class="lateral"><font face="Geneva, Arial,
    Helvetica, sans-serif"><strong>Para empezar seleccione una opción del
    menú</strong></font></p>
    </div></td>
    <td width="573" valign="top"><span class="default">{Contenido}</
    span></td>

    </tr>
    </table>
    </div></body></html>

    By the way, you can check the progress of the CMS in http://bluecorecms.blogspot.com

    Thank you very much in advance. Im not good at all at those Browser
    Quirks and CSS.
     
    Seth Illgard, Apr 5, 2007
    #1
    1. Advertising

  2. Seth Illgard

    Seth Illgard Guest

    On Apr 5, 11:47 am, "Seth Illgard" <> wrote:
    > Hi, Im writting a custom CMS and everything looks great, except when I
    > see the results in IE. What im trying to do is:
    >
    > *Have an image in a layer (or relative positioned, or just margined).
    > The exact image's coordinates depends in the window size (Fluid
    > design)
    >
    > *The image should display correctly in front(above) another image
    > (header image)
    >
    > *The image should link to another site (<a href>)
    >
    > I have tryed:
    >
    > *Set the image position to "relative" and move it from its original
    > position. Seems like te better option to me, but the problem is that
    > the content below the image acts like if the image would still be
    > there (static positioned). That results in an awful white space in the
    > design (a hole).
    >
    > *Set the image position to absolute. Not working because when I resize
    > the window, the image wont be in the correct position anymore.
    >
    > *Let the image be in position: static, and fix its position using
    > margins. Worked! Except on IE 6 and 7 where the image tries to display
    > itself below the other image i mentioned (he header image). I need the
    > image to show above the header, not below it. Tryed to adjust CSS
    > styles like "overflow" and "zIndex". None worked.
    >
    > And, the other problem is that when I set the <a href> of the image,
    > all browsers except from ophera show an awful blue(purple?) margin
    > around the image. This dissapears when i dont set the <a> tag around
    > the image.
    >
    > Here is the XHTML code generated by my CMS (The layout table is from
    > the template, designed in dreamweaver) :
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns='http://www..w3.org/1999/xhtml'><head><title>BlueCore</title><meta http-
    > equiv='expires' content='-1' /><meta http-equiv='pragma' content='no-
    > cache' /><meta http-equiv='Content-Type' content='text/html;
    > charset=iso-8859-1' /><style type="text/css">
    > <!--
    > body {
    > background-color: #000000;
    > }
    > .default {color: #FFFFFF}
    > .lateral {
    > color: #000000;
    > font-size: 12px;
    > margin: 10px;
    > padding: 10px;
    > }
    > -->
    > </style><script type='text/javascript' languaje='javascript'
    > src='../../bluecore/sistema/javascript/mootools.js'></script><script
    > type='text/javascript' languaje='javascript' src='../../bluecore/
    > sistema/javascript/swfobject.js'></script><script type='text/
    > javascript' languaje='javascript' src='../../bluecore/sistema/
    > javascript/pngIe6Fix.js'></script><script type="text/javascript"
    > languaje="javascript">window.addEvent("domready", function(){new
    > Png();});</script></head><body>
    >
    > <div align="center">
    > <table width="800" border="0" cellpadding="0" cellspacing="0">
    > <!--DWLayoutTable-->
    > <tr>
    > <!--THIS IS THE HEADER IMAGE-->
    > <td height="182" colspan="2" valign="top"><span
    > class="default"><div style='width: 800px;height: 208px;z-index:
    > -1;'><img src='../../bluecore/sistema/panel/diseno/bluecore/imagenes/
    > cabecera.jpg' width='800' height='208' /></div></span> </td>
    >
    > </tr>
    > <tr>
    > <td width="227" height="584" valign="top" bgcolor="#B3F4FF">
    > <!--AND THIS IS THE IMAGE I WANT ABOVE THE HEADER IMAGE-->
    > <div style='width: 53px;height: 61px;position: relative;margin-
    > left: 120px;margin-top: -45px;z-index: 10000;overflow: visible;'><a
    > href='http://www.google.com'target='_self'><img src='../../bluecore/
    > sistema/panel/diseno/bluecore/imagenes/www.png'width='53'
    > height='61' /></a></div>
    > <div align="right">
    > <p align="right" class="lateral"><font face="Geneva, Arial,
    > Helvetica, sans-serif"><strong>Para empezar seleccione una opción del
    > menú</strong></font></p>
    > </div></td>
    > <td width="573" valign="top"><span class="default">{Contenido}</
    > span></td>
    >
    > </tr>
    > </table>
    > </div></body></html>
    >
    > By the way, you can check the progress of the CMS inhttp://bluecorecms.blogspot.com
    >
    > Thank you very much in advance. Im not good at all at those Browser
    > Quirks and CSS.


    I forgot to say that the header image is a jpg and the image that im
    tryng to position is a png image. Does this have something to do with
    IE lack of support for pngs?
     
    Seth Illgard, Apr 5, 2007
    #2
    1. Advertising

  3. Scripsit Seth Illgard:

    > I forgot


    You forgot to post the URL and to learn how to quote on Usenet.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Apr 5, 2007
    #3
  4. Seth Illgard

    Seth Illgard Guest

    On Apr 5, 12:58 pm, "Jukka K. Korpela" <> wrote:
    > Scripsit Seth Illgard:
    >
    > > I forgot

    >
    > You forgot to post the URL and to learn how to quote on Usenet.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    Hey, no need for being agressive. I have no URL, I simply cant
    liberate a still buggy system. It chanes everyday and I dont have a
    stable version yet. So, the better I can do is show you the code
    generated.

    You are right. I dont know how to quote on the Usenet. Ill investigate
    this right on.

    On the other hand. I solved the link problem just adding "border='0'"
    to the image tag. Hope it helps others.

    Ill do my best to get a php host and upload a functional demo.

    Thanks for your.....help.
     
    Seth Illgard, Apr 5, 2007
    #4
  5. Seth Illgard

    Seth Illgard Guest


    > You forgot to post the URL and to learn how to quote on Usenet.


    Hey, no need for being agressive. I have no URL, I simply cant
    liberate a still buggy system. It changes everyday and I dont have a
    stable version yet. So, the better I can do is show you the code
    generated.

    As you can see, thanks to your....advice...I learned how to quote on
    the usenet. Google groups hides the quoted text so I didn´t saw a
    problem the first time I quoted. Now I see your point.

    On the other hand. I solved the link problem just adding "border='0'"
    to the image tag. Hope it helps others.

    Ill do my best to get a php host and upload a functional demo.

    Thanks for your.....help.
     
    Seth Illgard, Apr 5, 2007
    #5
  6. Seth Illgard

    Bergamot Guest

    Seth Illgard wrote:
    >
    > I have no URL
    > Ill do my best to get a php host and upload a functional demo.


    You don't need to go that far. You apparently have the generated code.
    Save that as a web page and upload it to a publicly accessible server.
    If the real domain isn't public, try your ISP. Most give some free space
    to their users. There's even yahoo/geocities if you're desperate.

    --
    Berg
     
    Bergamot, Apr 5, 2007
    #6
  7. Seth Illgard

    Seth Illgard Guest

    > You apparently have the generated code.


    Hehehe, so stupid I am. I just realized that and I quickly deleted my
    last message so nobody will notice my stupidity.

    Well, actually, two great news:

    1: Got a host. A friend of mine created a subdomain for me.
    URL: http://www.bluecore.alterwaremedia.com/

    2.- Problem solved. I used a relative postioning. And a "border='0'"
    on the image tag t correct the link.

    IE seems to take the image from the center (as all the table is
    centered) while other browsers take it from the left of the cell.
    Check the URL in IE and in FF.


    Thanks for the help.
     
    Seth Illgard, Apr 5, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SklNLkgu?=

    components overlap

    =?Utf-8?B?SklNLkgu?=, Jul 29, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    353
    =?Utf-8?B?SklNLkgu?=
    Jul 29, 2004
  2. =?Utf-8?B?V1RT?=

    combo box overlap pull down menu

    =?Utf-8?B?V1RT?=, Dec 3, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    647
    Jason
    Dec 3, 2004
  3. Joey Harris
    Replies:
    2
    Views:
    889
    Tim Tyler
    Jan 2, 2004
  4. D to the O to the M

    html input image overlap

    D to the O to the M, Nov 27, 2003, in forum: HTML
    Replies:
    1
    Views:
    2,958
    Michael Wilcox
    Nov 27, 2003
  5. Rich
    Replies:
    8
    Views:
    1,711
Loading...

Share This Page