/    Sign up×
Community /Pin to ProfileBookmark

code not working in ff and ie

Copy linkTweet thisAlerts:
Jul 21.2012

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]

[CODE]
#main button {
width: 100%;
height: 100%;
display: block;
float: left;
padding: 0;
margin: 0;
}
[/CODE]

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).

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@burnmeJul 22.2012 — 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.
Copy linkTweet thisAlerts:
@Dava1986Jul 22.2012 — Remove [CODE]display: block;[/CODE] from the [CODE]#main button[/CODE] then should work fine
Copy linkTweet thisAlerts:
@Zack_YovelauthorJul 22.2012 — http://yovelzack.fav.cc/WEBCalc/index.htm

and I removed the 'display: block'.

Thank you both for helping.
Copy linkTweet thisAlerts:
@Zack_YovelauthorJul 22.2012 — Someone?
Copy linkTweet thisAlerts:
@007JulienJul 23.2012 — 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;
[COLOR="Blue"].fix{height:74px;}[/COLOR][COLOR="Red"]
.gix{width:74px;}[/COLOR]

// 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" [COLOR="Blue"]class="fix"[/COLOR]><button onclick="compute()">=</button></td>
</tr>
<tr>
<td><button onclick="modifyInout('0')">0</button></td>
<td colspan="2" [COLOR="Red"]class="gix"[/COLOR]><button onclick="modifyInout('.')">.</button></td>
<td><button onclick="modifyInout('/')">/</button></td>
</tr>
</table>
[/CODE]The display:block is better for old brothers like IE6...
×

Success!

Help @Zack_Yovel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...