Hey Guys,
I have built a form for my website with the form builder module. 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 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. Does anyone know any fixes for this bug in IE?
Here is the URL for the page in question:
http://www.naomhmearnog.ie/index.php?page=contact-us
Here is my stylesheet for the form
.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;}
I am using one of the default forms already in CMSMS, I just alter the number of columns in the mesage text box .
Thanks
Aidan
Form Builder & IE look and feel issue
-
unknown
Re: Form Builder & IE look and feel issue
Greetings,
A couple of things worth mentioning (not a cure guarantee).
HTH, and best wishes.
A couple of things worth mentioning (not a cure guarantee).
- All versions of IE treat sizes differently than in geko based browsers - sizes are rendered larger in IE.
- You mention you have hover/link issue(s). But I'm unable to discover any link properties in your included css on this thread.
- I also note the omission of IE version
- I also note the omission of Operating System
- I also can't help but notice you've omitted the Operating System version
- All of these do make a difference
HTH, and best wishes.
Last edited by unknown on Sun Nov 11, 2007 6:42 pm, edited 1 time in total.
-
aidank
Re: Form Builder & IE look and feel issue
Hi,
Thanks for getting back to me.
Here are some details for you
- It looks fine on both Firefox and Opera.
- My IE operating system is XP Profesional
- My version of IE is version 6
With regard to "You mention you have hover/link issue(s). But I'm unable to discover any link properties in your included css on this thread.", I am just using the standard "Navigation: Simple - Vertical" stylesheet, here is the code for the left navigation:
/********************
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 1em;
}
/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}
/* menu li block */
#menu_vert li {
list-style: none;
margin: 0;
border-bottom: 1px solid #808080; /* FFF */
display: block;
}
#menu_vert ul ul li {
border: none;
}
/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/
/* first level links */
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.5em 0.5em 0.5em 1.5em; /* some air for it */
color: #000; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.8em;
background-position: 1.5em center;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/dash.gif) no-repeat 2.8em center;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: #EAB900;
}
div#menu_vert a.activeparent:hover {
background-color: #EAB900;
color: #000; /* Bkg colour for active link was 18507C now FFE9AF */
}
/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
background-color: #000; /* Bkg Colour of the main link when child is active 385C72 808080*/
color: #FFF;
font-weight: bold;
}
div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #000;
font-weight: bold;
}
/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
background-color: #000; /*385C72 C0C0C0 808080*/
display: block;
padding: 0.5em 0.5em 0.5em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for */
margin: 0; /* as normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}
div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}
***********************************************
If you look at the link I provided, the issue lies with when I hover over one the left hand links, then the form moves. Otherwise I have no issues with the left navigation, it works as expected so I'm not sure if the issue lies with my left nav code.
I would have assumed it was to do with my form code but again I have run out of ideas. Is there any position code I can add that would force IE to leave the form in the correct position?
Any help/tips would be really appreciated.
Thanks
Aidan
Thanks for getting back to me.
Here are some details for you
- It looks fine on both Firefox and Opera.
- My IE operating system is XP Profesional
- My version of IE is version 6
With regard to "You mention you have hover/link issue(s). But I'm unable to discover any link properties in your included css on this thread.", I am just using the standard "Navigation: Simple - Vertical" stylesheet, here is the code for the left navigation:
/********************
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 1em;
}
/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}
/* menu li block */
#menu_vert li {
list-style: none;
margin: 0;
border-bottom: 1px solid #808080; /* FFF */
display: block;
}
#menu_vert ul ul li {
border: none;
}
/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/
/* first level links */
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.5em 0.5em 0.5em 1.5em; /* some air for it */
color: #000; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.8em;
background-position: 1.5em center;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/dash.gif) no-repeat 2.8em center;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: #EAB900;
}
div#menu_vert a.activeparent:hover {
background-color: #EAB900;
color: #000; /* Bkg colour for active link was 18507C now FFE9AF */
}
/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
background-color: #000; /* Bkg Colour of the main link when child is active 385C72 808080*/
color: #FFF;
font-weight: bold;
}
div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #000;
font-weight: bold;
}
/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
background-color: #000; /*385C72 C0C0C0 808080*/
display: block;
padding: 0.5em 0.5em 0.5em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for */
margin: 0; /* as normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}
div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}
***********************************************
If you look at the link I provided, the issue lies with when I hover over one the left hand links, then the form moves. Otherwise I have no issues with the left navigation, it works as expected so I'm not sure if the issue lies with my left nav code.
I would have assumed it was to do with my form code but again I have run out of ideas. Is there any position code I can add that would force IE to leave the form in the correct position?
Any help/tips would be really appreciated.
Thanks
Aidan
-
unknown
Re: Form Builder & IE look and feel issue
Greetings,
Ahhh, IE6.
This one is a real bugger. It's worse than the older versions of Opera.
Truly, this will be a never ending saga - getting your content to look identical in all browsers is "The Holy Grail"
as it were. You'll spend tremendous amounts of time attempting to achive this goal. A couple of suggestions,
Try to remember that CSS is hierarchical - Parent > child > ...
So, what this means is that "children" depend on the Adults (parents). In your case, I would attempt to
insert your additional code in an area after all the left menu properties in the stylesheet (not the page itself).
Another possibility might be to add it after the additions of all the other stylesheets in your section.
It will take some continued experimentation. But in your case, as it's a small addition, it shouldn't turn out
to be too big of task.
You also might Google with a query such as: CSS:IE positioning
There is a tremendous amount of information available in this regard, and many ppl willing to show off their
accomplishmants in this area. Which amounts to alot of free code for you.
HTH, and best wishes.
Ahhh, IE6.
This one is a real bugger. It's worse than the older versions of Opera.Truly, this will be a never ending saga - getting your content to look identical in all browsers is "The Holy Grail"
as it were. You'll spend tremendous amounts of time attempting to achive this goal. A couple of suggestions,
Try to remember that CSS is hierarchical - Parent > child > ...
So, what this means is that "children" depend on the Adults (parents). In your case, I would attempt to
insert your additional code in an area after all the left menu properties in the stylesheet (not the page itself).
Another possibility might be to add it after the additions of all the other stylesheets in your section.
It will take some continued experimentation. But in your case, as it's a small addition, it shouldn't turn out
to be too big of task.
You also might Google with a query such as: CSS:IE positioning
There is a tremendous amount of information available in this regard, and many ppl willing to show off their
accomplishmants in this area. Which amounts to alot of free code for you.
HTH, and best wishes.
-
aidank
Re: Form Builder & IE look and feel issue
Hi,
After some further testing I think I have established what the issue is. 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 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. Any ideas?
Tks
Aidan
After some further testing I think I have established what the issue is. 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 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. Any ideas?
Tks
Aidan
-
aidank
Re: Form Builder & IE look and feel issue
Hi Guys,
Just an update on this issue, I 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:
.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;}
I have tried changing the padding but cannot get rid of the padding around the top of the form in IE 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
Just an update on this issue, I 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:
.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;}
I have tried changing the padding but cannot get rid of the padding around the top of the form in IE 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
