Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need a FF workaround for display:inline

Status
Not open for further replies.
Wolfie7873

Wolfie7873

Technical User
Jan 15, 2004
94
US
So I'm trying to put some math on a webpage, and fractions can be a right pain. I came up with the following.

table {
display: inline;
border-collapse: collapse;
vertical-align: middle;
}

table td {
text-align: center;
}

table td .num {
border-bottom: 1px solid black;
}

Then:

<table>
<tr>
<td class=num>numerator goes here</td>
</tr>
<tr>
<td>denominator goes here</td>
</tr>
</table>

This works great in Opera and IE, but not in FF. Something about trying to set the display inline makes the text centering fail and it just flat out refuses to do the vertical alignment. Anyone know of a workaround?

Thanks in advance
 
Sort by date Sort by votes
seems to work for me using ff2.0 and xhtml transitional
 
Upvote 0 Downvote
Put some text around the table and you'll see that the vertical alignment is ignored. I'm using FF2.0, also.

 
Upvote 0 Downvote
I would do it like this. I only tested it in firefox 1.07, opera 8, ie 6. Try it out in Firefox 2.0 and let me know if it works.

Code: 
<div style="float:left; margin-left:5px; padding:2px; border:1px solid;">
<span style="line-height:20px; font-size:20px; width:25px"><u>&nbsp;3&nbsp;</u><br>44</span></div>

<div style="float:left; margin-left:5px; padding:2px; border:1px solid">
<span style="line-height:20px; font-size:20px; width:25px"><u>42</u><br>&nbsp;3</span></div>

<div style="float:left; margin-left:5px; padding:2px; border:1px solid">
<span style="line-height:20px; font-size:20px; width:25px"><u>425</u><br>&nbsp;35</span></div>
 
Upvote 0 Downvote
I guess I just updated my browser to version 2.0. :) My somewhat convoluted solution works in FF 2.0
 
Upvote 0 Downvote
Floating it isn't going to help, because these will need to appear in the flow of a paragraph. Also, i don't want to have to pad the divisors with spaces to get the underbar to work.
 
Upvote 0 Downvote
How about this?
Code: 
<p> Your content here</p>
<div style="width:20px; text-align:center"> 
<div>3</div>
<div style="border-top:1px solid; height:1px;"></div>
<div>33</div>
</div>
<p>More content here</p>
maybe you can show us a print screen of what it looks like, and what you want it to look like, because I am not really following what you are trying to say about vertical alignment.
 
Upvote 0 Downvote
Copy and paste this into Opera and you'll see an example of exactly what I'm trying to do. Unfortunately, it doesn't work in FF or IE. Changing inline-table to inline makes IE work as expected, but breaks it in Opera, and FF is somewhere in between, with inline doing what it should, but the vertical alignment then fails.

Code: 
<html><head></head><body>
<i>f</i>(<i>x</i>) =  <table style='vertical-align:middle;display:inline-table;border-collapse:collapse;'>
<tr>
<td style='border-bottom:1px solid black;text-align:center;'>numerator</td>
</tr>
<tr>
<td style='text-align:center;'>denominator</td>
</tr>
</table> <i>x</i> + 5</body></html>
 
Upvote 0 Downvote
A nested table worked. Ideally you want to avoid them, but fractions don't lend themselves to that. Just tested it in all three browsers and it behaves itself.

Code: 
<table><tr>
<td><i>f</i>(<i>x</i>) =  </td>
<td>
<table style='vertical-align:middle;display:inline-table;border-collapse:collapse;'>
<tr>
<td style='border-bottom:1px solid black;text-align:center;'>numerator</td>
</tr>
<tr>
<td style='text-align:center;'>denominator</td>
</tr>
</table> 
</td>
<td><i>x</i> + 5</td>
</tr></table>
 
Upvote 0 Downvote
^ That's the way I've been doing it, and I've been trying to get away from that method. I'm trying to have what I need for a fraction independent of the things around it. So as far as you can see, it can't be done? Bugs me that Opera can do it and the others can't.
 
Upvote 0 Downvote
I tried it with divs (you can absolute position them for IE, but thats a pain) IE butchers it completely :)

You still made a table to make the fraction, so might as well do the whole equation in a table.

Sorry I could not be of better help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
206
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
712
3esolar
3
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
778
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
720
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top