css table / form margins in firefox?

[styleBunny]

Hi gang,

hope yall is well, have this page,

http://www.equilibriumradio.info/test/contact.php

the form elements are positioned using a table, both the form and table tags are within a p tag, like so.

<p>
<form>
<tabel>
text and form elements
</table>
</form>
</p>

the p tag is

p,h1,h2{
font-size:0.8em;
margin:0px 20px 10px 20px;
text-align:justify;
}

and there are no table/form styles, the rest of the css is at

http://www.equilibriumradio.info/test/css/eqStyle.css

The p tags are creating a 20px left margin, which works fine for images and text, but with the table / form, combination, the margin is rendered incorrectly in ff, ie 6 is ok, then another problem, ie4 and ff render the font size incorrectly.

So i'm asking how can i make the p margin effective on the table / form elements in ff (are tables and forms block or inline?) and how can i make the text in ie4 and ff render like in ie6?

Cheers, and thanks for reading, css is fun but frustrating!
Paul.

 

[CliveC]

You need to specify css for the table as well. It does not use the p tag.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[BillyRayPreachersSon]

Try adding this to your style section:

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

to remove any issue with the form having extra spacing.

It is possible your layout isn't working in some browsers because you're using a "tabel" tag instead of a "table" tag.

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 

[cLFlaVA]

more than just the table. if you want font styles to display inside your table, you'll need to define styles for your [tt]<td>[/tt] tags as well.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CliveC]

<textarea cols="30" rows="10" class="textArea" name="enquiry"></textarea>

I have found that this is not very controllable as coded. I found by experiment that:

<textarea cols="#" rows="*" class="textArea" name="enquiry"></textarea>

validates and then you can set the font, width and height for the textarea.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[CliveC]

those should both be # signs.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[Vragabond]

And now, just to make you start all over. Tables and forms, like you thought are block elements. And they definitely don't belong in a paragraph. So, first thing to do is to get rid of the paragraph and work from there. Both form and table tags can have margins applied to them, so anything that works for you in regards to paragraph, can easily be applied to form and/or table as well.

 

[styleBunny]

Hi guys,

Thank-you one and all for your input on this problem!

The solution was to remove the form and table from the p tag, set the font size in the td style and add the margin-left to the form. Now i realise that forms / tables are block its obvious they dont belong inside a p.

Shout out to CliveC, clFlaVA and Vragabond!

P.