Form layout problem (IE vs FF)

[Red]

Hi,

The following page looks right in firefox, but crappy in IE6. The forms
text area is all over the place.

http://tinyurl.com/2x92fc

Anyone help me out?

PS - Its my first effort at a proper site, so i am not after critiques
at the moment. Thanks!


Red.

 

[Rik]

The following page looks right in firefox, but crappy in IE6. The forms
text area is all over the place.
http://tinyurl.com/2x92fc

http://validator.w3.org/

 

[Chris F.A. Johnson]

Hi,

The following page looks right in firefox, but crappy in IE6. The forms
text area is all over the place.

http://tinyurl.com/2x92fc

Anyone help me out?

First, fix the errors. See:
<http://validator.w3.org/check?uri=h...g_samples.asp?range=bouquet&item=sample_basic>

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Red wrote :

Hi,

The following page looks right in firefox, but crappy in IE6. The forms
text area is all over the place.

http://tinyurl.com/2x92fc

<textarea name="comments" id="comments">
Textarea cols and rows attributes are required, mandatory.
http://www.w3.org/TR/html4/interact/forms.html#edef-TEXTAREA

Also, you are missing a closing tag for the
<div id="container">

Gérard

 

[Red]

Red wrote :




<textarea name="comments" id="comments">
Textarea cols and rows attributes are required, mandatory.
http://www.w3.org/TR/html4/interact/forms.html#edef-TEXTAREA

Also, you are missing a closing tag for the
<div id="container">

Gérard

Thanks all. Added cols and rows to the textarea, and also closed the
container div. Validates now, but still looks wrong in IE. Any other
ideas?

Thanks,

Red.

 

[Roy A.]

Hi,

The following page looks right in firefox, but crappy in IE6. The forms
text area is all over the place.

http://tinyurl.com/2x92fc

Anyone help me out?

PS - Its my first effort at a proper site, so i am not after critiques
at the moment. Thanks!

This isn't your main problem, so you don't have to focus on it right
now.

The fieldset element requires an legend element as the first child
element.
http://www.w3.org/TR/html401/interact/forms.html#edef-LEGEND

<legend>Order with PayPal</legend>

You can hide this element from visual rendring, e.g.:
@media screen, print, handheld, tty, tv { legend { display: none } }
http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule

Giv meaning to the background images, for non-visual browsers or non-
image rendring, with the title attribute, e.g.:

<div id="header" title = "K ard S - Luxury selection of handmade
cards with orginal designs and bespoke service"></div>
<div id="paypal_info" title="Paypal info:..."
<input .. alt="PayPal Submit"

(In addion to "text/html" try to serve the document as "application/
xhtml+xml".)

 

[Red]

>
This isn't your main problem, so you don't have to focus on it right
now.

The fieldset element requires an legend element as the first child
element.
http://www.w3.org/TR/html401/interact/forms.html#edef-LEGEND

<legend>Order with PayPal</legend>

You can hide this element from visual rendring, e.g.:
@media screen, print, handheld, tty, tv { legend { display: none } }
http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule

Giv meaning to the background images, for non-visual browsers or non-
image rendring, with the title attribute, e.g.:

<div id="header" title = "K ard S - Luxury selection of handmade
cards with orginal designs and bespoke service"></div>
<div id="paypal_info" title="Paypal info:..."
<input .. alt="PayPal Submit"

(In addion to "text/html" try to serve the document as "application/
xhtml+xml".)

Thanks for your input Roy. Yes, I do need to go through the whole site
and make sure all elements are accessible, and I will do so before I
finish. It is one area that I do not want to neglect. I will probably
be back here with more questions when I reach that point.

However, at the moment the textarea of my form is really bugging me.
Any help with this specifically would be greatly appreciated.

Thanks,

Red.

 

[Roy A.]

Thanks for your input Roy. Yes, I do need to go through the whole site
and make sure all elements are accessible, and I will do so before I
finish. It is one area that I do not want to neglect. I will probably
be back here with more questions when I reach that point.

However, at the moment the textarea of my form is really bugging me.
Any help with this specifically would be greatly appreciated.

IE 6 is doing something undefined with white spaces inside the
fieldset element. If you don't want to use a table element inside the
fieldset element, try to remove the white spaces between elements
inside the fieldset element.

Grrr. I don't know why IE is trying to prove that we need xhtml.

 

[Red]

IE 6 is doing something undefined with white spaces inside the
fieldset element. If you don't want to use a table element inside the
fieldset element, try to remove the white spaces between elements
inside the fieldset element.

Grrr. I don't know why IE is trying to prove that we need xhtml.

Grrr indeed. i Put the entire fieldset onto one very long line and the
problem dissapeared. Thanks Roy!!!

Whilst im here, I have yet another IE issue, same site:

http://preview.tinyurl.com/3cxa5a

All h3 elements on the page have a dashed bottom border. All is well in
FF, but in IE6 the first h3, and only the first h3, has no bottom
border. grrr!!!

Is Roy going to come to thr resCue again? <grin>

Thanks,


Red.

 

[John Hosking]

http://preview.tinyurl.com/3cxa5a

Roy, why don't you want to mention your actual URL?

All h3 elements on the page have a dashed bottom border. All is well in
FF, but in IE6 the first h3, and only the first h3, has no bottom
border. grrr!!!

I don't know (sorry), but I do notice that the border appears when I
bump the text size twice (to the max) in IE6. At that point, (1) the
text is larger, and (2) that first <h3> breaks to a second line. I don't
know which is relevant since you've forced a fixed width. But maybe
this'll help point you toward a solution.

 

[Red]

Roy, why don't you want to mention your actual URL?

I attribute newsgroups to the biggest cause of spam on my other domains.
There's nothing secretive about the URL.

I don't know (sorry), but I do notice that the border appears when I
bump the text size twice (to the max) in IE6. At that point, (1) the
text is larger, and (2) that first <h3> breaks to a second line. I don't
know which is relevant since you've forced a fixed width. But maybe
this'll help point you toward a solution.

Thanks John. I've added a height to the h3 (but making it no higher
than it already is) and that seems to have fixed the problem. Weird.

Cheers,

Red. (Not Roy!)

 

[Roy A.]

Grrr indeed. i Put the entire fieldset onto one very long line and the
problem dissapeared. Thanks Roy!!!

Whilst im here, I have yet another IE issue, same site:

http://preview.tinyurl.com/3cxa5a

All h3 elements on the page have a dashed bottom border. All is well in
FF, but in IE6 the first h3, and only the first h3, has no bottom
border. grrr!!!

To me it seems like this is an IE 6 HTML parser feature. I tried to
put the a elements inside div elements to make sure it wasn't a mixt
content issue. Same problem. It has something to do with how IE is
handling white spaces.

I don't have a decent answer on this issue. You could try to remove
all white spaces in the document, but that would make your document
hard to read. My best advise is to insert   (&nbsp after the
<div class="text_area"> tag. This will insert an empy line and convert
white spaces to normal spaces.

This may not be the answer you want, but I don't know any other way.

 

[John Hosking]

Cheers,

Red. (Not Roy!)

Oops, sorry. The post to which I was replying started with "Roy A.
wrote" in bright blue (although it also showed "Red wrote" in black),
and both names started with R, and my brain isn't what it used to be.
(It used to be a pineapple, but I'm feeling *much* better now.)