Need help with IE7 disappearing content

Content disappearing in IE7

[paigehowarth]

Hi everyone, new poster here.

I'm having trouble with a site I'm redesigning. I'm new to css layouts in general, so I'm probably making a blatant newbie mistake here…

Here's the test site:
<snip>

The client wanted the red submenu to appear above the blue gradient page title, so I switched the <h1> and <div id="submenu">. Presto, It worked in every browser I have, except IE7. In IE7, all the page content disappears (everything within the #content_frame div).

Please: how can I fix this, and more importantly, what is happening?

Thanks so much- I love this forum!

Paige

[edited by: Robin_reala at 1:59 pm (utc) on Mar. 8, 2007]
[edit reason] removed specifics per TOS #13 [/edit]

[paigehowarth]

Here's a snippet of code… Hopefully the problem lies in this segment.

<div id="content_frame">
<div id="content">

<div id="submenu">
<a href="#3">Testimonials</a>
<a href="#1">iLINK</a>
<a href="#2">Press Releases</a>
<a href="#4">Trade Shows</a>
<a href="#5">White Papers</a>

<a href="#6">Articles/Reviews</a>
<a href="#7">Webcasts</a> </div>

<h1>News &amp; More</h1>

And the styles…

#content_frame {
width:757px;
background-image: url(images/inner/content-2.png);
float: left;
background-position: 1px;
position: relative;
background-repeat: repeat-y;
}

#content {
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
position: relative;
}

h1 {
width: 682px;
background-image: url(images/inner/h1_bg.jpg);
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 16px;
position: relative;
background-position: left;
padding-left: 2em;
padding-top: 5px;
clear: both;
height: 23px;
}

#submenu {
background-image: url(images/submenu_bg.jpg);
float: left;
height: 20px;
width: 682px;
padding-left: 1.5em;
position: relative;
padding-top: 4px;
}

[Robin_reala]

I can’t see anything obvious that’d cause everything to disappear from your code, but I don’t have IE7 here to test on. What happens if (for example) you put a border on #content? Is it just that IE7 is collapsing the contents, or does it show up with the right size + position but with nothing inside?

I might also try removing the position relatives. From what I can see they’re not doing anything, and although it shouldn’t make any difference IE can be funny about them sometimes.

[paigehowarth]

Thanks! You were on-target about the position: relatives. I will make a point to be more careful about these things.

The interesting thing was, it looked fine in IE5.2 for Mac! In IE7, the page stretched to fit the content, but said content was invisible.

Bizarre…

Thanks again!

-Paige