• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6444
  • Last Modified:

Why does Firefox ignore the <style='table-layout:fixed'> attribute?

<style='table-layout:fixed'> is important to the design and layout of my tables, yet Firefox ignores it.

Why and is there a substitute (he asked hopefully).
0
MitchellVII
Asked:
MitchellVII
  • 22
  • 14
  • 9
  • +1
2 Solutions
 
ncooCommented:
You need to place the <style='table-layout:fixed'> like <table style='table-layout:fixed'> or as below is better:

http://www.w3schools.com/css/pr_tab_table-layout.asp
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

</body>
</html>

0
 
ncooCommented:
For instance:


<table border="1" width="100%" style="table-layout: fixed">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

It is supported by Firefox 1+ and IE 5+
0
 
xberryCommented:
NO, from my knowledge

table-layout: fixed

is NOT supported by Firefox and I have reference for that:

http://www.css4you.de/browsercomp.html

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
xberryCommented:
Sorry, actually, I did more research and also found reference that
confirm what ncoo told - so with 1.0 and higher versions of firefox
ist may quite well work.
0
 
Michel PlungjanIT ExpertCommented:
How is it supposed to look?

My FF shows both tables the same (2.0.0.6)
0
 
MitchellVIIAuthor Commented:
mplung,

The problem is that the scripting is set up so that when you click on the <select> box, that box resizes to the left and shrinks again when you have select an item.  Kind of like an "editable" combo box.

It uses this code to work:
function mousedown(txt,sel) {
       var width = 165
       width += 22;
       sel.style.width = width + "px";
       width -= 19;
     sel.style.left = - width +" px";
}
function mouseout(sel) {
     sel.style.width = "19px";
     sel.style.left = "0px";
}
function selChanged(txt,sel) {
     sel.blur();
     txt.focus();
     txt.value = sel.value;
       txt.style.background='none';
}

<select id="Hardware1Select" class="combo" style="width:19px;position:relative;left:0" onFocus="playClick();" onmousedown="mousedown('Hardware1',this);" onBlur="mouseout(this)" onChange="selChanged(Hardware1,this)" tabindex="-1">

In IE, this works great because the table sizing is locked, but it FoxFire, it seems to be ignoring the layout locking so that the whole table shifts left when you open the combo and back right when you close it.

IE behaves the same way if I take "table-layout:fixed" out of the code.

0
 
Michel PlungjanIT ExpertCommented:
Ahh. Much better explanation of the problem
0
 
Michel PlungjanIT ExpertCommented:
And the reply is of course: Why use a table to hold a select
0
 
Michel PlungjanIT ExpertCommented:
PS: I think you can skip the code for FF since it shows the content of the option quite ok - something IE does not when the content is wider than the select

<html>
<head>
<style type="text/css">
table.one
{
table-layout: fixed
}
</style>
<script>
function mousedown(txt,sel) {
if (navigator.userAgent.indexOf('MSIE')==-1) return
       var width = 165
       width += 22;
       sel.style.width = width + "px";
       width -= 19;
     sel.style.left = - width +" px";
}
function mouseout(sel) {
if (navigator.userAgent.indexOf('MSIE')==-1) return
     sel.style.width = "19px";
     sel.style.left = "0px";
}
function selChanged(txt,sel) {
if (navigator.userAgent.indexOf('MSIE')==-1) return
     sel.blur();
     txt.focus();
     txt.value = sel.value;
       txt.style.background='none';
}

</script>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="40%">10000000</td>
<td width="40%">100</td>

<td width="20%">

<select id="Hardware1Select" class="combo" style="width:19px;position:relative;left:0" onFocus="playClick();" onmousedown="mousedown('Hardware1',this);" onBlur="mouseout(this)" onChange="selChanged(Hardware1,this)" tabindex="-1">
<option></option>
<option>10000000000000000000000000000000000000000000000</option>
</select>
</td>
</tr>
</table>

</body>
</html>
0
 
MitchellVIIAuthor Commented:
hey m,

looks good, gimme a minute so I can test that, I'm doingh like 8 things at once here :)
0
 
MitchellVIIAuthor Commented:
m,

Is there a way to control the width of a <select> list in Firefox if you are resizing as I am doing in IE?
0
 
Michel PlungjanIT ExpertCommented:
My name is Michel.

I am not sure what you mean. The original resize worked in FF, no?
The problem was that it pushed the neighbour content too far if I am not mistaken

Michel

0
 
MitchellVIIAuthor Commented:
Hi Michel,

The <select> form control in question (19px wide so it shows just the drop arrow), is set to "style = 'position:relative'".  When you click it, it resizes to the left to exactly cover the <input> form control to its left.  Then once you select an option, it updates the <input> control with your selection and resizes to 19px.  Just a groovy little "editable combo box".

In EE, this worked perfectly when I had "table-layout:fixed" on.  In FF, instead of covering the <input> control to its left, the entire <select> control shifted to it's right when opened and shrank again to 19px once an option had been selected.  This made for some fugly behavior with table sizes jumping about.

It may be that FF just handles "style='position:relative'" differently than EE does (if it does, maybe we can fix that part).  What I really need is some code that will "in" down the <select> control so that when it resizes, it stays put and opens to its left, instead of right.

If that isn't possible and it must open to the right in FF, I can change the CSS Class for the <select> control so that it will be "position:relative" when EE is the browser and not set any position attribute when it is FF browser.  Then, I would need some way to control how WIDE the drop-list is when the <select> opens in FF.  Is there some sort of .ListWidth property like in VB?
0
 
MitchellVIIAuthor Commented:
Sorry, meant to say:

"What I really need is some code that will "pin" down the <select> control..."
0
 
Michel PlungjanIT ExpertCommented:
FF does (as mentioned) not support the fixed table layout

Also it will open to show the longest item

To make it go left, you could play with the RTL attribute (used for arabic and ivrit)
0
 
MitchellVIIAuthor Commented:
Just as a comment.  I HATE Firefox!  lol.  It's a pain to code for and NOTHING looks as good in it.

Ok, I said it, lol.
0
 
MitchellVIIAuthor Commented:
What is the "RTL attribute"?
0
 
Michel PlungjanIT ExpertCommented:
I HATE IE, FF is so much more clear ;)

RTL: right to Left (but it did not work)
0
 
MitchellVIIAuthor Commented:
FF is more secure and more compliant with standards, but visually, it's fubar'd.

lol.
0
 
xberryCommented:
Some philosophy, even if it is the wrong topic area:

I think, MitchellVII you hate FF since you have a severe fixation on it at this moment in time.
Anyway, I admit FF can have his odds and bits too, but hold on ...
Lately I had to optimize a web project with exact layout rules for use with FF and IE, so I
had a chance to compare . . . WOOOEEE ....
only one bug with FF and I stopped counting what IE threw in, ... crossing a minefield
must be like that ... IE just doubled up the work.
0
 
MitchellVIIAuthor Commented:
xberry,

I know my dislike for FF is purely subjective based upon how things "look" and "feel" in the browser.  It has nothing to do with which browser is actually better technically.

IE is like Houston/TX and FF is like Columbia/MD.

Houston slowly grew and expanded without much plan.  It is a mass of crazy roads, ugly overhead wires and traffic jams.  Even people from Houston get lost in Houston.

Columbia, MD is a "planned" city.  It was basically a big empty field and they planned the city from the ground up.  A place for everything and everything in it's place.

While despite all it's messiness, Houston may be more interesting with more culture, Columbia is more efficient and just "works" better.

I'd rather drive in Columbia, but I'd rather have dinner out in Houston.

That's how it is with FF and IE IMHO :)
0
 
xberryCommented:
MitchellVII,

nice 'Illustration' of your view of difference between IE and FF.
Actually I agree that FF feels a bit 'too clinical for my taste', too ; ))
For development work I have to 'like' both, IE and FF but for
everyday personal use I have a soft spot for 'Seamonkey' -
resembling which city you'd say ?? ; ))
0
 
MitchellVIIAuthor Commented:
Seamonkey resembles the "Lost City of Atlantis" since I've never heard of it.

Right now, the most ANNOYING thing about FF is the way it doesn't support the "table-layout:fixed" attribute.  That comes in VERY handy in EE and gives me real control over the way my tables look with far less coding.  Just set the "table-layout:fixed", insert a "height=0px" first row with the cells the size you want them and you don't have to size any cells under that, just set the col and rowspans.  I can also set the "width:100%" as a CSS for my <input> controls and they all fit perfectly.

On the other hand, keeping tables looking neat in Firefox is about impossible.  I find I need to set my <input> controls "width" property very specifically for each one - major, major pain.

At this point, if I have a user that hates how my page looks on Firefox, I'll just tell them "the needs of the man outweigh the needs of the few..."  :)
0
 
Michel PlungjanIT ExpertCommented:
So perhaps now is the time to learn css and stop using tables for layout?
0
 
xberryCommented:
>> Seamonkey resembles the "Lost City of Atlantis" since I've never heard of it.

Seamonkey is the successor of THE all-in one 'Mozilla' Suite, the percentage of people using
it for browsing the web is said to be less than 1 % -
http://www.mozilla.org/projects/seamonkey/

Anyway I have to admit that I did 'sleep' a bit on your question and 'm a bit lazy
to catch up on all the details - to me it sounds though as if you try to solve
a webform layout using table elements. Not sure what exactly you try
to achieve since I went up and down our question but miss any link to
your site - only to see how it looks like and where the crux might be.

Only had to learn myself lately that solving webform layouts with a table structure
is not such a good idea and can better be perfectly done with a list-element solution.
Actually I prefer to use unordered lists to do so. You may also youse <div>-elements or both.
The rest is proper CSS implementation.

I mean, if the browser can't do it, some codehack should solve it, but
I'd first go at it with HTML/CSS alternatives and only fall to javascript
as a last resort.
0
 
xberryCommented:
Sorry mplungian, crossposted with your comment, where
I picked your thought to the spot : )

Reference for item only lately discussed here on EE:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22719423.html
0
 
Michel PlungjanIT ExpertCommented:
What a beautiful form
http://www.alistapart.com/d/prettyaccessibleforms/example_3/

however how he is getting there is scary
0
 
MitchellVIIAuthor Commented:
But I like tables - * sniff *
0
 
xberryCommented:
>> But I like tables - * sniff *

You need therapy on that - what could you do ?
Maybe create some nice table, print it on A4, copy it some 99 times
and decorate your office with them, wallpaper or so ... anytime you
approach your computer, you already feel comfortable, at home with
tables I mean and when you stick your head into your machine it
is totally free to use alternatives - how about that ? ; ))

0
 
MitchellVIIAuthor Commented:
Ok, well, except for some behind the scenes coding, the form is done.  The purpose of this baby beast to to allow users to submit their resumes to me, and then sort of data-mine the resume for their best skills.  We then use that data to create an ExecutiveProfile we use when promoting their backgrounnd to hiring managers.

Anyhow, from a code standpoint, the form:
1. Uploads the resume to our webserver.
2. Sends us an email with the resume attached.
3. Deletes the resume off the server.
4. Writes their form data to a mySQL DB.

We then remotely connect to the DB from MS Access at our office and import their data, instantly creating their ExecutiveProfile.  It's a 10.0 on the cool scale, and not bad for a table-lovin noob like myself - lol.

P.S., the submit button is disabled until I get a few new fields added to the db.

http://www.executivedecision.biz/DocEPW.asp?ProspectID=1185202954&Name=John
0
 
MitchellVIIAuthor Commented:
P.S., It works in everything but it works best in IE.  I still have to work on sizing the <select> lists in Firefox.
0
 
MitchellVIIAuthor Commented:
Oh yeah,

I also noticed that in Firefox (damn you Firefox!), my File Upload Input  sizes really funny.  The thing is supposed to be 350 px across and centered, but it seems to just center the "Browse" button and make the input box really small.  What's up wit dat?
0
 
xberryCommented:
>> What's up wit dat?

applies to these lines of your code:
<p class=MsoNormal align=center style='text-align:center'><span
          style='font-size:8.0pt'>
          <input type=file name="Resume" id="Resume" class="input" style="width:350px" onFocus="playClick();clearInput(this);" onChange="this.style.background='none';" tabindex=1></span></p>

simply remove the class="input" from your file input field and you'll already notice the difference.
If you like to give styles, then simply do this with class of its own like input="centeredbutton"
and then keep adding what doesn't destroy your layout, on first galnce I'd say it is the
IE explorer's box model bug problem. If you're interested in detail:
here
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
and there other bugs:
http://www.positioniseverything.net/explorer.html
0
 
xberryCommented:
What I actually meant with

>> If you like to give styles, then simply do this with class of its own like input="centeredbutton"

only applies to your specific file upload input filed of course ; ))

Apart from that, only one little thing I notice in all browsers:
All rows starting with '2' are set off to the left for about three pixels, but
this rather looks like a typing mistake somewhere ; )

Then finally, anything else looks ok in all browsers, I also checked with the validator
and it says there is no errors, but lots of warnings (only a tip). Maybe you need to do
some cleanup a little bit ; )) . . . and  ... ehhh
well ... IT IS TABLES   ; )
(semantically correct if you use it for layouting spreadsheets same as you do)
0
 
xberryCommented:
and last:
>> and not bad for a table-lovin noob like myself - lol.

No, not bad, looks like you really had some work with it ; ) My respect (I'm noob in many areas, too ; )

Excuse if I keep on joking, but THAT your's site would be ideal destination
for pilgrimage of all table lovers, giving lots of contentment same as revelation
about use of tables ; ))
0
 
MitchellVIIAuthor Commented:
xberry,

Actually, as you may have gathered, I make my living as a headhunter.  I just play a web designer on TV.  I won't be selling my design services to anyone anytime soon, so i'm just basically happy if the damned thing works.

Hell, look at M$.  That place if full of 80 hour a week eggheads that live and breathe this stuff and they still managed to totally fubar Vista and Office 2007, so I can't feel too bad if my little web page isn't perfect.
0
 
xberryCommented:
>> so I can't feel too bad if my little web page isn't perfect.

Agreed ; )  As I said, you did tremendous work there and in IE it actually looks perfect now
but I have a solution for your numbering offest in firefox (the 2 and 7 especially) and then it really looks fine:

Simply go to locations where your numbers are:
<td style='width:137px;border:solid #EAEAEA 1.0pt;
  border-top:none;padding:0pt 0pt 0pt 0pt'>
<p class=MsoNormal style='margin-top:1.5pt;margin-right:2.15pt;margin-bottom:
        1.5pt;margin-left:2.15pt'><nobr>1     ///  HERE !!!  
<input type=text name="Focus1"

Then you put the number within a <span> and give it a class for each number

<span class="padding1">1</span>   // padding for the 1
<span class="padding1">2</span>   // padding for the 2  and so on

in your stylesheet or style section then, you put like this

html>body .padding1 {              // this is a hack that only the firefox can read !!!
   padding: 0px 0px 0px 0px;
}

html>body .padding2 {            
   padding: 0px 1px 0px 1px;
}

html>body .padding3 {            
   padding: 0px 1px 0px 0px;
}

html>body .padding4 {            
   padding: 0px 0px 0px 1px;
}

(Its only playing with the left and right values of the padding, setting max. 1 px correction)
For the numbers 5, 6, 7, 8 you work it out yourself, but it will sure be one of those padding variations.



0
 
MitchellVIIAuthor Commented:
xberry,

Actually, I've gotten some new very cool "editable combo" .js code that I am using.  It makes very nice neat one-part combo's where you can select from the list, or if you choose "<Add New Item>" from the list you can then type in whatever you want.

Actually, the code for this has been around for a while, I was just too ignorant to know how to make it work.

Another cool feature of IE's "fixed table" attribute is that if you want a combo in a table cell to "appear" like an <input> box (no arrow), but work like a combo, just fix your table column size and size your combo box so that the arrow part bleeds off the edge of the cell.  The result is that you get just the text area and no arrow but it still works like a combo when you click it.

This make arranging combos in a tight table much neater as you don't have to account for the big fat arrow space.

I'm still working on this, but here is an example.  The ability to "edit" the combo's is temporarily turned off on this sample version while I work on some things, but you can see how nicely the combos fit in the table.

http://www.executivedecision.biz/DocEPDSample.asp

P.S., Look at it in IE to see what I mean.  Works in Firefox, but without the fixed table feature, not as well.
0
 
MitchellVIIAuthor Commented:
Here's the really cool part.

Executive-types REALLY hate to fill out forms.  So much so that they usually put off doing it and when they finally get around to it, they do a half-ass job.

What you are looking at there is a Sample Version of the ExecutiveProfile we create for all of our candidates.  It looks complicated and like a lot of work, but really it's not.

They just send us their resume which we plug into the database.  The database automatically parses the resume out to be in the format you see here, no matter how screwed up the original was (and I'm telling, coding that mess was a bugger).  The rest of the stuff, like salary, etc, we get during the intial phone interview.

The HARD part has always been the SKILLS SUMMARY area.  It's hard to get on the phone and it's hard to get candidates to fill it out themselves.

Now, we can just create ALL of the ExecutiveProfile EXCEPT for the SKILLS SUMMARY TABLE in a Word Merge and save that as a filtered HTML.  We then plug in the SKILLS TABLE with all the groovy combos using a simple <!--#include file="strSelect/strTable_Skills.inc"--> statement and use code to resave it as an .asp.

Now I can post pretty much EXACTLY what their final ExecutiveProfile will look like online and they just fill in the boxes and save it to the DB.

How cool is that :)
0
 
MitchellVIIAuthor Commented:
Ok, editable combo part is now functioning.  I have only put fileds in the first part of the table for display purposes only.
0
 
xberryCommented:
>> How cool is that :)  
   sounds very cool, as I mentioned, looks like tremendous programming work on your site.

One more comment from design/usability side:
   I understand what you want to achieve with the combo boxes without arrows
(actually in my IE they don't show the arrows, but do in all other Mozilla based browsers (FF and Seamonkey)).
   To cool down things on that: IMHO both ways have advantage and disadvantage,
actually when I see a combo WITH an arrow I instantly know that I can click on it in order to select
something, while without I reckognize it as an text input field and only find out about the selection
once I decide to type in something.
Nevertheless, your solution of creating a combo without arrows as such and wherever it is making
sense, is brilliant of course.
0
 
MitchellVIIAuthor Commented:
Well, these are high traffic web pages.  I am just emailing a link to a specific candidate and they are opening their form and filling it out, so I can instruct these guys that make $300k a year how to fill in the little boxes, lol.
0
 
MitchellVIIAuthor Commented:
I have an idea for a great new contest that should be sponsored by M$.  Here are the rules.

1. Create a fully functioning website that takes advantage of as many IE "quirks" as possible.
2. Page must look and act great in IE.
3. Page must be real POS in all other browsers.
4. Page must have the highest number of Validation Errors, yet still work in IE.

Lol, that would be interesting...
0
 
xberryCommented:
IMHO M$ has always sponsored those 4 concepts more or less hidingly.
Else how you explain that guys sit together all over the world to define some
agreed upon standards for the web and despite, M$ for many years
playing the naughty boy, creating own rules and habits, only to make
life very uncomfortable for those who won't take their browsers for
the web.    
0
 
MitchellVIIAuthor Commented:
Actually, I have clients like that.  They are competing with another company for the same candidate.   tell them that they need to offer $250,000 plus stick options to compete with an offer from the otjher company.  Their current offer is only $230,000.  But they hesitate to raise it because they say "Well, he should take OUR offer anyway because...well...we're US!"

Lol, sometimes I just shake my head. Some of these people have been in the same corporation for so long that they really have bought the line that "they are the best" when really they are just another shade of the same color.

M$ is a lot like the USA.  Most folks living here have never been anywhere else, so they assume that life here is just what life is like everywhere.  They gripe and moan about every little inconvenience.  Then one day they go to some third world country and they are like, Holy God, how do people live like this?  When they get home, they see everything here in a warmer light.

People IN M$ think that M$ is all the is because all they can see is M$ in every direction as far as they can look.  Tunnel vision.
0
 
MitchellVIIAuthor Commented:
I mean, M$ Office 2007 is a classic example of that.  I don't know how much you use it, but I use it quite a bit and I'm here to tell you, it is an inmitigated TRAIN WRECK.  Imagine Office 2003 was Major League ballplayer.  In Office 2007 they cut off his arms and legs and called him third base.

It's like they have a "VP In Charge of F***ing Things Up" and he's married to the bosses sister.
0
 
xberryCommented:
>> It's like they have a "VP In Charge of F***ing Things Up" and he's married to the bosses sister.

Who knows ? ; ))

At least privately and for even for development I prefer to work with Linux OS since time after Windows 95/98 and never did regret. From many sites I listen that M$ has a tendency to "worsen things in their effort of improving them".

The horror with M$'s browser politics is that they do not only vary against the W3C standard and
standards as implemented in concurring browsers, even in their own series from IE5 over IE6 to IE7
and sometimes even within version numbers  they do not stick to any reliable standard.
I have seen two or more stylesheet versions been forked only for the
IE browser community of a site project.  
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 22
  • 14
  • 9
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now