Images don't show up in IE7/or incorrect FF/3.0

Question

aaava 0 Newbie Poster

14 Years Ago

I have no clue anymore about css. I used to think I knew what's what, but I get so many different results in different VERSIONS of the same browsers, never mind different browsers, that I'm at a loss.

I have written a dhtml popup dialog window that resizes and such. It also has min/max/exit image buttons in the top-right corner, like any normal dialog window would, and the ability to resize w/a resize image in the lower-right hand corner.

On XP machines w/IE 8 or Firefox 3.5+, everything shows up fine. So I figure I'm done, since how bad could it be in other versions of the same browser??

Bad. On a Vista (ugh) box, in IE 7, it's a disaster. Everything works fine as far as moving and resizing, but no min/max/exit images show up! In FF 3.05+ or so, on Vista, the images show up on a different line (below the title bar line). It's killing me because everytime I think I've fixed it on one box, it breaks elsewhere.

I would truly appreciate any help. Here's the code for the page (the relevant code anyway):

.dlgWindow {
 height : 200px; 
 width: 400px; 
 float: left; 
 padding: 5px;
}

.dlgHtmlStyle {
  width: 400px;
  z-index: 20;
}

.dlgTitleHtmlStyle {
 width: 100%;
 height: 20px; 
 background-color: #d6b24a;
 border: solid 1px black;
}

..dlgDragStyle {
	width:100%;
	height:21px;
	background-color:#d6b24a;
	text-align:center;
	cursor:move;
	border-bottom: solid 1px #000000;
}

dlgContentStyle {
 width: 100%;
 height: 100%; 
 overflow: scroll; 
 background-color: #F0F0F0;
 color: #808080;
 border: solid 1px black;
}

<body>
    <div id="dlgWindow" >
      <div id="pnlDialog" class="dlgHtmlStyle">
        <div id="pnlDialogDragger" class="dlgTitleHtmlStyle">
          <div class="dlgDragStyle">Web page Url
            <img src="Images/close.gif" id="imgClose" width="18px" height="19px" alt="Close" onclick="javascript:closeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>&nbsp;
            <img src="Images/maximize.gif" id="imgMaximize" width="18px" height="19px" alt="Maximize" onclick="javascript:maximizeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>&nbsp;
            <img src="Images/minimize.gif" id="imgMinimize" width="18px" height="19px" alt="Minimize" onclick="javascript:minimizeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>
          </div> 
	      </div>
        <div id="dlgContent" class="dlgContentStyle">
          <div>
            <p>This panel will reset its position on a postback or page refresh.</p>
          </div>        
	      </div>        
      </div>
    </div>
</body>

web-design

2 Contributors
3 Replies
176 Views
16 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by ko ko

All 3 Replies

ko ko 97 Practically a Master Poster

14 Years Ago

It is because of the content 'Web Page Url'. You inserted the plain text and three image line by line and you floated three image, but not text. I cann't explain very well what is happen. But, you need to hold three image and plain text with different container. You may use list item or inline tag like span. Add this to your HTML and CSS.

HTML:
<div class="dlgDragStyle">
   <h3 class="title">Web page Url</h3>
   <span><img src="Images/close.gif" id="imgClose" width="18px" height="19px" alt="Close" onclick="javascript:closeDlg();" /><img src="Images/maximize.gif" id="imgMaximize" width="18px" height="19px" alt="Maximize" onclick="javascript:maximizeDlg();" /><img src="Images/minimize.gif" id="imgMinimize" width="18px" 
height="19px" alt="Minimize" onclick="javascript:minimizeDlg();" /></span>
 </div>

CSS:
.dlgDragStyle {
      width:100%;
      height:21px;
      background-color:#d6b24a;
      cursor:move;
      border-bottom: solid 1px #000000;
      position: relative; 
      z-index: 1;
      }
.dlgDragStyle h3 { 
     margin: 0; 
     padding: 0;
     font-size: 11pt; 
     text-align: center;
    }
.dlgDragStyle span {
    position: absolute; 
    width: 66px; 
    right: 0;
    top: 0;
    }
.dlgDragStyle span img {
    float: left; 
    margin-left: 2px
   }

Good luck.. Sorry for my English skill.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

aaava 0 Newbie Poster · Answer 1 · 2009-10-17T04:55:36+00:00

Below is the code after fixing 2 typos someone pointed out. It still doesn't have images showing up in IE7 or FF 3 Please help!

#dlgWindow {
 height : 200px; 
 width: 400px; 
 float: left; 
 padding: 5px;
}
 
.dlgHtmlStyle {
  width: 400px;
  z-index: 20;
}
 
.dlgTitleHtmlStyle {
 width: 100%;
 height: 20px; 
 background-color: #d6b24a;
 border: solid 1px black;
}
 
.dlgDragStyle {
  width:100%;
  height:21px;
  background-color:#d6b24a;
  text-align:center;
  cursor:move;
  border-bottom: solid 1px #000000;
}
 
.dlgContentStyle {
 width: 100%;
 height: 100%; 
 overflow: scroll; 
 background-color: #F0F0F0;
 color: #808080;
 border: solid 1px black;
}
 
<body>
    <div id="dlgWindow" >
      <div id="pnlDialog" class="dlgHtmlStyle">
        <div id="pnlDialogDragger" class="dlgTitleHtmlStyle">
          <div class="dlgDragStyle">Web page Url
            <img src="Images/close.gif" id="imgClose" width="18px" height="19px" alt="Close" onclick="javascript:closeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>&nbsp;
            <img src="Images/maximize.gif" id="imgMaximize" width="18px" height="19px" alt="Maximize" onclick="javascript:maximizeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>&nbsp;
            <img src="Images/minimize.gif" id="imgMinimize" width="18px" height="19px" alt="Minimize" onclick="javascript:minimizeDlg();" style="vertical-align: bottom; cursor: pointer; float: right;"/>
          </div> 
	      </div>
        <div id="dlgContent" class="dlgContentStyle">
          <div>
            <p>This panel will reset its position on a postback or page refresh.</p>
          </div>        
	      </div>        
      </div>
    </div>
</body>

ko ko 97 Practically a Master Poster · Answer 2 · 2009-10-17T12:02:50+00:00

It is because of the content 'Web Page Url'. You inserted the plain text and three image line by line and you floated three image, but not text. I cann't explain very well what is happen. But, you need to hold three image and plain text with different container. You may use list item or inline tag like span. Add this to your HTML and CSS.

HTML:
<div class="dlgDragStyle">
   <h3 class="title">Web page Url</h3>
   <span><img src="Images/close.gif" id="imgClose" width="18px" height="19px" alt="Close" onclick="javascript:closeDlg();" /><img src="Images/maximize.gif" id="imgMaximize" width="18px" height="19px" alt="Maximize" onclick="javascript:maximizeDlg();" /><img src="Images/minimize.gif" id="imgMinimize" width="18px" 
height="19px" alt="Minimize" onclick="javascript:minimizeDlg();" /></span>
 </div>

CSS:
.dlgDragStyle {
      width:100%;
      height:21px;
      background-color:#d6b24a;
      cursor:move;
      border-bottom: solid 1px #000000;
      position: relative; 
      z-index: 1;
      }
.dlgDragStyle h3 { 
     margin: 0; 
     padding: 0;
     font-size: 11pt; 
     text-align: center;
    }
.dlgDragStyle span {
    position: absolute; 
    width: 66px; 
    right: 0;
    top: 0;
    }
.dlgDragStyle span img {
    float: left; 
    margin-left: 2px
   }

Good luck.. Sorry for my English skill.

Images don't show up in IE7/or incorrect FF/3.0

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers