Hi Y'all,
I need a solution for the following:
liquid layout: cross browser: FireFox browser not showing width="100%" or style="width:100%;" the same as IE
My sites use a global popup window layout library that uses divs for layout.
The initial div uses the width attribute at 100% or the style width attribute at 100%.
The problem it has is in IE the 100% width is bound by the popup window's width and looks fine, in Firefox it typically expands out to about 600px to 800px even if the popup window is only 200px or 300 px wide. The look of layout in Firefox is totally messed up. I need Firefox to treat 100% width popup windows correctly.
The solution for this question MUST not set a fixed width. The popup windows used by this global popup window layout library need to have a liquid layout: To be maximizable and have the layout follow the width of the window size.
I have two example files: parent html file with javascript popup link, and child popup window html file.
Parent file with link to popup window
=========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function openPopupWindow(file, args) {
bob=window.open(file,"",ar
gs);
}
-->
</script>
</head>
<body>
<a href="javascript:openPopup
Window('FF
width100Pe
rcent.html
','height=
300px,widt
h=400px,re
sizable=1,
scrollbars
=1');">pop
up</a>
</body>
</html>
=========================
Child popup window file
=========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#header {
background: #f00;
height: 30px;
position: absolute;
top: 0;
width: 100%;
}
#topnav {
background: #ff0;
height: 20px;
position: absolute;
top: 30px;
width: 100%;
}
#main {
bottom: 20px;
left: 0;
position: absolute;
right: 0;
top: 50px;
}
#sidenav {
background: #00f;
height: 100%;
float: left;
width: 200px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
background: #0f0;
height: 20px;
margin-top: -20px;
position: absolute;
top: 100%;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 50px 0 20px;
}
#main {
bottom: auto; left: auto; right: auto; top: auto;
height: 100%;
position: static;
}
</style>
<![endif]-->
</head>
<body>
<div id="header" align="right">header</div>
<div id="topnav">topnav</div>
<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
=========================
In the child popup window code, only the left sidenav div has a fixed width, while the header, top nav bar and the footer are full 100% width.
A test to see if it is working: I have set the text alignment to right justified on the header div. If the word header shows up within the confines of the popup window without having to maximize or scroll: Then and only then will this issue be considered solved.
Any help will be appreciated and implemented on possibly hundreds of popup windows on multiple websites. These websites are mainly web applications that require popups for valid functionality. I am offering the maximum points on this because I both need a fast and high-quality solution.
Thanks,
Bob
Start Free Trial
