I am somewhat new to HTML and CSS. So please be patient or point me to a FAQ
that addresses this.
I am developing a Google AJAX search app that makes use of Google's gsearch.css
for defining properties (terminology?), one of which is a search box
----------------------------------------------------------------------------
/** Copyright 2005 Google Inc. All rights reserved. */
/* the GSearchControl CSS Classes
* .gsc-control : the primary class of the control
*/
..gsc-control {
width: 300px;
}
..gsc-control div {
position: static;
}
/* control inputs
* .gsc-search-box : the container that hosts the text input area
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
font-size: 13px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 4px;
margin-left : 0px;
width: 100%;
}
/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/
table.gsc-search-box {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
margin-bottom : 2px;
}
..
..
..
-----------------------------------------------------------------------------
I need to make the search box wider (I think I am looking in the correct place).
I would just like to over-ride their style for this using my own width.
How do I do this?
My HTML <bodyin part looks like
<body onload="onLoad()">
<img src="rtna.bmp" width="750"/>
<h1>
using the Google AJAX Search API
</h1>
<table>
<tr>
<td class="search-control">
<div id="searchcontrolDiv">
Loading...
</div>
</td>
</tr>
I don't think simply placing an internal style definition will work, e.g.
<style type="text/css">
