[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2009-04-27
Medium Priority
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
  • 3
  • 2
  • 2
  • +1

Expert Comment

ID: 24243673
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)?

Expert Comment

ID: 24243951
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

ID: 24244384
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


Expert Comment

ID: 24244569
From here: http://www.positioniseverything.net/explorer/doubled-margin.html
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

ID: 24244707
Hmm, .. I've done as you've suggested, but I'm still having the same problem.

LVL 43

Accepted Solution

David S. earned 2000 total points
ID: 24245772
Try giving min-height:1px to "form div".

Author Comment

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

Nice!  That seemed to do the trick!  Thanks!

- Yvan
LVL 43

Expert Comment

by:David S.
ID: 24246601
You're welcome.

This explains why that helped: http://reference.sitepoint.com/css/haslayout

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

872 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