CODEWITHSUNDEEP
csslayoutinternet-explorer-7
greener
greener

Reputation: 5069

IE7 CSS issue with overlapping divs

I have this page: http://jsfiddle.net/aJNAw/1/

<!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">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    display:inline-block;
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>
    <div class="page_header_billboard"></div>

</div>



</body>
</html>

and the layout doesn't work in IE7 but it's fine in other browsers (chrome, firefox).

Would anyone be able to help?

Upvotes: 3

Views: 6711

Answers (4)

D.N.
D.N.

Reputation: 2170

Put the page_header_billboard at the top, and set the margin-top of homebox to -376px (the height of the page_header_billboard).

This works in IE6, IE7, and FF3.6.

<!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">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    margin-top: -376px;
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="page_header_billboard"></div>
    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>

</div>



</body>
</html>

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

Move <div class="homebox"> inside <div class="page_header_billboard">.

Live Demo (edit)

Upvotes: 2

Chris
Chris

Reputation: 3795

Add display: inline to your floats (children of .wrapper). Force layout on the container via applying zoom: 1 to .wrapper.

Upvotes: 2

Wes P
Wes P

Reputation: 9870

I don't have an IE7 to test on, but your problem is likely the use of display: inline-block IE7 has some display problems using inline-block. This might help you:

http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/

Upvotes: 1

Related Questions