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

Question

aaava 0 Newbie Poster

16 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-browser web-design

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

Dani AI

Generated 6 Months Ago

Short expert note tied to the thread: OP is mixing inline title text and floated images inside the same line, and is correct that separating the text and the control images will make the layout much more predictable. A few specific factors commonly cause the symptoms described (images missing in IE7, or dropped to a new line in older Firefox): invalid HTML attributes, use of float + vertical-align together, quirks vs standards mode (missing DOCTYPE), and IE7 layout/z-index quirks.

Concrete checklist and fixes (apply in order):

Fix the image sizing HTML: width/height attributes must be numeric (no "px") or moved to CSS. Invalid attributes can be parsed inconsistently across browsers.
Avoid relying on vertical-align for floated images (vertical-align has no effect on floated elements). Use a small, right-aligned container for the controls instead of floating each image. Positioning the controls absolutely inside a relatively positioned title bar is the most robust cross-browser approach.
Ensure the title bar is in standards mode (add a proper DOCTYPE) and give the title container position:relative (this also lets z-index behave consistently in IE). For stubborn IE7 bugs, a small hasLayout trigger (zoom:1) on the parent often helps.

Example CSS pattern (different from the snippets already posted here):

/* title bar */
.dlgTitle { position: relative; height: 21px; line-height: 21px; background: #d6b24a; }

/* right-side control group */
.dlgTitle .controls { position: absolute; right: 4px; top: 0; }

/* control icons */
.dlgTitle .controls img { display: inline-block; vertical-align: middle; margin-left: 3px; width: 18px; height: 19px; cursor: pointer; }

Quick debug tips: open an image URL directly to rule out 404s; use dev tools/Firebug to inspect computed styles and the box model; temporarily add colored borders to the title and control containers to see where elements are; remove floats to observe behavior. Starting with the width/height attribute fix and separating title text from the controls resolves this class of problems in the vast majority of older-browser cases.

All 3 Replies

ko ko 97 Practically a Master Poster

16 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

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers