homepage Welcome to WebmasterWorld Guest from 23.20.28.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Forms, tight spaces, & CSS
how to get the form to fit
lorax




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

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?

 

Nick_W




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

Possibly, have you experimented with giving it a width?

Like

#formfield {
width: 4em;
}

Nick

lorax




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

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.

Nick_W




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

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

lorax




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

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.

moonbiter




msg:1203537
 7:16 pm on May 20, 2002 (gmt 0)

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

papabaer




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

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.

lorax




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

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.

Nick_W




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

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

lorax




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

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.

lorax




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

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.

lorax




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

I forgot to add this is only a problem with NN...papabaer??

Nick_W




msg:1203544
 3:35 pm on May 21, 2002 (gmt 0)

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

lorax




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

Nick !!
The display:block declaration did it. :) I owe you a pint. BTW it was NN6.

Nick_W




msg:1203546
 3:49 pm on May 21, 2002 (gmt 0)

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

Glad it worked out ;-)

lorax




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

fair 'nuff

ergophobe




msg:1203548
 5:41 pm on May 21, 2002 (gmt 0)


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

Nick_W




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

I stand corrected. ;)

papabaer




msg:1203550
 6:47 pm on May 21, 2002 (gmt 0)

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.

Nick_W




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

Cat 'n' mouse papabear?

papabaer




msg:1203552
 7:30 pm on May 21, 2002 (gmt 0)

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.

lorax




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved