[thelist] CSS / Form spacing in Netscape 4.7

Jeff Marvin jeff at jeffmarvin.com
Tue Jul 2 20:36:00 CDT 2002


I am trying to fit a small "site search" form in the header of a site I am
developing. I have been able to get it to fit and look acceptable in the
majority of our target browsers, except for Netscape Communicator 4.7.

The header row basically consists of the search form in the left hand
fixed-width column, and the logo aligned to the right hand side of a scaling
column:
----------------------------------------------
|  search  |                           logo  |
----------------------------------------------

In Netscape, I am unable to get rid of the extra vertical space above and
below the search form. As a result, it is causing the header row height to
expand too much and break the look of the template. (I inherited the HTML
design template, so unfortunately it is not up for refactoring into
compliant code or redesigning to avoid problems like this.)

Is there a way to remove this vertical space? Any code, tips or pointers to
info would be greatly appreciated! :)

Thanks,
Jeff Marvin

______________________________________________
The code for what I am trying to do is below:
_____________________________________________
HTML
_____________________________________________
<!-- BEGIN Page Table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<!-- BEGIN Header Row -->
    <tr>
        <td width="129"
background="images/include/header/headerSiteSearch.jpg" valign="top">
            <div class="nospace"><img
src="images/include/header/headerGreyHoriz.gif" alt="" width="129"
height="3" hspace="0" vspace="0" border="0"></div>
            <form action="#" name="sitesearch" id="headerSearchForm">
                <!-- Size attribute is set on Text Input for Netscape 4
support, which ignores CSS width property -->
                <input type="text" name="searchInput" id="headerSearchField"
size="7"><br>
                <input type="submit" name="submit" value="Site Search"
width="10" height="8" id="headerSearchButton">
            </form>
        </td>
        <td width="100%" align="right"
background="images/include/header/headerTopBkgrnd.jpg" valign="top"
colspan="2"><a href="index.php"><img
src="images/include/header/headerLogo.jpg" width="346" height="68"
border="0" alt="[Biomira Home]"></a></td>
    </tr>
<!-- END Header Row -->

<!-- rest of page contents continue here -->
</table>
<!-- END Page Table -->
_____________________________________________
CSS
_____________________________________________
#headerSearchField {
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	width : 110px;
	border : 1 solid #9C9A9C;
	float : right;
	clear : both;
	margin : 10px 0px 4px 0px; /* I want some spacing at the top of the form,
but not more than 10px */
	padding: 0px;
}

#headerSearchButton {
	border : 1 solid #9C9A9C;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	background: #EFEFEF;
	float : right;
	height : 18px;
	width : 85px;
}

#headerSearchForm {
	padding: 0px;
	margin : 0px;
}

.nospace {
	padding : 0px;
	margin : 0px;
}




More information about the thelist mailing list