html - styling problems with IE -
i new so. basic stuff...i have problem ie, not render web page chrome , ff does. 3 boxes, boxleft, boxcenter , boxright odes not appear in line. last one, box out seems drops down beneath boxcenter. try find answer no luck. here html , css. kind of welcome. thanks.
<!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="mainstyle.css" /> <!--[if ie 6]> <link href="default_ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="header" class="container"> <div id="logo"> <img src="layout/img.png" width="415" height="90" alt="img" /> </div> <!--end logo--> <div id="mainmenu"> <ul> <li><a href="#">item 4</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 1</a></li> <ul> </div> <!--end main menu--> </div> <!--end header--> <div id="mainmiddle" class="container"></div> <!--end main-middle section--> <div id="bottomsection" class="container"> <div id="bottomsectionname"> <p>products:</p> </div> <!-- end bottom section name--> <div id="boxholder"> <div id="boxleft"> <div class="label"> <p> <a href="#">text <a> </p> </div> <!--end label--> <img src="layout/products.jpg" width="312" height="157" alt="" /> </div> <!--end box left--> <div id="boxright"> <div class="label"> <p><a href="#">exclusive</a></p> </div><!--end label--> <img src="layout/products.jpg" width="312" height="157" alt="" /> </div><!--end box right--> <div id="boxcenter"> <div class="label"> <p><a href="#">frost</a></p> </div> <!--end label--> <img src="layout/products.jpg" width="312" height="157" alt="" /> </div> <!--end box center--> </div> <!--end box holder--> </div> <!-- end bottom section--> <div id="info" class="container"> <div id="infoboxleft" class="infotext"></div> <!-- end info box left--> <div id="infoboxright" class="infotext"> <p>info:<br />address: </p> </div> <!-- end info box right--> </div> <!--end info section--> <div id="footer"> <p>copyright: </p> </div> <!--end footer--> </body> </html> css
html, body { height: 100%; } body { margin: 0; padding: 0; } .container { margin: 0 auto; width: 960px; } #header { background-color: #ffffff; height: 180px; overflow: hidden; } #logo { height: 100px; margin: 0px, 0px, 0px, 0px; } #logo img { padding-top: 10px; } #mainmenu { height: 24px; margin-top: 60px; } #mainmenu ul { list-style: none; } #mainmenu ul li { display: inline; float: right; font-family: verdana; font-size: 1.125em; margin-top: -2px; padding-left: 10px; text-transform: uppercase; } #mainmenu ul li { color: #c93159; text-decoration: none; } #mainmenu ul li a:hover { text-decoration: none; } #mainmiddle { background: url(layout/norway.jpg) no-repeat; height: 400px; } #bottomsection { height: 185px; margin-top: 0px; padding-top: 0px; } #bottomsectionname { height: 28px; overflow: hidden; } #bottomsectionname p { color: 000000; float: right; font-family: verdana; font-size: 1.125em; margin-top: 3px; } #boxholder { height: 157px; } .label { background-color: #c93159; height: 24px; margin-left: 104px; margin-top: 109px; position: absolute; width: 208px; z-index: 10; } .label p { color: #ffffff; float: right; font-family: verdana; font-size: 1.125em; margin-right: 7px; margin-top: 0px; } .label p { color: #ffffff; text-decoration: none; text-transform: lowercase; } #boxleft { float: left; height: 157px; width: 312px; } #boxcenter { height: 157px; margin-left: 324px; width: 312px; } #boxright { float: right; height: 157px; width: 312px; } .infotext { font-family: verdana; font-size: 0.667em; } #info { height: 150px; margin: 0px, 0px,0px,0px; overflow: hidden; } #infoboxleft { float: left; height: 150px; width: 480px; } #infoboxright { float: right; height: 150px; width: 480px; } #infoboxright p { float: right; margin-right: 5px; margin-top: 110px; text-align: right; } #footer { overflow: hidden; padding: 0px 0px 10px 0px; } #footer p { font-family: verdana; font-size: 0.667em; text-align: center; }
your going have write ie specific css. suggestion using conditional comments this:
<!--[if ie]> .container { margin: 0 auto; width: 960px; } #header { background-color: #ffffff; height: 180px; overflow: hidden; } <![endif]--> <!--[if ie 6]> page's css goes here <![endif]--> <!--[if gte ie 8]> page's css goes here <![endif]--> <!--[if lt ie 9]> page's css goes here <![endif]--> you can use these types of if statements set css specific versions of ie. you'll have adjust values in each 1 , test in ie how want it. not affect how appears in other browsers. don't have put of page's css inside these comments, isn't displaying correctly in ie.
Comments
Post a Comment