IE6 layout problem corrects when move around screen (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

spinningjennie -> IE6 layout problem corrects when move around screen (11/7/2007 5:05:45)

Problem Summary:
I don’t know if it’s a CSS problem that I created (I won't blame Mike Cherim) or a PHP problem, but I have problems in IE6 with the layout of my version of the Mike Cherim secure form (his version seen at http://green-beast.com/blog/?page_id=71) (and a different layout problem in Opera).

IE6 Problem 1: My version of the Mike Cherim secure form is laid out correctly in Mozilla FireFox, IE7 and Safari. However, in IE6 there are problems with the layout which correct themselves once you move around the screen.

Here is the address of the form:
http://www.crcl.org.au/enqformfinmc1.php the form (please copy and paste this url into IE6 because when you click this link only the 1st problem below is able to be seen!).
Here is the stylesheet.

1. In IE6 the ochre coloured ‘Enquiry Form’ heading at the top of the form is missing (or clipped at the bottom) at 1st, but it appears correctly after you scroll down then up the screen again.

2. In IE6 with the Spam question lower down (Is fire hot or cold?) there is not enough height available to show the input of the answer to the spam question. But if you move your cursor over the input box the input box now appears correctly.

3. Also with the Spam section, the text, ‘Why ask?’ overlaps the spam question until you move the cursor over the input section.

Opera Problem 2: With Opera the Mike Cherim acknowledgement at the bottom of the form is slightly overlapping the ‘Check this box if you want a carbon copy of this email.’

Here is the gbcf_form.txt that creates the gbcf_form.php that is included within my final form.

I'm sorry this seems a complex question as it involves PHP which I'm not familiar with, but I'm hoping the PHP side of things is not the cause of the problem.

Thanks for any thoughts on this. (I'm trying to use a form that will beat the robots that keep filling in my form!)

spinningjennie




Tailslide -> RE: IE6 layout problem corrects when move around screen (11/7/2007 5:57:02)

Don't worry about the PHP it won't be that - all you get on the generated page is HTML anyway.

It's a bit freaky actually - I think that the issue is conflicting rules somewhere in there but not sure where... I've used the same form myself and it seems to work fine.

You could try removing the styles relating to the anti-spam question and see if that works - on my version I haven't actually used those at all - I've basically just re-used my old form styles and just tweaked them slightly.



spinningjennie -> RE: IE6 layout problem corrects when move around screen (11/7/2007 7:48:55)

Thanks Tailslide for helping me to focus my efforts on the Stylesheet rather than the PHP. I've just checked Mike Cherim's demo form and his looks fine in IE6 so it must be something to do with my own stylesheet rules.

I'll have a go at it tomorrow.

spinningjennie



spinningjennie -> RE: IE6 layout problem corrects when move around screen (11/8/2007 7:51:41)

These problems now solved, though I'd love to understand why the solutions worked!

Here’s the form with the new stylesheet.


IE6 Problems 1:

1. Ochre ‘Enquiry Form’ heading was missing then appears when you scroll screen.
Solution: these 2 approaches worked, but I’d love to know why they worked!

i) Added to stylesheet:
.main_formhead, .formhead {height:20px;}

ii) Or could add to stylesheet:
form#gb_form {border:1px solid #choose colour same as background}

2. For both layout problems in the 'Spam question area' this worked, but I don’t know why it worked!

Removed this line of stylesheet:
form#gb_form {position: relative;}

Opera Problem 2:

Changed:
p.creditline {margin : -17px 0;} to
p.creditline {margin : -5px 0;}

Added:
p.creditline {padding-top:5px;}

So I’m almost there with this form! Though a bit of tidying up to do with alignments and colouring. Thanks again Tailslide for getting me to concentrate on the stylesheet.

regards,
spinningjennie



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625