Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem in FireFox

    Code:
    <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?
    Get my greedy up

  • #2
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by joonstar
    Code:
    <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?
    Code:
    a.box{  
    display:block;
    border: 1px solid #000;
    padding:15px
    }

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you. Your code works fine in the case above.

    But I have another problem with the solution.

    Look at the below code, please.
    Code:
    <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?
    Last edited by joonstar; 08-14-2005 at 07:28 AM.
    Get my greedy up

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a.box{
    display:inline-block;
    border: 1px solid #000;
    float:left;
    }

    CATdude about IE6: "All your box-model are belong to us"

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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?
    Get my greedy up

  • #6
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scootertaj
    Code:
    <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?
    Last edited by joonstar; 08-14-2005 at 10:58 PM.
    Get my greedy up


  •  

    Posting Permissions

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