Solved

Firefox 3's handling of CSS table width

Posted on 2009-04-10
3
487 Views
Last Modified: 2013-12-07
Ok, something has changed from FF2 to FF3.  My site had  a width of 100% assigned to a table.  The table would stretch out to fill its defined div.  Now the FF seems to reinterpret that instruction.  It collapses the width to only be as wide as the column headers which is only about 50% of the width of its div (which is itself about 80& of the screen width).

I need this width to be percentage based because my people use a range of screen resolutions.

I can't find any discussion about this.

Thank you.
0
Comment
Question by:fuze44
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24122283
Under what doctype? Using a html 4.0 transitional doctype will likely cause this from 2 to 3.

Also, how are you declaring this width? Are you doing something like:
<table width="100%">

or something like:
<table style="width: 100%">

The way you declare this will absolutely cause a change from browser to browser and version to version based on what doctype you define and better yet, if any at all.

Paste your full code and we can better asses this.
0
 

Author Comment

by:fuze44
ID: 24134111
Level9Wizard, thanks for checking this out.  I've simplified the html and css down to just the essentials which result in this behavior.  This should make it easier to read.

I noticed that "http://www.w3.org/TR/html4/loose.dtd" wasn't included with the doctype declaration, but doing so destroys the layout in IE.  Not sure of what's going on behind the scenes with that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 
<html>
<head>
<style>
 
body {
margin:0px;
background-color:#AAA;
}
 
* html body {
overflow:auto;
} /* Hack to eliminate unneccessary vert scroll in IE */
 
#container {
width:100%;
}
 
#content {
visibility:visible;
position:absolute;
left:125px;
margin-left:10px;
margin-right:10px;
}
 
#table_patients {
width:99%;
margin:10px 0 0 0;
border-style:solid;
border-width:2px;
border-collapse:separate;
background-color:#EEEEEE;
}
 
* html #table_Patients {
margin:10px 0px 0 -1px ;
} /* Hack to eliminate horiz scroll in IE */
 
</style>
</head>
 
<body>
<div id="container">
  <div id="content">
      <TABLE ID="table_patients" CELLPADDING="3" CELLSPACING="0" BORDER="5"; > 
	<TR>
	  <TH COLSPAN=7 ALIGN="CENTER" width="100%"><H2>No Patients Match Criteria</H2></TH>
	</TR>
	<TR>
	  <TH>Info</TH><TH>Patient Name</TH><TH>Phone</TH><TH>Address</TH><TH>City</TH><TH>State</TH><TH>Zip</TH>
	</TR>
      </TABLE>
  </div>
</div>
</body>
</html>

Open in new window

0
 

Accepted Solution

by:
fuze44 earned 0 total points
ID: 24160971
I solved it.  
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 55
Curious Trouble with and Inability to Access a Single Site 24 60
.CSS HTML Help 3 53
CSS styling problem 3 22
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

738 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