Form Adjust

I’m trying to get the form to conform within the DIV, if the DIV has to be resize to a degree that’s fine. Another issue unlike other links within the page, this section of the page scrolls which I think is a direct reflect of the form.

I forgot to add. When working with PHP that uses line styles it’s a pain to find the ID associated with the style using firebug, is there a way around this I hope I was clear :slight_smile:

Sorry, not sure I understand what you’re trying to achieve - can you explain it in more detail?

The form on the link is falling outside of the #contact ID I want it conformed within the #contact ID. The other issue is that the page is scrolling, if you visit any of the other in construction links on the page, you’ll see there is no scrolling I believe It has a direct reflection of the form, but I’m not sure.

What do you mean with

The form on the link

Yeah the form, is not contained within the ID ‘contact’ it’s outside of it !

I presume you mean that the form content is extending outside of #contact? That is because #contact has a height! Which is not a good idea. It’s better to use overflow hidden for #contact. That way it will extent depending on the form.

Edit. I don’t understand though, why you have an extra div wrapped around the form?

Now the rest of the form is cut off. I will be stylizing each element of the form, since the form uses inline styles, it’s a pain using firebug to find what is associated to what. For example, I want to change each of the input boxes as a graphic but finding that in the PHP settings is not so simple.

Why are you using inline styles for your form? You can apply all the styles you want for your form in CSS.

#contact form{
  width: ...
  margin: ....

Same goes for the <p> inside your form and any other elements for that matter.

#contact form p {
  padding-top: 5px;

So like I said you don’t need that extra div and remove the height property from #contact and you should be okay!

Using inline styles helps when updating the PHP tool, that’s why ! Is there another way I can work around this to style the form, but keep it inline for the script!

The page is still scrolling ! I want the form conformed within the ID to move the ID around and add graphic to the ID. As the ID (div) will have a background graphic and for all the elements of the form they will be graphics, I have a mock-up in place so I know what I’m working from :slight_smile:

I’m a bit lost now :confused: You need inline styling for your PHP tool? I don’t see any logic in that, but maybe one of the PHP people can help you with that.

Looking forward to find out why that would be needed!

This appears to be the contact form being used. It has an admin panel for setting inline styles.

Oh my. Thank you for the link Victorinox!

@SiberianHuskey*** You have about 8 elements in your form (labels, if in use, not counted) Why would you need a tool to style that form? You can do that very easy yourself.

Edit: I hope you are aware that your site won’t validate when using inline styles in a XHTML strict document

I don’t need a tool to style the form, it’s just finding what inline style to edit in the PHP settings of the form, so when I make the appropriate adjustment. Another reason why I prefer sticking with inline styles is because it survives upgrades.

Although the page is still scrolling !

Can you give an example of those PHP settings of the form? What difference would it make if, for example, the properties for the <p> within your form would be in your CSS instead of inline?

Other pages on the site are scrolling if you make the window small enough for them to need to scroll, in just the same way. The contact form doesn’t scroll if you have a big enough window.

The reason that some of it goes behind the grey box at the bottom is because you have

#footer {[B]position:fixed;[/B] width:100%; left:0; bottom:0; height:80px;}

That means that the grey bar of the footer is always at the bottom of the screen, in front of any other content that would show. If you don’t want the main content to disappear behind a sticky footer, don’t have a sticky footer.

I want the sticky footer, how can I keep the contact DIV and make the form adjust within the contact DIV, understand ?

Do you mean you want to revert to the original fixed height on #contact (300px was it?) and the width of 425px and contain the form within it so that the form remains visible and does not spill outside?

If so, then you’re attempting to squeeze the form into a small area with no means of expansion.

When the form is submitted incorrectly, extra space needs to be available to display the generated error messages. Currently, the form requires Content to have a height of over 650px to display all error messages. I’m sure you’ll realise that this makes it even more difficult to contain a fully operational form in a 425x300px box.

Take a step back and look at what’s happening here. You are forcing your content to fit a restrictive design concept. Is that a sensible path? Providing flexibility in a design tends to lead to an easier life for both developer and user.

What about shrinking the contents of the form to make it fit ?

If all the labels were on the same line as the inputs, the 250px width on the div containing the form removed, and everything squashed together vertically then it would probably fit.

But as soon as error messages are generated… splat!

When using a form that provides error messages, you have to allow space for them. Therefore, when working on applying styles to the form using Firebug, it makes sense to work with all the possible errors in view. i.e. enter nothing in the form and click the submit button. What you then see is what you need to accommodate in the design.

Maybe it’s possible to display the error messages differently, which is something you could seek support with at the form developers site.