IE7 hasLayout / disappearing content

[wallywheels]

I think I'm having a hasLayout issue here. I have external pages being assembled and rendered by Ruby but the only browser these bugs crop up in is IE7, so it seems browser scripting (css) related.

The page loads entirely, then all but the #menu and #logo blocks vanish, but they'll reappear if you hit the 'alt' key.

In one of my malfunctioning pages, here is the CSS:

body {
text-align: center;
min-width: 760px;
background: #000;
width: 100%;
}

div#wrapper {
margin: 0 auto;
margin-top: 100px;
border: 1px solid #ffffff;
width: 760px;
background: #5c1c2d url('[[image:runner]]');
background-position: bottom right;
background-repeat: no-repeat;
display: table;
height: 100%;
}

html>body div#wrapper {
min-height: 600px;
height: 100%;
width: 760px;
}

div#logo {
float: left;
height: 410px;
position: relative;
top: -10px;
margin: -1px auto -10px auto;
width: 150px;
border-top: 1px solid #fff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #6f1727 url('[[image:logo]]');
background-position: center;
background-repeat: no-repeat;
}

html>body div#logo {
height: 100%;
min-height: 394px;
}

div#footer {
width: 760px;
clear: both;
margin: 0 auto;
font-family: trebuchet ms,arial,verdana;
font-size: 8pt;
font-weight: normal;
color: #ffffff;
letter-spacing: 1.1pt;
padding-top: 20px;
text-align: right;
}

div#footer A {
color: #ffffff;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
}

div#footer a:hover {
text-decoration: underline;
}

div#content {
text-align: left;
padding: 15px 70px 15px 0;
float: right;
width: 460px;
height: 100%;
font-family: trebuchet ms,arial,verdana;
font-size: 9pt;
font-weight: normal;
color: #ffffff;
}

html>body div#content {
min-height: 500px;
}

div#topbar {
height: 75px;
font-family: trebuchet ms,arial,verdana;
font-size: 8pt;
font-weight: normal;
text-align: left;
padding-left: 25px;
padding-top: 10px;
color: #ffffff;
letter-spacing: 1.1pt;
border-bottom: 1px solid #ffffff;
clear: left;
}

div#menu {
float: right;
width: 760px;
}

div#menu A {
display: block;
width: 125px;
position: relative;
left:0px;
top: -10px;
z-index: 50;
float: left;
border: 1px solid #ffffff;
border-left:0;
height: 25px;
background: #a0171f url('[[image:arrow]]');
background-position: center left;
background-repeat: no-repeat;
font-family: trebuchet ms,arial,verdana;
text-align: right;
font-size: 14px;
text-decoration: none;
padding-right: 10px;
padding-top: 3px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
}

div#content a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}

div#content a:hover {
text-decoration: underline;
}

div#menu a:hover {
background: #5c1c2d url('[[image:arrow]]');
background-position: center left;
background-repeat: no-repeat;
color: #bbc6b6;
}

h2 {
color: #ffffff;
font-size: 14px;
font-weight: bold;
}

b {
color: #ffffff;
font-weight: bold;
}

h1 {
color: #bbc6b6;
font-weight: bold;
font-size: 15px;
}

div#content .pod-body a, div#content .pod-body b { color: #000; }

[Fang]

We need to see the accompanying html or a link preferably.

[wallywheels]

https://www.orgsync.com/:txstatedeltas

and

https://www.orgsync.com/:asme

[WebJoel]

div#wrapper {
margin: 0 auto;
margin-top: 100px;
border: 1px solid #ffffff;
width: 760px;
background: #5c1c2d url('[[image:runner]]');
background-position: bottom right;
background-repeat: no-repeat;
display: table;
height: 100%;
}

I don't understand this. -It's probably fine and does what it's suposed to. I'd like to understand what this is, -why it works.

Also, -have you looked at your page in Firefox? I am seeing something strange happening there with the #menu (which seems to be where your complaint lies)..

I don't have/use IE7, but trust Firefox's interpretation of this as being correct (trust it more than IE6's view)..

[wallywheels]

These pages are assembled and rendered by Ruby, and tags in double brackets like that are used to identify files uploaded internally by our users. Sorry for the confusion.

The menu works fine but pull it up in IE7 if you get a chance and you can't miss the bug.

[WebJoel]

I'll check the code again.
back:

I don't suppose that there's any chance that this:

div#menu A {
display: block;
width: 125px;
position: relative;
left:0px;
top: -10px;
z-index: 50;
float: left;
border: 1px solid #ffffff;
border-left:0;
height: 25px;
background: #a0171f url('[[image:arrow]]');
background-position: center left;
background-repeat: no-repeat;
font-family: "trebuchet ms",arial,verdana;
text-align: right;
font-size: 14px;
text-decoration: none;
padding-right: 10px;
padding-top: 3px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
}

has anything to di with it? This should be lowercase anyway... and " " to multi-word font-names (still checking things..)

back:

okay, -I just booked a 16-browser check on browsershots... should have a picture back shortly...