www.webdeveloper.com
Results 1 to 6 of 6

Thread: code not working in ff and ie

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    code not working in ff and ie

    Hi, I've been trying to make a web calculator as an exercise, used a table with some spanned cells and buttons inside them. Set the buttons to 100% on width and height, but they do not stretch out the hole cell in ff and ie.
    here's the code I used in my .css file:

    Code:
    td {
    	height: 35px;
    	width: 35px;
    	//border: 1px solid #ccc;
    	margin: 0;
    }
    Code:
    #main button {
    	width: 100%;
    	height: 100%;
    	display: block;
    	float: left;
    	padding: 0;
    	margin: 0;
    }
    now, on the HTML file some cells are colspaned and some are rowspan. The buttons inside the colspaned cells look as intended to (stretched), but it seems like the buttons in the rowspaned cells are catching the original size of the cell (35px).

  2. #2
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    I don't see anything glaringly wrong, but without seeing it used I can't say for sure. Also if you are setting a style for the a table it will override a class. Otherwise, post up some more info pls.

  3. #3
    Join Date
    Jul 2012
    Location
    Stockport, Manchester, United Kingdom
    Posts
    11
    Remove
    Code:
    display: block;
    from the
    Code:
    #main button
    then should work fine

  4. #4
    Join Date
    Jul 2012
    Posts
    3

    here's the page.

    http://yovelzack.fav.cc/WEBCalc/index.htm

    and I removed the 'display: block'.

    Thank you both for helping.

  5. #5
    Join Date
    Jul 2012
    Posts
    3

    Bump!

    Someone?

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    I am not sure that // is valid for CSS comments (use /* and */ like on this page).
    Then you have only to display a class for the colspan (like fix for the rowspan)
    Code:
    // CSS style
    td{height:35px;width:35px;
    .fix{height:74px;}
    .gix{width:74px;}
    
    // HTML
    <table>
    	<tr>
    		<td colspan="5"><input id="inout" /></td>
    	</tr>
    	<tr>
    		//...
    	</tr>
    	<tr>
    		//...
    	</tr>
    	<tr>
    		<td><button onclick="modifyInout('1')">1</button></td>
    		<td><button onclick="modifyInout('2')">2</button></td>
    		<td><button onclick="modifyInout('3')">3</button></td>
    		<td><button onclick="modifyInout('*')">*</button></td>
    		<td rowspan="2" class="fix"><button onclick="compute()">=</button></td>
    	</tr>
    	<tr>
    		<td><button onclick="modifyInout('0')">0</button></td>
    		<td colspan="2" class="gix"><button onclick="modifyInout('.')">.</button></td>
    		<td><button onclick="modifyInout('/')">/</button></td>
    	</tr>
    </table>
    The display:block is better for old brothers like IE6...
    Last edited by 007Julien; 07-23-2012 at 07:14 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles