IE7 compatibility error with div container with 4 divs inside
Basically this is my issue, I have a container with 4 divs inside, in firefox it works just fine and also in IE8 but ..it shows the compatibility view all the time, if I click on it, it moves the 4 divs out of the container, making the site looks terrible. btw, the 4 divs are just behind the menu but on another "content" div. (I need it that way...)
This is my code.
<style type="text/css">
body{
margin-top:2px;
}
#main_frame{
width:1024px;
height:550px;
position:relative;
margin:0 auto;
padding:0px;
float:center;
text-align:center;
background:black;
}
#logo{
width:275px;
height:75px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
position:relative;
margin:0 auto;
padding:0px;
float:left;
}
#top_center{
width:474px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:green;
float:left;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#top_right{
width:275px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:red;
float:left;
}
#main_menu{
width:1024px;
height:25px;
float:none;
position:relative;
float:left;
margin:0 auto;
padding:0px;
background-color: #FF0;
}
#content_frame{
height:400px;
width:1024px;
position:relative;
float:left;
margin:0 auto;
padding:0px;
}
/* HERE THEY ARE */
#tag1{
height:375px;
width:256px;
position: absolute;
float:left;
margin:0 auto;
padding:0px;
background-color:#900;
}
#tag2{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:256px;
padding:0px;
background-color: #930;
}
#tag3{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:512px;
padding:0px;
background-color: #960;
}
#tag4{
height:375px;
width:256px;
display: inherit;
position:absolute;
float:left;
margin-left:768px;
padding:0px;
background-color:#990;
}
</style>
... some code removed...
<body>
<div id="main_frame">
<div id="ta开发者_开发百科g1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
Any help on this is greatly appreciated.
Thanks guys,
Marco,
A link to a live page is almost required to tell you how to definitively fix this.
At the moment, it's too much work to try and recreate the problem (too many unknown variables).
Does your page have a doctype?
When I see this:
but ..it shows the compatibility view all the time
It suggests that your page is being coerced into IE7 mode.
The usual cause is having this line in your page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The probable correct thing to do is remove this line, and fix your site to work in IE8.
Another thing you didn't specify is how well this works in other browsers such as Firefox, Chrome - and whether you care about this.
If this answer doesn't help you enough, post a link to your live page.
To fix your problem, follow these steps:
Move
<div id="tag1"></div>,<div id="tag2"></div>,<div id="tag3"></div>,<div id="tag4"></div>to inside<div id="content_frame"></div>, like this:<div id="main_frame"> <div id="logo"></div> <div id="top_center"></div> <div id="top_right"></div> <div id="main_menu"></div> <div id="content_frame"> <div id="tag1"></div> <div id="tag2"></div> <div id="tag3"></div> <div id="tag4"></div> </div> </div>Then, from those four tag
divs, remove themarginandposition: absoluterules.
I've tested that this fixes it to work in IE7, IE8, Firefox.
As an aside, after my fix I don't think any of your elements requires the position: relative rule any longer.
加载中,请稍侯......
精彩评论