CSS Forum

**seannarae** · 07-10-2009, 05:41 PM

SET UP
I have a page that will display 1 or more accounts on file for user
Each acct consists of a wrapper containing name of account [H3] followed by heading/data pairs.
Where user has >1 acct, i'm displaying >1 wrapper

ISSUE
The 1st wrapper of acct info displays fine
But on the 2nd (or last if >2), the H3 tag containing the acct name will not render on page load in IE6/IE7.

FUNKINESS
If i do anything that causes a redraw (?) of the browser window, such as ALT-TAB away & back, or resize the window... the H3 element displays.
Refresh the page, the H3 tag disappears again.

I've tried P as well as other H tags, and each exhibit the same issue.
I've no issue using a DIV instead of what seems a more semantic H3 or P tag.
But the wonkiness of the issue makes me want to seek resolution

CODE

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--

body { font-size:12px; font-family:Arial, Helvetica, sans-serif; }
.contwrap { height:1px; width:530px; margin:5px 10px 0px 10px; clear: both;}
.dispwrap { padding:0px 0px 10px 0px; background-color:#fcfcec; border:1px solid #CCCCCC; border-left:0px; border-right:0px; clear:both; }
.dispwrap p { margin:0px; padding:2px 0px 2px 10px; font-size:13px; color:#245098; background-color:#f4f7fc; }
.dispwrap .head { width:160px; margin:10px 10px 0px 0px; font-weight:bold; text-align:right; float:left; display:inline; }
.dispwrap .data { width:250px; margin:10px 0px 0px 0px; text-transform:uppercase; float:left; }
.clearboth {margin: 0;clear: both;}

-->
</style>
</head>

<body>

<div class="contwrap">

    <div class="dispwrap">
        <p>ACCOUNT ONE</p>
        <div class="head">Name on Acct:</div><div class="data">First Last</div>
        <div class="head">Address:</div><div class="data">123 Fake Street<br />San Francisco, CA 94111-1234</div>
        <div class="head">Primary Phone:</div><div class="data">(415) 555-1212</div>
        <div class="head">Primary E-Mail Address:</div><div class="data">username@domain.com</div>
        <div class="clearboth"></div>
    </div>

<br>

    <div class="dispwrap">
        <p>ACCOUNT TWO</p>
        <div class="head">Name on Acct:</div><div class="data">First Last</div>
        <div class="head">Address:</div><div class="data">123 Fake Street<br />San Francisco, CA 94111-1234</div>
        <div class="head">Primary Phone:</div><div class="data">(415) 555-1212</div>
        <div class="head">Primary E-Mail Address:</div><div class="data">username@domain.com</div>
        <div class="clearboth"></div>
    </div>

<br>

    <div class="dispwrap">
        <p>ACCOUNT THREE</p>
        <div class="head">Name on Acct:</div><div class="data">First Last</div>
        <div class="head">Address:</div><div class="data">123 Fake Street<br />San Francisco, CA 94111-1234</div>
        <div class="head">Primary Phone:</div><div class="data">(415) 555-1212</div>
        <div class="head">Primary E-Mail Address:</div><div class="data">username@domain.com</div>
        <div class="clearboth"></div>
    </div>

</div>

</body>
</html>

**seannarae** · 07-10-2009, 05:58 PM

UPDATE
Tried re-writing the code using a DIV container instead of H3 pr P, and the issue persists. Now at a loss for how else to encapsulate the account name if i cannot upe P, H or DIV...

**LadynRed** · 09:34 PM

Are you pulling the info out of a database for this ?
I really wouldn't use all those divs though, I think I'd just use a list for that kind of thing.

What you're seeing with that 'now you see it now you don't' thing is called the peek-a-boo bug, and I thought it was fixed in IE7.
http://www.positioniseverything.net/.../peekaboo.html