CSS & IE browser issue

[kennyaidan]

Hey Guys,

I have built a simple form for the "Contact Us" page of my website. From a technical perspective it works in both IE and Firefox i.e. it sends the submission onto the relevent email address.

It also looks fine in Firefox but there are two look and feel issues with IE:

1. When you first load the page in IE, the layout in terms of spacing looks fine. However when you hover over one of the links on the left hand side, the form's position on the page just drops for no apparent reason and it widens.

2. Secondly at the top of the form, the background colour comes over the top and is not in sync with the rest of the form.

Both of these issues do not occur in Firefox.

Here is the URL for the page in question:

http://www.naomhmearnog.ie/index.php?page=contact-us

Here is my stylesheet and form code:

<p>

<form id="m4moduleform_2" method="post" action="index.php" enctype="multipart/form-data"><div class="hidden"><input type="hidden" name="mact" value="FormBuilder,m4,default,0" /><input type="hidden" name="m4returnid" value="52" /></div>

<input type="hidden" name="m4form_id" value="1" />
<input type="hidden" name="m4fbrp_continue" value="2" />
<input type="hidden" name="m4fbrp_done" value="1" />

<div class="contactform">
<div><style type="text/css">
.contactform fieldset {padding: 1em; background-color: #eee;}
.contactform fieldset legend {font-weight: bold;}
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;}
.contactform div label {display: block; width: 10em; }
.contactform div.required {color: #f00;}
</style></div>
<fieldset><legend>Contact</legend>
<div><label for="m4fbrp__4">Your Name</label><input type="text" name="m4fbrp__4" id="m4fbrp__4" value="" size="25" maxlength="128" />
</div>

<div><label for="m4fbrp__5">Your Email Address</label><input type="text" name="m4fbrp__5" id="m4fbrp__5" value="" size="25" maxlength="128" />
</div>

<div><label for="m4fbrp__6">Subject</label><input type="text" name="m4fbrp__6" id="m4fbrp__6" value="" size="25" maxlength="128" />
</div>

<div class="required"><label for="m4fbrp__7">Message*</label><textarea name="m4fbrp__7" cols="30" rows="5" id="m4fbrp__7"></textarea></div>
</fieldset>

<div class="submit"><input name="m4fbrp_submit" value="Submit Form" type="submit" class="fbsubmit" id="fbsubmit" />
</div>

</div>
</form>

</p>

Does anyone know any fixes for this bug in IE? Is there code I can add to the stylesheet maybe setting the postion on the table to a certain place on the page?

Thanks
Aidan

 

[BillyRayPreachersSon]

What version of IE are you seeing the first problem in? Viewing in IE 6 doesn't show this up for me.

Regarding the second problem, you can minimize it by setting the top padding to 0. I know this doesn't help your styling, but perhaps you could put the padding and/or background colour on a div inside the fieldset instead of on it? Styling form elements like this is always unpredicatble.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kennyaidan]

Hi Dan,

Thanks for getting back to me. I'll try what you have suggested however for point 2.

With regard to point 1, I am running IE 6. If you go to the contact us page:

http://www.naomhmearnog.ie/index.php?page=contact-us

Watch closely the positioning between the sentence "Club Coach: Paddy Gorey" and the contact form as you hover over any of the left hand nav links such as links, committees etc. The form moves down by about 30 pixels.

Now if I add enough content on this page to push the form position past the last link on the left hand nav i.e. Contact Us, the form stays in position (this is what you seen when you first looked at this test page) even if you hover.

However when I remove this extra text the form will look correct until you hover and then it will move. It is like on hover the CSS is telling the form to clear the left navigation. Can't see where this is set in my CSS. Here is my CSS code:

/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 75.01%;
line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
font-size: 1em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
background-color: inherit;
color: #000000;
}

a:visited {
text-decoration: underline;
background-color: inherit;
color: #000000; /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
text-decoration: none;
background-color: #F6B30A;
color: #000000;
}

/*****************
basic layout
*****************/
body {
background-color: #C0C0C0;
color: #333;
margin:1em; /*gives some air for the pagewrapper */
background: #F6B30A url(uploads/images/bkg1.jpg) repeat-x 0 0px ;
}

/* center wrapper, min max width */
div#pagewrapper {
border: 1px solid black;
margin: 0 auto; /* this centers wrapper */
max-width: 79.1em; /* HERE IE wont understand these, so we will use javascript magick */
min-width: 60em;
background-color: #fff;
color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
height: 260px; /* adjust according your image size */
background: #FFF;
width: 950px;
}

div#header h1 a {
/* you can set your own image here */
background: #000000 url(uploads/images/homeBanner.jpg) no-repeat 0 0px; /*Top Banner Image and top Gap*/
display: block;
height: 260px; /* adjust according your image size */
width:950px;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */

}

/* position for the search box - Original Code*/
/*div#search {
float: right;
width: 23em;
text-align: right;
padding: 0.6em 0 0.2em 0;
margin: 0 1em;
}*/

/* position for the search box */
div#search {
float: right;
width: 23em; /* enough width for the search input box */
text-align: center;
padding: 0.6em 1em 0.2em 0;
margin: 0 1em;
font-size: 90%;
align: center;
}

#m2searchinput{
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;
font-size: 90%;
padding: 0.2em;
text-align: left;
align: center;
}

#m2searchinput label {
text-align: center;
align: center;
padding:0px;margin:0px;
}

div.breadcrumbs {
padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
font-size: 90%; /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
margin: 0 1em; /* css shorthand rule will be opened to be "0 1em 0 1em" */
border-bottom: 1px dotted #000;
}

div.breadcrumbs span.lastitem {
font-weight:bold;
}

div#content {
margin: 1.5em auto 2em 0; /* some air above and under menu and content */
}


div#main {
margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
margin-right: 2%;
}


div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 26%; /* sidebar width, if you change this please also change #main margins */
display: inline; /* FIX IE double margin bug */
margin-left: 0;
}

div#footer {
clear: both; /* keep footer below content and menu */
color: #fff;
background-color: #F6B30A; /* same bg color as in header */
}

div#footer p {
font-size: 0.8em;
padding: 0.5em; /* some air for footer */
text-align: center; /* centered text */
margin: 0;
}

div#footer p a {
color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
padding: 1em;
border-bottom: 1px dotted black;
margin: 1em;
}

/* relational links under content */
div.left49 {
width: 49%; /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
float: right;
width: 49%;
text-align: right;
}

 

[kennyaidan]

Hi Guys,

Just an update on this issue, was able to resolve the form moving issue by setting the form width to a px width instead of a percentage.

However still can't get the form looking 100% right in IE.

Here is my css code for the form:

<p><style type="text/css">

.contactform fieldset {padding: 1em; width: 300px; position:relative; background-color: #eee;}
.contactform fieldset legend {font-weight: bold; }
.contactform div {width: 300px; padding: 0.25em 0 0.25em 0;}
.contactform div label {display: block; width: 10em;}
.contactform div.required {color: #f00;}</style></p>

I have tried changing the padding but cannot get rid of the padding around the top of the form while at the same time keeping the existing bkg colour in the other parts of the form.

Here is the link to my site:

http://www.naomhmearnog.ie/index.php?page=contact-us

Any ideas or hints very welcome at this stage! The form appears perfect in Firefox and Opera.

Thanks
Aidan