Menu
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>
<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:
And this in ie7:
My two questions are:
<span> tags in the #titlebar div not display side by side in ie7 like they do in ie9?
974
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
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
