analyzethism1 Posted May 22, 2013 Share Posted May 22, 2013 Hi, I'm having troubles getting my page to display correctly in IE. It works fine in Firefox and Chrome. The weird part is that although IE display it incorrectly if I referesh the page it works fine. This doesn't make sense to me... and I've been unable to find any answers. Below is a simplified version of my code: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <!-- client header --> <h1>Compliance Calendar</h1> <div class="window"> <div id="calendar"> <div class="navbar"> <a class="button today" href="?month=5&year=2013">Today</a> <a class="button" href="?month=4&year=2013">◄</a> May 2013 <a class="button" href="?month=6&year=2013">►</a> </div> <ul class="dayHeadings"><li><div>Sunday</div></li><li><div>Monday</div></li><li><div>Tuesday</div></li><li><div>Wednesday</div></li><li><div>Thursday</div></li><li><div>Friday</div></li><li><div>Saturday</div></li> </ul> <ul class="days"><li class="other"><div class="border"><div class="number">28</div></div></li><li class="other"><div class="border"><div class="number">29</div></div></li><li class="other"><div class="border"><div class="number">30</div></div></li><li class="current"><div class="border"><div class="number ">1</div></div></li><li class="current"><div class="border"><div class="number ">2</div></div></li><li class="current"><div class="border"><div class="number ">3</div></div></li><li class="current weekend"><div class="border"><div class="number ">4</div></div></li><li class="current weekend"><div class="border"><div class="number ">5</div></div></li><li class="current"><div class="border"><div class="number ">6</div></div></li><li class="current"><div class="border"><div class="number ">7</div></div></li><li class="current"><div class="border"><div class="number ">8</div></div></li><li class="current"><div class="border"><div class="number ">9</div></div></li><li class="current"><div class="border"><div class="number ">10</div></div></li><li class="current weekend"><div class="border"><div class="number ">11</div></div></li><li class="current weekend"><div class="border"><div class="number ">12</div></div></li><li class="current"><div class="border"><div class="number ">13</div></div></li><li class="current"><div class="border"><div class="number ">14</div></div></li><li class="current"><div class="border"><div class="number ">15</div></div></li><li class="current"><div class="border"><div class="number ">16</div></div></li><li class="current"><div class="border"><div class="number ">17</div></div></li><li class="current weekend"><div class="border"><div class="number ">18</div></div></li><li class="current weekend"><div class="border"><div class="number ">19</div></div></li><li class="current"><div class="border"><div class="number ">20</div></div></li><li class="current"><div class="border"><div class="number ">21</div></div></li><li class="current"><div class="border"><div class="number today">22</div></div></li><li class="current"><div class="border"><div class="number ">23</div></div></li><li class="current"><div class="border"><div class="number ">24</div></div></li><li class="current weekend"><div class="border"><div class="number ">25</div></div></li><li class="current weekend"><div class="border"><div class="number ">26</div></div></li><li class="current"><div class="border"><div class="number ">27</div></div></li><li class="current"><div class="border"><div class="number ">28</div></div></li><li class="current"><div class="border"><div class="number ">29</div></div></li><li class="current"><div class="border"><div class="number ">30</div></div></li><li class="current"><div class="border"><div class="number ">31</div></div></li><li class="other"><div class="border"><div class="number">1</div></div></li><div class="event" onclick="window.location='?year=2013&month=04&event=1'; return false;" style="background-color:#3BB9FF; width: 99.96%;left:0%;top:20px;" title="Click event for more information"><a href="?year=2013&month=04&event=1">t</a></div><div class="event" onclick="window.location='?year=2013&month=05&event=1'; return false;" style="background-color:#3BB9FF; width: 99.96%;left:0%;top:164px;" title="Click event for more information"><a href="?year=2013&month=05&event=1"></a></div><div class="event" onclick="window.location='?year=2013&month=05&event=1'; return false;" style="background-color:#3BB9FF; width: 99.96%;left:0%;top:308px;" title="Click event for more information"><a href="?year=2013&month=05&event=1"></a></div><div class="event" onclick="window.location='?year=2013&month=05&event=1'; return false;" style="background-color:#3BB9FF; width: 99.96%;left:0%;top:452px;" title="Click event for more information"><a href="?year=2013&month=05&event=1"></a></div><div class="event" onclick="window.location='?year=2013&month=05&event=1'; return false;" style="background-color:#3BB9FF; width: 99.96%;left:0%;top:596px;" title="Click event for more information"><a href="?year=2013&month=05&event=1"></a></div></ul></div> <div class="event_panel"> <div class="title">Details</div> <div class="content"> Click a color bar on the calendar for details. </div> <div class="title">Map</div> <div class="content"> Not avaliable. </div> </div> </div> <style><!-- html, body {margin:0px; padding: 0px;} .window {position: relative; height: 755px; min-width: 600px;} .window #calendar {min-width: 500px; position: absolute; top: 0px; left: 25%; width: 75%;} .window .event_panel {position: absolute; top: 0px; width: 25%;} .window .event_panel span {text-align: center; display: block; padding-bottom: 5px;} .window .event_panel .title {border: 1px solid #000; background-color: #0696F9; color: #FFF; font-weight: bold; margin: 25px 10px 0px 0px; padding: 5px 0px 7px 0px; text-align: center;box-shadow: inset 0px 2px 2px #B6D6EB;} .window .event_panel .content {border: 1px solid #000; border-top: 0px; margin-right: 10px; padding: 5px;} .window .event_panel .detials {list-style-type: none; text-indent: 0px; margin: 0px; padding-left: 5px;} .window .event_panel .detials .header {font-weight: bold; margin-left: 0px !important;} .window .event_panel .detials li {margin-left: 10px;} #calendar ul, #calendar li {padding: 0px; margin: 0px;} #calendar .navbar {height: 25px; text-align: center; position: relative; display: block; text-align:center;} #calendar .navbar .today {position: absolute; right: 0px;} #calendar .event {position: absolute;} #calendar .dayHeadings li {display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;width: 14.28%; text-align: center;} #calendar .dayHeadings li div {border: 1px solid #000;background-color: #0696F9; color: #FFF; font-weight: bold; box-shadow: inset 0px 2px 2px #B6D6EB; padding: 5px 0px 3px 0px; overflow: hidden;} #calendar a.button, #calendar a.button:hover, #calendar a.button:visited, #calendar .navbar .tabs a {border-radius: 7px; border: 1px solid #379EE1; text-decoration: none; background-color: #B1D5ED; padding: 0px 10px 0px 10px; margin: 0px 2px 0px 2px; text-decoration: none; box-shadow: inset 0px 5px 10px #E4EEF0; color:#000; font-weight: bold;} #calendar a.button:active {border: 1px inset #B6D6EB;} #calendar .navbar .tabs a {border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; padding: 4px 20px 6px 20px; border-bottom:0px;} #calendar .navbar .tabs a:active {border-bottom: 0px;} #calendar .navbar span, #calendar .navbar a.current {font-weight: bold;} #calendar .days {background-color: #EFEDE2; position:relative; margin: 0px;} #calendar .days li {display: inline-block; width: 14.28%;display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;} #calendar .days .number {color: #000; border-radius: 50%; text-align: center; width: 20px; height: 20px;} #calendar .days .number.today {font-weight: bold; background: #000; color: #FFF;} #calendar .days .border {border: 1px solid #000; border-top: 0px; min-height: 143px;} #calendar .days .other {background-color: #C4C2BA;} #calendar .days .current {background-color: #FFF;} #calendar .days .current.weekend {background-color: #D1F0FF;} #calendar .event a {text-decoration: none; color: #000; font-weight: bold; display: block; padding-right: 5px; border-radius: 2px; text-indent:5px; font-size: 13px; border:1px solid #000; height: 16px;} #calendar .event a:active {color: #FAF486;} --></style></body> </html> Quote Link to comment Share on other sites More sharing options...
analyzethism1 Posted May 22, 2013 Author Share Posted May 22, 2013 Nevermind, I fixed it using the w3 validator - problems was with divs being child of ul, amoungst other things. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.