FireFox browser not showing width="100%" or style="width:100%;" the same as IE

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,"",args);
                  }
            -->
      </script>
</head>
<body>
      <a href="javascript:openPopupWindow('FFwidth100Percent.html','height=300px,width=400px,resizable=1,scrollbars=1');">popup</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
LVL 1
BillyBoJimBobAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nltechCommented:
tested your exact code in firefox 1.5.0.3 and internet explorer 6.0sp2 running winxp sp2, and this is what i get:

http://img206.imageshack.us/img206/1619/popupsokhere7ta.gif

they look fine here, both at your original window size, and increased to 600x400. looks fine regardless of what i resize the window to (up to my 1280x1024 desktop size). also tested netscape 8.1 on win98se (gecko engine), and firefox 1.0.7 on ubuntu breezy, those were ok too.

note: ignore the 'extra' vertical scroll space in firefox/winxp in the screen shots. it's from a user stylesheet change to reserve scrollbar space even when it's not needed. this change is not present in the netscape or firefox 1.0.7, which is why i checked those ones out too.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BillyBoJimBobAuthor Commented:
nltech,
I can't duplicate your success in Firefox.
What if anything are you coding differently?
Bob
0
BillyBoJimBobAuthor Commented:
nltech,

Using Firefox 1.5.0.3, I have to resize all popup windows to at least 775px before the word header shows up.

Bob
0
BillyBoJimBobAuthor Commented:
nltech,

I figured out what was wrong on my box.  I had a ton of firefox extensions installed that displayed in the statusbar.
When I added the option "status=no", it worked perfectly.
NOTE: If you use extensive firefox extensions that reside in your status bar, using "status=no" doesn't work.  You have to include the menubar ("menubar=yes") and then turn it off with the menubar.  I have yet to find a way in firefox to turn off the statusbar programmatically when extenstions are enabled.

Bob.
0
nltechCommented:
perhaps firefox is getting confused a bit over the width of the viewport when the window width is narrower than necessary to display those status bar extensions?  have you checked the firefox bugzilla or over at mozillazine to see if others are reporting a similar behaviour? just an idea, you might have stumbled upon something.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.