[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2006-04-25
5
Medium Priority
?
886 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:BillyBoJimBob
  • 3
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
nltech earned 2000 total points
ID: 16603096
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
 
LVL 1

Author Comment

by:BillyBoJimBob
ID: 16622399
nltech,
I can't duplicate your success in Firefox.
What if anything are you coding differently?
Bob
0
 
LVL 1

Author Comment

by:BillyBoJimBob
ID: 16622412
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
 
LVL 1

Author Comment

by:BillyBoJimBob
ID: 16684479
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
 
LVL 14

Expert Comment

by:nltech
ID: 16687488
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month20 days, 2 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question