PDA

View Full Version : pop-up windows won't work in IE


dolphdawg
07-30-2007, 08:52 PM
Hello all
I'm new with CSS and DW I am having problems with IE when I test my pages.
I already posted this in the general dreamweaver threads and I apologize for the double post, but perhaps this is more of a CSS problem.

I have thumbnail images link to new window; the popup window opens up; at the top I have a table with "previous" and "next" arrows and a link that says "Back" which actually closes the pop up window.
It works fine in Safari, Firefox, aol browsers but no good for IE!
In IE the arrow image or the text "back" do not appear. It will close the window if you click on the area where the"back" text is supposed to appear. But the arrows links for pevious and next do not at all work.!??!

here is the link to my test site:

http://homepage.mac.com/whelanart/Sites/ShawnSite/potfolio/Advertising/index.html

Click on any of the thumbnails and you can see the problem if you use IE.
The other browsers work fine.

If you could give me some insight why this won't work in IE and how to fix I would appreciate it.

The table in question is at the bottom of the code

<div id="PortPix">

Thank you!

<HTML>
<HEAD>
<TITLE>pop7</TITLE>
<META name="generator" content="Adobe Photoshop(R) CS Web Photo Gallery">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#PortPix {
text-align: center;
position: absolute;
left: 0px;
top: 0px;
height: 600px;
width: 650px;
margin: 0px;
padding: 0px;
background-color: #4492C0;
}
body {
position: absolute;
left: 0px;
top: 0px;
}
#PortPix TABLE {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #EEEEEE;
text-align: center;
padding: 0px;
height: 50px;
width: 600px;
position: absolute;
top: 0px;
display: block;
bottom: 10px;
font-weight: bold;
margin: 0px;
float: left;
left: 25px;
right: 25px;
}
#PortP TD {
text-align: center;
background-color: #1D346C;
clear: both;
float: left;
}
#PortPix table TR {
text-align: center;
width: 600px;
display: block;
height: 200px;
}
#apDiv1 {
position:absolute;
width:610px;
height:507px;
z-index:1;
text-align: center;
vertical-align: middle;
top: 60px;
background-color: #DDDDDD;
left: 20px;
right: 0px;
display: block;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #1D346C;
border-right-color: #83BFE0;
border-bottom-color: #83BFE0;
border-left-color: #1D346C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #444444;
}
#apDiv1 img {
text-align: center;
vertical-align: bottom;
}
-->
</style>
<script type="text/javascript">
<!--
function close_window() {
window.close();
}
//-->
</script>
</HEAD>
<BODY bgcolor=#FFFFFF text=#000000 link=#0000FF vlink=#800080 alink=#FF0000>
<div id="PortPix">
<TABLE width= 600 border="0" cellpadding="0" cellspacing="2">
<TR>
<TD align="center" width= 200><A href="06portpopup.htm"><IMG src="../../L_Arrow.gif" height="50" width="80" border="0" alt="Previous"></A></TD>
<TD width= 200 align="center" bgcolor="#1D346C" onClick="close_window()">BACK</TD>
<TD align="center" width= 200><A href="08portpopup.htm"><IMG src="../../R-Arrow.gif" height="50" width="80" border="0" alt="Next"></A></TD>
</TR>
</TABLE></div>
<div id="apDiv1">
<p>&nbsp;</p>
<p><img src="../images/AntiqCarVect.jpg" width="485" height="310"></p>
</div>
&nbsp;
</BODY>
</HTML>

Mark_W
07-30-2007, 11:25 PM
I believe the problem is the use of the 'absolute' in the position property, I'm having the same problem with my site in Internet explorer.

dolphdawg
08-03-2007, 01:18 PM
I tried that but no luck:(

kate
08-04-2007, 04:10 PM
Why have you disabled your CSS for the preview in browser?
It might be as well to include it!

dolphdawg
08-05-2007, 12:24 PM
I'm sorry Kate I'm not familiar with that.

I have been trying to "stumble" through since this is all new to me
what I did come up with from doing a "browser compatibility check":
line 109 z-bug

"Positioned containers define a new stacking order, even when the computed z-index of the container is auto. This can cause positioned children of the container to appear above other positioned elements on the page when they should not.

Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely"

I think mine is definately

Although I don't know how to fix :(