...

View Full Version : problem in FireFox



joonstar
08-14-2005, 05:21 AM
<style>
a.box{
display:inline-block;
border: 1px solid #000;
padding:15px
}
</style>

<table>
<tr>
<td><a href='next.html' class='box'>box</a></td>
</tr>
<tr>
<td>text</td>
</tr>
</table>

With the above code,

'Text' is shown just under the box in IE6, but
'text' is overlapped with the bottom of the box in FireFox.

How can I make it is shown just under the box in FireFox like in IE6?

Ranger56
08-14-2005, 05:27 AM
<style>
a.box{
display:inline-block;
border: 1px solid #000;
padding:15px
}
</style>

<table>
<tr>
<td><a href='next.html' class='box'>box</a></td>
</tr>
<tr>
<td>text</td>
</tr>
</table>

With the above code,

'Text' is shown just under the box in IE6, but
'text' is overlapped with the bottom of the box in FireFox.

How can I make it is shown just under the box in FireFox like in IE6?


a.box{
display:block;
border: 1px solid #000;
padding:15px
}

joonstar
08-14-2005, 07:18 AM
Thank you. Your code works fine in the case above.

But I have another problem with the solution.

Look at the below code, please.

<style>

a.box{
display:inline-block;
border: 1px solid #000;
}

.p15{padding:15px}

</style>

<table>
<tr>
<td width='200'><a href='' class='box p15'>box</a> rightText</td>
</tr>
<tr>
<td>underTextt</td>
</tr>

</table>


The rightText is on the right of the box.
The underText is under the box.

But underText is overlapped with the box in FireFox.

If I change inline-block into block, the rightText goes to under the box.

Any solution, please?

mrruben5
08-14-2005, 03:41 PM
a.box{
display:inline-block;
border: 1px solid #000;
float:left;
}

:D

joonstar
08-14-2005, 05:37 PM
Thank you mrruben5. Your code have solved the problem above.

But I met another problem with your code.
The following code doesn't work in alignment.


<style>

a.box{
display:inline-block;
border: 1px solid #000;
float:left;
}
.p15{padding:15px}

</style>

<table>
<tr>
<td width='200' align='center' bgcolor='pink'><a href='' class='box p15'>box</a></td>
<td width='200' align='right' bgcolor='yellow'><a href='' class='box p15'>box</a></td>
</tr>
</table>

Can I make the alignment to work?

Scootertaj
08-14-2005, 06:03 PM
<style>

a.box{
display:inline-block;
border: 1px solid #000;
float:left;
}
.p15
{
padding:15px;
text-align: center;
}
.p16
{
padding: 15px;
text-align: right;
}

</style>

<table>
<tr>
<td width='200' bgcolor='pink'><a href='' class='box p15'>box</a></td>
<td width='200' bgcolor='yellow'><a href='' class='box p16'>box</a></td>
</tr>
</table>

joonstar
08-14-2005, 10:36 PM
<style>

a.box{
display:inline-block;
border: 1px solid #000;
float:left;
}
.p15
{
padding:15px;
text-align: center;
}
.p16
{
padding: 15px;
text-align: right;
}

</style>

<table>
<tr>
<td width='200' bgcolor='pink'><a href='' class='box p15'>box</a></td>
<td width='200' bgcolor='yellow'><a href='' class='box p16'>box</a></td>
</tr>
</table>


Hello, Scootertaj.
Your code looks logical, but it actually doesn't work correctly.

The position of the first link box is still left of the pink tabular cell in both IE and FF although I want it comes on the center of the tabular cell.
and
The position of the second link box is still left of the yellow tabular cell in both IE and FF although I want it comes on the right of the tabular cell.

Could you see why it doesn' work correclty, please?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum