All geek questions in one place

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 does not work in IE7, but it works great for other browsers (chrome, firefox).

Can anyone help?

+3
source share
4 answers

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

Live Demo ( edit )

+2
source

I don't have IE7 for testing, but your problem is probably in use display: inline-block. IE7 has some display issues using inline-block. This may help you:

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

+1
source

display: inline ( .wrapper). zoom: 1 .wrapper.

+1

page_header_billboard -376px ( _header_billboard).

IE6, IE7 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>
0
source

Source: https://habr.com/ru/post/1789305/

More articles:


All Articles