asked on

width sizing fails with input tag

Hi all,

I try to resize some input elements in a form.
Unfortunately some resizing denitions are failing: use of the attribute size for the element "nomSite", or the use of a class for the element "titreSite1".

It sounds as if there are some conflicts between several CSS definitions.

Sooner I had to extract some definitions from the CSS file to make them worked.

Thanks in advance for any advice.

You can find the example : http://pouxdagouti.org/aster/sizing-issues.htm

This is the CSS file :

body {
    background-color:#f8f8ff;
    font-family:Arial, Courier, "Times New Roman";
    font-size:16px;
}

#recherche fieldset {
    margin: 0 0 14px 0;
}

#recherche fieldset legend {
    font-weight: bold;
    font-size: 1.2em;
    color: #000;
}

#suivi th {
    font-size: 0.7em;
}

#suivi input[type="text"], input[type="tel"], input[type="email"] {
    width: 60px;
    padding: 5px 8px;
    font-size: 0.7em;
    color: #666;
    border: none;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
    background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

#suivi input[type="email"] {
    width: 200px;

.plusgrand {
    width: 120px;
}	

.tresgrand {
    width: 250px;
}

#suivi input.unpeuplusgrand {
    width: 100px;
}	

#suivi input[type="text"]:focus {
    -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
    -moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
    box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
}

#suivi textarea {
    width: 120px;
    padding: 5px 8px;
    font-size: 0.7em;
    color: #666;
    border: none;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
    background-image: -moz-linear-gradient(0% 12% 90deg, #fff, #999);
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

#suivi textarea:focus {
    -webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
    -moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
    box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
}

/*
#entete {
    background-image: url("logo-aster.jpg"); 
    width:50px;
    height:10px;
    position:top center; 
}
*/

Open in new window

Scott Fell

It seems to work.
On your css http://pouxdagouti.org/aster/suivi-aster.css starting line 21 is where you can adjust the width and it is controlled by #suivi input[type="text"]
#suivi input[type="text"], input[type="tel"], input[type="email"] {

I couldn't see a class for titreSite1

I would suggest making a class like input.size1, input.size2, input.size3. Then add css for widths for those items. Then you can adjust many input items at once.

Richard Coffre

ASKER

Hi padas,

I try the following modifications but it still fails :(

In the CSS file :

input.libelleSite {
    width: 200px;
}

Open in new window

In the HTML file :

<input id="nomSite" name="nomSite" type="text" class="libelleSite" va

Open in new window

Any ideas ?

ASKER CERTIFIED SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Richard Coffre

ASKER

Hi,

That's good but it works only if I put it directly in the section style of the HTML file.
If I put it in the CSS file, it fails.

Any ideas ?

Scott Fell

It is order of operations. The last loaded css file takes precedence.

I suggest creating a new external sheet called custom.css where you put these types of tweaks. Or put your custom tweaks at the bottom of http://pouxdagouti.org/aster/suivi-aster.css