IE7 Problem - sections of my order form are disappearing / invisible. How can I fix?

Posted on 2009-04-27
Last Modified: 2013-11-19
If you view this order form page in IE7, .. and then view it in Firefox, . you'll notice that many sections of my form are for some reason either disappearing or are completely invisible in IE7.

Why is this happening, and how can I fix it?

Here is a link to my CSS stylesheet:

Thanks in advance,
- Yvan

Question by:egoselfaxis
    LVL 3

    Expert Comment

    When i am opening the page in Chrome/firefow/IE7 they are all identical.
    does your local IE have security settings up (or higher) or maybe enforced by your company?
    can you lower them in options or maybe try an IE version from home (if you are not now)?
    LVL 5

    Expert Comment

    We need to identify if the problem is being caused by the CSS or the javascript. You can see the issue happen if you scroll to the bottom of the page and then back up, then the text should reappear. Now if you roll your mouse over one of your images like "our books" on the top, the text dissapears again. Since your rollover is controlled by a CSS opacity change, not javascript, I would say our first step should be to make sure we have no CSS errors - so lets fix these first:

    .thumbnail img {

    its missing the semicolon for vertical-align;

    also cursor: hand; is not a valid css property. It should be cursor: pointer; everywhere that it occurs in your css file.

    correct those and then post the new file and we'll take it from there.

    Author Comment

    Nope, that wasn't it.

    I remember having been told once that this might sometimes be caused by weird IE-specific "float" bugs.  Perhaps that might serve as a useful clue?

    - Yvan
    LVL 3

    Expert Comment

    From here:
    Simply placing {display: inline;} on the float is all that is needed! Yup. Sounds too easy, don't it? Nevertheless it's true that a mere display declaration of "inline" is enough to do the job.
    Those who are familiar with the specs on floats are aware that floats automatically become "block" elements, no matter what they were before becoming floats. As Steve points out from the W3C: 9.5.1 Positioning the float: the 'float' property

    "This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

    The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

    Same as 'left', but content flows on the left side of the box, starting at the top.

    The box is not floated. "
    That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float's margin. Thus, this fix can be applied straight, without any fussy hiding methods.
    In fact, you could just apply the Inline Fix to all floats if you like, since there are no known side-effects. That way the bug can never gain traction regardless of any margins you might or might not use. Of course if you do this, the bug can't happen and you get no chance to play the big CSS guru to your boss...  

    Author Comment

    Hmm, .. I've done as you've suggested, but I'm still having the same problem.
    LVL 42

    Accepted Solution

    Try giving min-height:1px to "form div".

    Author Comment

    >> Try giving min-height:1px to "form div".

    Nice!  That seemed to do the trick!  Thanks!

    - Yvan
    LVL 42

    Expert Comment

    by:David S.
    You're welcome.

    This explains why that helped:

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Suggested Solutions

    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now