HTML layout problem in IE7
I have some html:
<body>
<h1 id="header"></h1>
<div id="container">
<div id="left">
</div>
<div id="content">
<div id="titlebar">
<span id="date">Novermber 13, 3414</span>
<span id="title"> The importance of being earnest.</span>
<span id="author">HG Wellwhocares</span>
</div>
&开发者_JAVA技巧lt;iframe id="memo" />
<div id="attachments"></div>
<p id="description"></p>
<div id="action">
<div id="accept">Accept</div>
<div id="revise">Revise</div>
</div>
</div>
</div>
</body>
And some css:
#container{
width: 85%;
margin: 0 auto;
background: gray;
}
#left{
float: left;
width: 20%;
padding: 1%;
}
#left:after{
clear: both;
}
#content{
margin-left: 22%;
background: silver;
padding: 3em;
}
#titlebar{
text-align: center;
}
#date{
float: left;
}
#title{
clear: both;
}
#author{
float: right;
}
#memo{
width: 100%;
min-height: 500px;
}
There is also this jQuery:
months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$(document).ready(function(){
items = new Array();
$.getJSON('_vti_bin/listdata.svc/BOTMemos?$orderby=MeetingDate', function(data){
date = "";
$.each(data.d.results, function(index, value){
if(value.MeetingDate!=null){
if(value.MeetingDate!=date){
if(date!=""){
$('#left').append('<hr />');
}
item = new Array(value.MeetingDate, value.Title0, value.Checkers);
date = value.MeetingDate;
month = months[parseInt(date.substring(5,7), 10)-1];
formattedDate = month + " " + date.substring(8,10) + ", " + date.substring(0, 4);
$('#left').append('<h1>'+formattedDate+'</h1>');
}
$('#left').append('<h2 class="memo">'+value.Title0+'</h2>');
}
});
});
});
Which result in two different layouts, this in ie9:
- Why does the text not show up on the left hand side in ie7?
- Why do the three
<span>tags in the#titlebardiv not display side by side in ie7 like they do in ie9?
Use float:left for date, author and title span like this
#titlebar span {
float:left;
}
and for text justification use this code also add width:
#date {
text-align: left;
width: 33%;
}
#title{
text-align: center;
width: 34%;
}
#author{
text-align: right;
width: 33%;
}
See the Demo in IE7 with updated link: http://jsfiddle.net/rathoreahsan/Jy7Sz/
EDITED:
Replace this code with the above:
#date{
float: left;
}
#title{
clear: both;
}
#author{
float: right;
}
EDITED: Answer Updated
Why do the three tags in the #titlebar div not display side by side in ie7 like they do in ie9? You need to give them a width: like
#titlebar span{ width:33%; float:left; }
You need to make a new stylesheet for ie7+ ie8 in your header. They render stuff differently and not everything is supported
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/ie-fixes.css">
<![endif]-->
1) There isn't anything displayed because you have nothing inside of your #left container.
<body>
<h1 id="header"></h1>
<div id="container">
<div id="left">
<!-- Insert content here. -->
</div>
<div id="content">
<div id="titlebar">
<span id="date">Novermber 13, 3414</span>
<span id="title"> The importance of being earnest.</span>
<span id="author">HG Wellwhocares</span>
</div>
<iframe id="memo" />
<div id="attachments"></div>
<p id="description"></p>
<div id="action">
<div id="accept">Accept</div>
<div id="revise">Revise</div>
</div>
</div>
</div>
</body>
2) All divs without explicit width take up 100% of space in width.
#container{
width: 85%;
margin: 0 auto;
background: gray;
}
#left{
float: left;
width: 20%;
padding: 1%;
}
#left:after{
clear: both;
}
#content{
margin-left: 22%;
background: silver;
padding: 3em;
}
#titlebar{
text-align: center;
}
#date {
float: left;
width: 30%;
}
#title {
float: left;
width: 40%;
}
#author {
float: right;
width: 30%;
}
#memo{
width: 100%;
min-height: 500px;
}
加载中,请稍侯......
精彩评论