internet explorer - Background - IE issue (working with every other browser) -
i have following page working on every browser ie. issue on ie messed background on second maincontent/letcol div. idea why doesn't fit rest of page?
many thanks!
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <style type="text/css"> p, h1, h2 { margin:0; padding:0 } body { width:960px; margin:auto; font-family:arial, helvetica, sans-serif; font-size:12px; background:#ccc; color:#666; margin-bottom: 30px; } a, a:visited { text-decoration:none; font-weight:bold; color:#ff8000; font-weight:bold } a:hover { text-decoration:underline } #maincontent, #intro { clear:left; padding-top:20px; background-color:#ffffff; padding:20px; display:block } #leftcol { float:left; width:360px; padding-right:20px; background-color:#ffffff } #rightcol { float:left; width:540px; background-color:inherit } #strap { padding-bottom:46px; } .lines { float:left; padding-right:20px; margin-right:20px; border-right:1px #ccc solid } h1 { margin-bottom:0; font-size: 25px; } .lines h2 { color:#999; font-size:20px; font-weight:normal; margin-top:0; margin-bottom:0; padding-top:0; text-align:left } .lines h3 { color: #999; font-size:11px; margin-top:0; font-weight:normal } p { margin-top:0; padding-top:0; margin-bottom:10px; } p, li { line-height:17px; } .quotearea { float:right; width:375px; } .quote { color:#ff8000; font-style:italic; padding:10px; text-align:right; padding-left: 80px; } .infographic { background:#ff8000; text-align:center; padding:20px 10px 30px 10px; } h2 { text-align:center; color:#fff; text-transform:uppercase; font-size:17px; } .calltoaction { background:#ff8000; padding:10px; margin-top:20px; color:#fff; clear:both; } .calltoaction ul, .calltoaction li{ list-style:none; margin:0; padding:0} .calltoaction li { float:left; font-size:14px;padding:10px 15px 10px 0; } .logos { clear:left; float:right;margin:20px; display:block } .calltoaction a, .calltoaction a:visited{ color:#fff } .whatwecando { clear:left; float:left; background-color:#e7e7e7; padding:10px; width:340px; } .whatwecando ul { padding-left:17px; margin-left:0px } .whatwecando li { margin-left:0; list-style:url('page%20build/dotorange.png') outside; } </style> <title>title</title> </head> <body> <div id="intro"> <h1>header</h1> <div id="strap"> <div class="lines"> <h2>header2</h2> <h3>header3</h3> </div> <div class="lines"> <h2>header2</h2> <h3>header3</h3> </div> <div class="lines"> <h2>header2</h2> <h3>header3</h3> </div> </div> </div> <div id="maincontent"> <div id="leftcol"> <p><strong>texttexttexttexttexttexttexttexttexttexttexttexttexttexttext</strong></p> <p><strong>texttexttexttexttexttexttexttexttexttexttexttexttext</strong></p> <p><strong>texttexttexttexttexttexttexttexttext</strong></p> <p>texttexttexttexttexttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttext</p> </div> <div id="rightcol"> <div class="infographic"> <h2>header2</h2> <img src="test.png" width="515" height="485" alt="ialt" /> </div> </div> <div class="whatwecando"> <h2>header2</h2> <ul> <li>texttexttexttexttexttexttext</li> <li>texttexttexttexttext</li> <li>texttexttexttexttexttext</li> <li>texttexttexttexttexttext</li> <li>texttexttexttexttexttexttext</li> <li>texttexttexttexttexttext</li> </ul> </div> <div class="quotearea"> <div class="quote"> <p>" texttexttexttexttexttexttexttext "<br /> <span style="color:#666; font-style:normal">author</span></p> </div> <div class="quote"> <p>" texttexttexttexttexttexttexttexttexttext "<br /> <span style="color:#666; font-style:normal">author2</span></p> </div> <div class="quote"> <p>"texttexttexttexttexttexttexttexttexttexttext "<br /> <span style="color:#666; font-style:normal">auhtor3</span></p> </div><br clear="all"/> <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/> </div> <br clear="all"/> <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/> <div class="calltoaction"> <h2 style="text-align:left">header2</h2> <ul> <li><img src="image.png" width="16" height="16" alt="valt" align="left" /> <a href="http://www.url.co.uk</a></li> <li><img src="page .png" width="16" height="16" alt="email us" align="left" /> <a href="mailto:mailto.com</a></li> <li style="width:150px"><img src="page img.png" width="16" height="16" alt="phone us" align="left" /> 0207 393 7330</li> </ul> <br clear="all"/> <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/> </div> <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/> <div class="logos"><a href="http://www.logo.com"><img src="paglogo.png" alt="altt" width="173" height="56" border="0" /></a></div> <br clear="all"/> <img src="build.gif" width="1" height="1" alt="spacer" style="clear:left"/></div> </body> </html>
i think need check html list items near end of html markup have couple closing tags missed.
also, attributes in code outdated , not semantic such <br clear="all"/>, can set of these formatting via css you're using already.
Comments
Post a Comment