Aligning form in Firefox

Craigj1303 · #1 (**permalink**) May 24th, 2007, 22:20

Hi

http://uk.geocities.com/johnson463@btinternet.com/HTML/WC150STD2LGOPT.html

In the above link there is a picture with a form underneath. In IE the form is aligned center but in Firefox the form is aligned left. I cannot understand this because the form is inside a container DIV which has the text-aligned center which is how I want it. I have even tried putting <p> tag around the form to experiment but it doesn't seem to affect the look of the form in Firefox.

Any ideas?

Pádraig · #2 (**permalink**) May 24th, 2007, 22:44

Try this.

HTML

Code: Select all

<html>
<body>
<div id="container">
Content here
</div>
</body>
</html>

CSS

Code: Select all

#body {
     text-align: center;
}

#container {
     text-align: center;
     width: 700px;
     margin: 0 auto;
}

Lchad · #3 (**permalink**) May 24th, 2007, 22:56

Wow I don't know either. I tried, nesting that form in another div and centering that.. I tried centering the table with deprecated code which is a "no no" and that still didn't move the form.

I tried adding a clear div above the form and that didn't move it.
I even added <p></p> around it and assigned a class that centered the p's that didn't work.

I ran it through the validator and you have mega errors. My guess is something in the errors if blocking the centering.

Craigj1303 · #4 (**permalink**) May 24th, 2007, 22:57

My HTML and CSS is already setup with those attributes?

masonbarge · #5 (**permalink**) May 25th, 2007, 11:38

I looked at the html and css, and I wouldn't expect it to be centered (although my expectations are frequently defeated in css). Anyway, if you want a theoretical reason "why", it's going to take a lot of looking into inheritance rules in the w3c and the application of text-alignment to block elements (which, if I understand it correctly and I may not, theoretically shouldn't apply to block elements in the first place).

Anyway, what I see is this.

Code: Select all

<table>
 <tr>
  <td>
   <input type="hidden" name="on0" value="Size:">Size:
  </td>
  <td>
   <select name="os0">    <option value="4x6" selected>4x6
    <option value="11x14">11x14  
   </select>
  </td>

with no corresponding css for the table.

My advice would be, first, to take the form out of the table and put it into divs. (Using the <table> tag launches a heavy process -- it's really better to use a whole bunch of div's unless you really need a tabulated format, which you almost never do for a form. CSS formatting is a magnitude lighter than html's table formatting, not to mention it's more flexible. )

Put the elements you want aligned -- as I understand it, a large graphic and a small form -- into a parent div the width of the graphic and get it positioned. Then put the form into a child div and center the form's child div inside the parent. You may need to put a "clear:both" command in there somewhere if you have a float in the vicinity, to make Firefox display the full contents & formatting.

(When I use floats I keep a "<div class='clear'></div>" hotkey handy, to keep FF in the corral.)

Personally, with all the centering eccentricities of Gecko, IE7, and earlier IE flavors, if I weren't going to use separate styles for different browsers I might do what I just said and then put a px-measured left margin on the child form instead of actually centering it, since you're going to have a px-sized graphic as the structure it is centered on. That will get you within a couple of pixels of true center on every browser unless you get really big or small fonts from the viewer's browser settings. (You can solve that if you want to set the form's font size in pt's. Or, if you set the font-size in px's it will create a fixed size on IE but not Firefox.)

Or you might be able to get almost all browsers to center it by using "auto" for the left-right margins in the child div and "text-align: center" in the parent div. That is the theoretically correct solution combined with the most prevalent bug (IE).

Lchad · #6 (**permalink**) May 25th, 2007, 11:43

Quote:

I'd probably do what I just said and then put a px-measured left margin on the form instead of actually centering it, since you're going to have a px-sized graphic as the structure it is centered on. That will get you within a couple of pixels of true center on every browser unless you get really big or small fonts from the viewer's browser settings.

I think this would be the way to go because all of the other suggestions Mason made are things I tried. None of them worked.

Craigj1303 · #7 (**permalink**) May 26th, 2007, 12:17

I was able to get shot of the table and put the form in a DIV as suggested but I could only create a parent DIV for the form and the Paypal image. When I tried to put the Paypal image in a child DIV the <form> tag was split in 2 and wouldn't validate. Any thoughts on this?

I used the following CSS and now the form in centrally aligned in all browsers:

Code: Select all

#formcontainer {
 margin:0 auto;
 text-align:center;
 width:200px;
 margin-top: 10px;
 margin-bottom: 10px;
 }

I created a space between the form fields and the Paypal image by puting an extra <br/> tag between them.

Can anyone tell me though why IE insists on putting a space between elements? For example, in the link below IE displays a space between the pictures heading "Polperro, Harbour" and the image itself whereas other browsers do not.

http://uk.geocities.com/johnson463@b...STD1LGOPT.html

I have reduced the number of erros in validation to about 8 but I think I will make a seperate post on these in the HTML forum.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aligning box to right	fr33sty13	Web Page Design	8	Jun 6th, 2008 03:49
firefox floating form bug	trandrus	Web Page Design	6	Aug 2nd, 2007 21:39
Need help with Firefox iframe, jsp, form submit issue	bmachine	Other Programming Languages	4	Mar 14th, 2007 19:01
Display Problem: Form-->Legend field in Firefox	SuperGrover1981	Web Page Design	2	Sep 5th, 2006 18:05
Problem aligning submit button in Firefox	AdRock	Web Page Design	3	Aug 16th, 2006 10:13

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Aligning form in Firefox