Member Avatar for aaava

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>
  • 2 Contributors
  • 3 Replies
  • 176 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for aaava

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>
Member Avatar for ko ko

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.

Member Avatar for ko ko

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.

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.