More IE and FF issues!

[ackerley1]

I am implementing a KB program into a site and I am having some difficulty with formating the templates of the program to fit within the boundaries of my site. the program si KBPublisher (KBPublisher - Knowledge Base Software) and I have implemented it here: ASI Interiors - Knowledgebase & FAQ's

Now in FireFox it works quite well. The only issue there is the form field text box overflows the page boundaries (but I haven't really focused on fixing that yet).

In IE7, however, the content of the KB pushes the boundaries of the page out on the right side. I have tried my best to find where the style or table that holds the content is so I can adjust it, but I can't seem to find it. In IE7 it also does not allow my CSS drop down navigation menu to function correctly.

I am at a loss and would like any help or insight available.

thanks

[simonlogan]

Looks like you've sorted this issue unless I'm looking at the wrong thing?

[ackerley1]

No, unfortunately the issue has not been resolved.

Any insight into how to resolve this would be greatly appreciated.

check: ASI Interiors - Knowledgebase & FAQ's in both IE7 and FF.

FF is good, but IE7 is not. and the CSS drop down menu does not work.

[simonlogan]

The question is whether the drop-down menu is known to be cross-browser compatible. If it was one that came with your KB program then check with them whether it should work in IE7 or not - it's possible that the script isn't actually compatible.

Otherwise, regarding the form field text box overflowing, it seems okay to me in both FF2 and IE7 so could you maybe be more specific about the problem and maybe include a screenshot? What resolution are you running?

[ackerley1]

If you go to the main, active site, ASI Interiors - Basement Development, Bathroom Renovations, Hardwood Floor and Installation, you will see that in all browsers the CSS dropdown menu works as it should. When you go to the KB, you can see that it doesn't work in IE7 (I cannot test other versions since Vista doesn't allow MultipleIE to run - yet). But the menu works fine in FF.

As for the overflow, if you look at it in IE7 you will see the Wrapper box (defined by the black border) is shifted over on the right side. It should only be as large as the header image but instead there is a a 1/2" gap there and also at the bottom where the footer is. This is being pushed out due to the middle portion of the KB program (I am assuming?). So maybe "overflowing" is not the best way to describe it. Maybe better to say pushing the bounding box (Wrapper DIV) out.

Won't let me post a screen shot. but let me know if you are seeing the same "gap" on the right side of the header and footer.

Thanks

[simonlogan]

It doesn't look like you have defined widths for the various content areas of the page (ie the content and masthead DIVs) so they will enlarge to fit their contents. FF and IE display text differently and the text in IE is noticeably larger than that in FF so it's knocking that content area along to the right and since your graphics for the header and footer are of a fixed width it's meaning a gap opens up. Basically you've not told it to only be, say, 780px wide, so it's just being as wide as it needs to be.

So first off I'd set defined widths for each content area, also strictly define the font sizes and use style sheet for emboldening text etc rather than the bold tags you have just now. Then just to cover yourself I'd try and get the background images for the header and footer repeatable so that if the DIVs are enlarged it will just repeat to fill the gap that is opened up - but you're better off to just fix the width of all the DIVs so you know exactly what size they'll be and make sure the bg images are at least this big.

Hope that helps.