• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

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

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.  

https://www.impactbooks.com/order.cfm?ID=4727

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

Here is a link to my CSS stylesheet:

https://www.impactbooks.com/css/style.css

Thanks in advance,
- Yvan

0
egoselfaxis
Asked:
egoselfaxis
  • 3
  • 2
  • 2
  • +1
1 Solution
 
zemp1212Commented:
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)?
0
 
blacksixCommented:
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 {
      width:100%;
      margin:0px;
      border:0px;
      padding:0px;
      vertical-align:middle:
      
}


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.
0
 
egoselfaxisAuthor Commented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
zemp1212Commented:
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:

left
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'.

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

none
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...  
0
 
egoselfaxisAuthor Commented:
Hmm, .. I've done as you've suggested, but I'm still having the same problem.

https://www.impactbooks.com/order.cfm?ID=4739
0
 
David S.Commented:
Try giving min-height:1px to "form div".
0
 
egoselfaxisAuthor Commented:
>> Try giving min-height:1px to "form div".

Nice!  That seemed to do the trick!  Thanks!

- Yvan
0
 
David S.Commented:
You're welcome.

This explains why that helped: http://reference.sitepoint.com/css/haslayout
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now