Solved

Firefox 3's handling of CSS table width

Posted on 2009-04-10
3
476 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
  • 2
3 Comments
 
LVL 11

Expert Comment

by:level9wizard
Comment Utility
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
Comment Utility
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
Comment Utility
I solved it.  
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now