Forum Moderators: not2easy
In the past I've placed the form tag outside of the <td> tags but obviously, this doesn't validate. I'd like to be compliant - so is it possible to keep the form element from expanding the cell size using CSS?
Like
#formfield {
width: 4em;
}
Nick
I should have been more specific - the expansion is occurring in the height. I tried controlling the form height using:
form {
margin: 0px;
padding: 0px;
height : 18px;
}
But it doesn't seem to make a difference.
Try applying those styles to the form element like:
<input type="text" action="whatever.php" id="form_element" />
#form_element {
padding: 0;
margin: 0;
width: 4em;
height: 18px;
}
You may have to experiment but I see no reason why you should'nt get there. If not sticky me a link?
Nick
The bottom edge of inline elements like img sit on the baseline of the line box. This can cause a gap beneath an image in a table cell and can destroy a table-based layout in newer browsers. The behavior and possible workarounds are described here:
This may or may not help ...
form {
display:inline;
}
Most browsers add a line break, or additional spacing after a form element. The display:inline gives you a bit more control.
When I remove it, my problem regarding the spacing was solved. Just to be sure I used the W3C Validator and the page validated fine.
The next problem I had to deal with involved verticle positioning of the form elements. Thank you papabaer for jogging my memory. Once I applied a verticle position to the input box the graphic fell into place in both MSIE and NN6.
I'm happy as a clam. Now I just have to check CSS validation.
Nick
...xml declaration means it must validate as xml not just against the dtd and therefor ... you have trouble with the table based layout and images
I'll have to look into this again but now it's time for a bit of shut-eye.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <body> </body>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Title</title>
<link rel="stylesheet" href="dki.css" type="text/css" />
</head>
<table cellpadding="0" cellspacing="0" align="center" class="thinbrdr">
<tr>
<td bgcolor="#666699" rowspan="2"><img src="img/fpo.gif" width="541" height="105" alt="logo" /></td>
<td bgcolor="#666699"><img src="img/fpo.gif" width="35" height="78" alt="spacer" /></td>
<td bgcolor="#666699"><img src="img/fpo.gif" width="174" height="78" alt="spacer" /></td>
</tr>
<tr>
<td bgcolor="#666699"><img src="img/fpo.gif" width="35" height="27" alt="spacer" /></td>
<td bgcolor="#CCCC99">
<form id="form1" method="post" action="#">
<input type="text" id="criteria" size="20" class="sminput" />
<input type="image" id="GO" src="img/search.gif" /></form>
</td>
</tr>
</table>
</html>
The styles for the form are:
input { .sminput {
form {
margin: 0px;
padding: 0px;
}
font:9pt Geneva, sans-serif;
color:#300;
border:#f90;
border-width:1px 0px 1px 0px;
margin: 0px;
padding: 0px;
}
width:120px;
height:16px;
vertical-align : text-top;
If you have some insight I'd sure appreciate it.
First, which version of nn?
Second, rip out all those alt="spacer" thingies, they're useless. use alt=""
Third, what is the id="GO" for?
Fourth, assuming you need it, change it to id="go", all xhtml atributes should be lower case.
Fifth, the problem is unwanted space caused by that image right? Try this:
td img {
display: block;
}
Should sort it ;)
Nick
Glad it worked out ;-)
change it to id="go", all xhtml atributes should be lower case
Are you sure about this? Of course, XHTML requires that XHTML tags and attributes are lowercase and XHTML is case sensitive, but this means that you can have
id="go"
id="GO"
id="Go"
id="oG"
which are all valid and all different (confusing, of course, but distinct IDs). However, you cannot have
ID="go"
which would not validate.
Tom
I recently had one of my dropdown menus “break” alignment because the user defined style sheet overrode the font-size I had assigned to the “select” box. The dropdown menus (3) were sized using CSS and worked well across browsers and platforms… that was until a USER-DEFINED style sheet increased the font-size causing the select boxes to “break rank” so to speak.
I added !important to my style declaration to regain control.
select {
background:#ffc;
color:#000;
font-size:10px;
width:202px;
!important
}
It allows Web authors to override user-defined style sheets when there is a possibility of conflict. Be aware however, that the USER can also make use of !important and that will take precedence over the author’s !important declaration.
Here is what WC3 says about the Cascade: [w3.org...]
6.4.2 !important rules
CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the keywords "!" and "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
There is always something just a bit further "down the pipe" to look out for.
Especially as "power-users" begin to create their own style sheets. This will be a very important consideration when planning layouts using CSS.
Obviously there will be times when the author's styles SHOULD take precedence, particularly for graphically complex presentations where precise alignment is required.
But in general, considerations should be given to user defined style sheets since accessibility may depend on it (color-blindness, font size, etc.).
Opera allows users to ZOOM to increase readability but it is the user defined styles that will allow accessibility for those surfers requiring certain color combinations for optimal viewing.
I am still trying to learn as much about the WAI (Web Accessibility Initiative) as possible. Here to, CSS will play an important role.
RE: CSS - I entered the school of hard-knocks while trying to solve the above problem. Now I'm afraid I've created a monster. I'd better come up with a methodology for the heirarchy before it royally screws me up.
GB
