|
Posted by Seth Illgard on 04/05/07 16:47
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.
[Back to original message]
|