473,324 Members | 2,541 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

CSS

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">

Feb 2 '07 #1
1 3315
On 2 Feb, 15:01, neide...@osprey.arl.army.mil (Andrew Neiderer )
wrote:
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
CSS doesn't define anything, and doesn't define the classes. At most
it offers some defaults for how classes might be recognised and
responded to, but it's still the _HTML_ that defines the classes, not
the CSS. Whether you choose to use them or not is entirely up to you
-- if you don't, then attaching Google's CSS won't do a thing. If you
want to ignore something, just ignore it.

.gsc-control {
width: 300px;
}
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?
Add some more CSS to the "CSS Cascade" (the bucket of all the
applicable CSS) and give it a rule that has a selector that's more
specific than all of those supplied by Google.

Formally it's defined over here (for CSS 2.1 anyway):
http://www.w3.org/TR/CSS21/cascade.html#cascade

NB - A "rule" means setting one property, not the block within the
{ ... } Even though one selector gets applied to all of them, it
gets evaluated individually for each property.

You can make selectors more specific (of the many possible ways) by
using classes instead of element names, by using ids instead of
classes, by adding more things to match on or (conveniently here)
simply by being the last one in the cascade with an equally weighted
selector. As Google just uses a single class for their selector your
own example ought to work fine, so long as it appears in or is
imported into your HTML document somewhere after the Google
stylesheet.

Although CSS does distinguish between stylesheets and style attributes
directly on elements, it doesn't care whether stylesheets are internal
or external.

Feb 2 '07 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: William C. White | last post by:
Does anyone know of a way to use PHP /w Authorize.net AIM without using cURL? Our website is hosted on a shared drive and the webhost company doesn't installed additional software (such as cURL)...
2
by: Albert Ahtenberg | last post by:
Hello, I don't know if it is only me but I was sure that header("Location:url") redirects the browser instantly to URL, or at least stops the execution of the code. But appearantely it continues...
3
by: James | last post by:
Hi, I have a form with 2 fields. 'A' 'B' The user completes one of the fields and the form is submitted. On the results page I want to run a query, but this will change subject to which...
0
by: Ollivier Robert | last post by:
Hello, I'm trying to link PHP with Oracle 9.2.0/OCI8 with gcc 3.2.3 on a Solaris9 system. The link succeeds but everytime I try to run php, I get a SEGV from inside the libcnltsh.so library. ...
1
by: Richard Galli | last post by:
I want viewers to compare state laws on a single subject. Imagine a three-column table with a drop-down box on the top. A viewer selects a state from the list, and that state's text fills the...
4
by: Albert Ahtenberg | last post by:
Hello, I have two questions. 1. When the user presses the back button and returns to a form he filled the form is reseted. How do I leave there the values he inserted? 2. When the...
1
by: inderjit S Gabrie | last post by:
Hi all Here is the scenerio ...is it possibly to do this... i am getting valid course dates output on to a web which i have designed ....all is okay so far , look at the following web url ...
2
by: Jack | last post by:
Hi All, What is the PHP equivilent of Oracle bind variables in a SQL statement, e.g. select x from y where z=:parameter Which in asp/jsp would be followed by some statements to bind a value...
3
by: Sandwick | last post by:
I am trying to change the size of a drawing so they are all 3x3. the script below is what i was trying to use to cut it in half ... I get errors. I can display the normal picture but not the...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.