CSS problem - ie6 v ie7 different display

jslims

unread,

Feb 20, 2007, 1:35:19 PM2/20/07

to Design the Web with CSS

i have 2 divs - one on top of each other.
they are both inside a container.

in ie7, they final output is fine.
in ie6 - the second div gets pushed down about 150 pixels.

here is the code...
any help is appreciated

Thank you

J.S.
---------------------------------------------------------------------------------------------

body{
margin: 0;
padding: 0;
border: 0;
/*overflow: hidden;*/
height: 100%;
max-height: 100%;
width:775px;
}

#container {
width: 775px;
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre etc */
position:relative;
}

#topheader
{
/*border: #000 1px solid;*/
background-color: #ffffff;
background-image:url(error-page-bg.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
background-position:top left;
width:100%;
position: fixed;
height:155px;
float:left;
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
z-index: -10;
}

.websitetitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.5em;
color:#ccc;
font-weight:bold;
margin: 35px;
line-height:20px;
}

.errormsg
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.9em;
line-height:12px;
position: absolute;
color:#ccc;
margin-top: -20px;
margin-left: 40px;
margin-bottom:40px;
padding: 5px;
}

#iframecontent
{
width:auto;
w/idth : auto;
position: fixed;
height: 100%;
/*padding:0px;*/
/*padding-top:155px;*/
margin-left: auto;
margin-top:155px;
margin-right: auto;
z-index: -10;
}

/*------------------------------ hacks---------------------------- */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.floatbox {
float: left;
width: 35%;
background: #773;
border: 3px solid #f55;
color: #ffd;
}

.floatbox p {margin: 0;}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */

Chad Cross - Juxtaflo Web Studio

unread,

Feb 20, 2007, 1:39:32 PM2/20/07

to css-d...@googlegroups.com

How about the html and a link to what it looks like?

jslims

unread,

Feb 20, 2007, 3:49:30 PM2/20/07

to Design the Web with CSS

here is the 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=iso-8859-1" />
<title>Error Page</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
/*overflow: hidden;*/
height: 100%;
max-height: 100%;
width:775px;
}

#container {
/* width: 775px; */

/*------------------------------ hacks---------------------------- */

.clearfix {display: inline-block;}

.floatbox p {margin: 0;}

.clearfix {
display: inline-block;
}

</style>
</head>

<div id="topheader">

<div class="websitetitle">http://www.website.com/
thisiscrap.asp</div>
<div class="errormsg">You have encountered the following error
while browsing: NOT FOUND</div>

</div>

</div>

<div id="iframecontent">
<iframe width="100%" height="800" scrolling=no frameborder=0
src="http://www.designwurld.com"> </iframe>
</div>

</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

On Feb 20, 1:39 pm, "Chad Cross - Juxtaflo Web Studio"

<c...@juxtaflo.com> wrote:
> How about the html and a link to what it looks like?
>
>
>
> -----Original Message-----
> From: css-d...@googlegroups.com [mailto:css-d...@googlegroups.com] On
>
> Behalf Of jslims
> Sent: Tuesday, February 20, 2007 10:35 AM
> To: Design the Web with CSS
> Subject: [Design with CSS 720] CSS problem - ie6 v ie7 different display
>
> i have 2 divs - one on top of each other.
> they are both inside a container.
>
> in ie7, they final output is fine.
> in ie6 - the second div gets pushed down about 150 pixels.
>
> here is the code...
> any help is appreciated
>
> Thank you
>
> J.S.