Welcome to WebmasterWorld Guest from 54.145.209.34

Forum Moderators: not2easy

Forms, tight spaces, & CSS

how to get the form to fit

   
5:21 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hey Folks,
I have search form that has an input box and a img for the submit action. I'd like to squeeze this into a table cell but can't because the form element expands the cell - which blows up the nice sliced graphics.

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?

6:28 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Possibly, have you experimented with giving it a width?

Like

#formfield {
width: 4em;
}

Nick

6:46 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hey Nick_W,
You're gonna get sick of me before this day is through! :)

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.

6:50 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Nah.... you're okay for the moment ;)

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

6:59 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hmm.. I took the problem child out of the original file and started building a new page with just the header table (where the problem child lives) and there's no problem. Looks like the problem isn't with the form after all. I need to do some digging - I'll let you know what I find when I find it.
7:16 pm on May 20, 2002 (gmt 0)

10+ Year Member



Without seeing the markup I can't be for sure, but it is possibly the image that is causing the problem.

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:

[developer.netscape.com...]

This may or may not help ...

7:44 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did you try...

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.

8:43 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hah!!
Got it. Two part answer. Part of the problem was that I had included this line: <?xml version=\"1.0\" encoding=\"UTF-8\"?>. I included this because of the examples I've seen. I'm not sure if I really need this or not though.

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.

8:52 pm on May 20, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmm... Maybe that the xml declaration means it must validate as xml not just against the dtd and therefor as mentioned earlier you have trouble with the table based layout and images.

Nick

12:23 am on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Blimey,
Well I thought I had it but apparently not. I went back and looked at the page in NN6 and that table cell is messed up. In MSIE it's fine.

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

3:12 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I'm pounding my head against the wall on this one - and it's very sore. I've reduced the page to just the problem child again (in xhtml w/o PHP):

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Title</title>
<link rel="stylesheet" href="dki.css" type="text/css" />
</head>

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

</body>
</html>

The styles for the form are:


form {
margin: 0px;
padding: 0px;
}

input {
font:9pt Geneva, sans-serif;
color:#300;
border:#f90;
border-width:1px 0px 1px 0px;
margin: 0px;
padding: 0px;
}

.sminput {
width:120px;
height:16px;
vertical-align : text-top;

If you have some insight I'd sure appreciate it.

3:14 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I forgot to add this is only a problem with NN...papabaer??
3:35 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Right, couple of things:

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

3:48 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Nick !!
The display:block declaration did it. :) I owe you a pint. BTW it was NN6.
3:49 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Next time I'm back in blighty I'll hold you to that!

Glad it worked out ;-)

3:56 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



fair 'nuff
5:41 pm on May 21, 2002 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month




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

6:39 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I stand corrected. ;)
6:47 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here is another point to consider as well as to avoid: User defined style sheets and form elements.

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.

6:51 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Cat 'n' mouse papabear?
7:30 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Pretty much...!

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.

8:04 pm on May 21, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Hey Papabaer, et al.,
Thanks for your input.

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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month