This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Webmaster forum > November 2006 > Firefox displays unwanted space in a row of table
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Firefox displays unwanted space in a row of table
|
|
| erenaykin@gmail.com 2006-11-19, 7:43 pm |
| Hi all,
I'm creating a template and at the top of the page there is a 4row
table. The code of the table is like this:
<body>
<!--1st row of top table -->
<table align="center" width="950" class="top1" border="0"
cellspacing="0" cellpadding="0">
<tr>
...
</tr>
</table>
<!--2nd row of top table -->
<table align="center" width="950" height="auto" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width=233><img src="images/top2_left1.gif"></td>
<td width="218"><img src="images/top2_left2.gif"></td>
<td class="top2_left3_bg" width="125"></td>
<td class="top2_left4_bg" width="374" valign="top">
<table align="right" style="margin-right: 5px; " border="0"
cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="padding-top: 5px;">
<img src="images/top2_left4_top1.gif">
</td>
</tr>
<tr>
<td style="padding-right: 4px;"><input type="text"
name="search_text" class="search_txt" maxlength="30" size="20"></td>
<td style="padding-right: 3px;"><input type="image"
name="search_button" src="images/top2_button.gif"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--3rd row of top table -->
<table align="center" width="950" height="61" border="0"
cellspacing="0" cellpadding="0" >
<tr>
<td class="top3_left1_bg" height="61"> </td>
</tr>
</table>
<!--4th row of top table -->
This code produces the result that I want with IE:
http://img149.imageshack.us/img149/...explorertx1.jpg
but there is an unwanted space between 2nd and 3rd rows in firefox:
http://img166.imageshack.us/img166/...pfirefoxvv0.jpg
When I use borders in the 2nd table, in firefox it produces this
result: http://img170.imageshack.us/img170/...oxbordermu7.jpg
All of the images used in the 2nd row has height 88px and the image in
the 3rd row has the height 61px.
I tried different things like specifying height 88 to the 2nd row, or
to all of the cells in the row.
How can I fix this incompatibility?
Thanks,
Eren Aykin
| |
|
| erenaykin@XXXXXXXXXX wrote:
[snip]
> <td width=233><img src="images/top2_left1.gif"></td>
> <td width="218"><img src="images/top2_left2.gif"></td>
[snip]
> but there is an unwanted space between 2nd and 3rd rows in firefox:
[snip]
> I tried different things like specifying height 88 to the 2nd row, or
> to all of the cells in the row.
>
> How can I fix this incompatibility?
By giving the images "display:block;" or "vertical-align:bottom;"
Images are inline by default, meaning they get the same space below
them as letters do, to make room for the descenders of g,j,p,q.y.
--
Els http://locusmeus.com/
| |
| Paul Watt 2006-11-19, 7:43 pm |
| <erenaykin@XXXXXXXXXX> wrote in message
news:1162807902.686782.131040@b28g2000cwb.googlegroups.com...
> Hi all,
> I'm creating a template and at the top of the page there is a 4row
> table. The code of the table is like this:
>
> <body>
> <!--1st row of top table -->
> <table align="center" width="950" class="top1" border="0"
> cellspacing="0" cellpadding="0">
> <tr>
> ...
> </tr>
> </table>
> <!--2nd row of top table -->
> <table align="center" width="950" height="auto" border="0"
> cellspacing="0" cellpadding="0">
> <tr>
> <td width=233><img src="images/top2_left1.gif"></td>
> <td width="218"><img src="images/top2_left2.gif"></td>
> <td class="top2_left3_bg" width="125"></td>
> <td class="top2_left4_bg" width="374" valign="top">
> <table align="right" style="margin-right: 5px; " border="0"
> cellspacing="0" cellpadding="0">
> <tr>
> <td colspan="2" style="padding-top: 5px;">
> <img src="images/top2_left4_top1.gif">
> </td>
> </tr>
> <tr>
> <td style="padding-right: 4px;"><input type="text"
> name="search_text" class="search_txt" maxlength="30" size="20"></td>
> <td style="padding-right: 3px;"><input type="image"
> name="search_button" src="images/top2_button.gif"></td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
> <!--3rd row of top table -->
> <table align="center" width="950" height="61" border="0"
> cellspacing="0" cellpadding="0" >
> <tr>
> <td class="top3_left1_bg" height="61"> </td>
> </tr>
> </table>
> <!--4th row of top table -->
>
> This code produces the result that I want with IE:
> http://img149.imageshack.us/img149/...explorertx1.jpg
>
> but there is an unwanted space between 2nd and 3rd rows in firefox:
> http://img166.imageshack.us/img166/...pfirefoxvv0.jpg
>
> When I use borders in the 2nd table, in firefox it produces this
> result: http://img170.imageshack.us/img170/...oxbordermu7.jpg
>
> All of the images used in the 2nd row has height 88px and the image in
> the 3rd row has the height 61px.
> I tried different things like specifying height 88 to the 2nd row, or
> to all of the cells in the row.
>
you're doing things in a rather old fashioned way. You could make a table
cell(if you must use tables - try css and divs) set the height of the cell
in the css file, make the image the background and position the elements
(search box, menu) accordingly.
--
Cheers
Paul
le singe est dans l'arbre
http://www.paulwatt.info
| |
| Eren Aykin 2006-11-19, 7:44 pm |
| > > > Hi all,
>
[color=darkred]
[color=darkred]
> you're doing things in a rather old fashioned way. You could make a table
> cell(if you must use tables - try css and divs) set the height of the cell
> in the css file, make the image the background and position the elements
> (search box, menu) accordingly.
Thanks a lot for the solution and information Els, and thanks for the
advice Paul.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|