F
FishGills
So, here's the problem. I have a DIV layer that gets centered on the
screen automatically. I have the div's width/height specified inline
and everything works great. Problem is that I'd like the div to stretch
based upon its contents. IE does this by default because of how it
handles width really has min-width.
Here's the DIV that works but doesn't stretch based on its contents:
<div id="popup" style="display:none;">
<div id="popup_bg"></div>
<div id="popup_body" style="width:308px; height:210px;">
<div id="popup_title" style="height:30px; width:230px;">Title</div>
<div style="height:20px; width:20px; float:right; margin-top:5px;
margin-right:5px; cursorointer;"
onClick="document.getElementById('popup').style.display =
'none';"></div>
<div style="clear:both"></div>
<div id="popup_text" style="height:210px;">Body</div>
</div>
</div>
Now, if I convert it over to min-widths/heights:
<div id="popup" style="display:none;">
<div id="popup_bg"></div>
<div id="popup_body" style="min-width:308px; min-height:210px;">
<div id="popup_title" style="height:30px; width:230px;">Title</div>
<div style="height:20px; width:20px; float:right; margin-top:5px;
margin-right:5px; cursorointer;"
onClick="document.getElementById('popup').style.display =
'none';"></div>
<div style="clear:both"></div>
<div id="popup_text" style="height:210px;">Body</div>
</div>
</div>
Javascript gives me the div "popup_body"'s width as null. This really
hampers how my centering function works as it centers vertically and
horizontally based on the user's browser size.
Ok, so I thought to myself "well, what about the min-width property?"
The min-width property is 308px no matter what size it actually is. Of
course, on IE, the .minWidth property is undefined.
I'm seriously frustrated here. How the hell do I get the div's width if
the width is created dynamically?
-Charlie
screen automatically. I have the div's width/height specified inline
and everything works great. Problem is that I'd like the div to stretch
based upon its contents. IE does this by default because of how it
handles width really has min-width.
Here's the DIV that works but doesn't stretch based on its contents:
<div id="popup" style="display:none;">
<div id="popup_bg"></div>
<div id="popup_body" style="width:308px; height:210px;">
<div id="popup_title" style="height:30px; width:230px;">Title</div>
<div style="height:20px; width:20px; float:right; margin-top:5px;
margin-right:5px; cursorointer;"
onClick="document.getElementById('popup').style.display =
'none';"></div>
<div style="clear:both"></div>
<div id="popup_text" style="height:210px;">Body</div>
</div>
</div>
Now, if I convert it over to min-widths/heights:
<div id="popup" style="display:none;">
<div id="popup_bg"></div>
<div id="popup_body" style="min-width:308px; min-height:210px;">
<div id="popup_title" style="height:30px; width:230px;">Title</div>
<div style="height:20px; width:20px; float:right; margin-top:5px;
margin-right:5px; cursorointer;"
onClick="document.getElementById('popup').style.display =
'none';"></div>
<div style="clear:both"></div>
<div id="popup_text" style="height:210px;">Body</div>
</div>
</div>
Javascript gives me the div "popup_body"'s width as null. This really
hampers how my centering function works as it centers vertically and
horizontally based on the user's browser size.
Ok, so I thought to myself "well, what about the min-width property?"
The min-width property is 308px no matter what size it actually is. Of
course, on IE, the .minWidth property is undefined.
I'm seriously frustrated here. How the hell do I get the div's width if
the width is created dynamically?
-Charlie