2

First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.

Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.

3 Answers3

1

Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.

Instead, just ditch the table and absolutely position the buttons, or float them.

Edit: A floated layout works nicely:

http://jsfiddle.net/gilly3/7rL97/5/

JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/

Community
  • 1
  • 1
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • Please don't drag me into this debate. This webcalc is merely an exercise and I have found it easier to do it using a table. BTW most arguments against using tables for layout in your link are irrelevant to this case anyway. So can you think of a reason why my buttons wont stretch? –  Jul 23 '12 at 07:32
  • @YekhezkelYovel - Yes, the reason your buttons won't stretch is because FireFox displays tables differently than other browsers. This is because the w3c recommendation is vague in this area and it's up to the browser vendors to decide how some of that is implemented. Positioning and sizing inside a table cell is always troublesome. – gilly3 Jul 23 '12 at 17:28
  • @YekhezkelYovel - I've updated my answer with a demo using floated buttons. – gilly3 Jul 23 '12 at 19:36
  • Thanks gilly3, I have some questions about it: –  Jul 28 '12 at 13:20
  • Damn editing time limit. No qwestions for now, I'll try to learn it and implement it myself, perhaps I'll talk to you later. –  Jul 28 '12 at 13:30
  • So I rewrote my calc your way, it looks good. But IE still doesn't work. I mean I made a separate .css that works on IE, but it's useless because it messes up chrome and FF. It does look like IE disregards some things, like the border-radius attribute for example. Perhaps it doesn't like Css3 for some reason, any ideas? http://yovelzack.fav.cc/WEBCalc/index.htm –  Jul 29 '12 at 07:31
  • Oh, and most important: the calc doesn't work on IE at all, as if IE disregards JS. –  Jul 29 '12 at 07:38
  • @YekhezkelYovel - The `doctype` must be the first line of the document. You have a comment above the doctype so the document is in quirks mode. Once you fix that, the layout looks perfect on IE9. The layout looks ok in IE8 except that the corners aren't rounded. The key to fixing the layout in IE7 will be to move the tall, right floated buttons to be the first element in the row, ie, before the "7" and "1" buttons. This shouldn't mess anything up with other browsers. For me the calculater functions correctly in every version of IE. Hit F12 to open up the IE dev tools and that will help debug. – gilly3 Jul 29 '12 at 18:14
0

Read this and try to add padding

padding: 18px 6px;

Padding will stretch your button

000
  • 3,976
  • 4
  • 25
  • 39
  • How does the line-height property affect the height of the buttons? Also how will padding help me? I don't want the button to be placed higher, I wan't it to stretch - be bigger. –  Jul 23 '12 at 07:22
  • Tried adding this padding to rowspaned buttons. Not only it didn't fix the problem, it also broke my design in chrome. I'll just assume you didn't understand my question. –  Jul 28 '12 at 13:06
0

@yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.

step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.

<td rowspan="2" class="fix">
   <button onclick="modifyInout('+')">+</button>
</td>

Step2: add the following css for fix class

.fix {  
   height: 70px;  /* double the value of td height you specified earlier */
}

Let me know if it helps.

Here is the jsFiddle: (open in firefox or other browser to test it.)

Regards :)

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Saurabh Kumar
  • 5,576
  • 4
  • 21
  • 30
  • Know that it helps :) thx for it. About what gilly3 said, in this case it seems to be a cleaner and simpler solution. I tried floating the buttons first but some didn't stay in line, this table does the job so let it be a table... –  Jul 23 '12 at 07:42
  • 1
    No need to add an extra class (unless you need to support IE<7). Just use an attribute selector: `td[rowspan=2] { height: 70px; }` – RoToRa Jul 23 '12 at 11:05