CSS issue in IE7
I have simple web page and that banner contains three images. I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
.middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
#right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); 开发者_JAVA技巧background-repeat:no-repeat;margin:0px; padding:0px; }
</style>
</head>
<body style="margin:0px; padding:0px;">
<form id="form1" runat="server">
<div id="container" class="middle" style="float:left;">
<div id="left"></div>
<div id="middle" class="middle"></div>
<div id="right"></div>
<div id="content" style="clear:both; float:left;"></div>
</div>
</form>
</body>
</html>
any idea?
thanks in advance!
Try to set width value in .middle in percents.
Using your example and assuming you want any content under the banner this is one way you can do it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner{
background:url('image/banner_middle.jpg') ;
background-repeat:repeat-x;
}
#left{
width:338px;
height:103px;
float:left;
background-image:url('image/banner_left.jpg');
background-repeat:no-repeat;
}
#right{
width:620px;
height:103px;
float:right;
background-image:url('image/banner_right.jpg');
background-repeat:no-repeat;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="left"></div>
<div id="right"></div>
<div class="clearFloat"></div>
</div>
<div id="content">
Any content goes here
</div>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论