|
|
Posted by Seth Illgard on 04/05/07 16:50
On Apr 5, 11:47 am, "Seth Illgard" <Seth.Illg...@gmail.com> 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?
[Back to original message]
|